来自红宝书的几种继承方式

1. 原型链继承

    function SuperClass(){
        this.text = ['hello', 'world'];
    }

    SuperClass.prototype.sayHi = function(){
        console.log(this.text);
    }

    function SubClass(){

    }

    SubClass.prototype = new SuperClass();

    var test1 = new SubClass();
    test1.sayHi();// ["hello", "world"]

    var test2 = new SubClass();
    test2.text.push('shit');

    test1.sayHi(); //["hello", "world", "shit"]  所有实例引用的都是同一个值

缺点：

原型的属性被所有实例共享
创建子类时不能向父类传参

2. 借用构造函数继承

    function SuperClass(data){
        this.text = ['hello', 'world'];
        this.data = data;
        this.sayHi = function(){
            console.log(this.text);
        }
    }

    SuperClass.prototype.sayBye = function(){
        console.log(bye);
    }

    function SubClass(data, name){
        SuperClass.call(this, data);
        this.name = name;
    }

    var test1 = new SubClass();
    test1.sayHi(); //["hello", "world"]

    var test2 = new SubClass();
    test2.text.push('shit');

    test1.sayHi(); //["hello", "world"]
    
    test1.sayBye();//Uncaught TypeError: test1.sayBye is not a function

优点：

避免所有实例共享原型的属性
可以向父类传参
缺点：
只能继承父类的实例属性、方法，不能继承原型上的属性、方法
方法要在父类构造函数中定义，每次创建子类实例都会创建一个方法的副本。子类实例间的方法相同却不能复用。

3. 组合继承

将原型链继承和借用构造函数继承组合起来使用

    function SuperClass(name) {
        this.text = ['hello', 'world'];
        this.name= name;
        this.sayHi = function () {
            console.log(this.name);
        }
    }

    SuperClass.prototype.sayBye = function () {
        console.log('bye');
    }

    function SubClass(name) {
        SuperClass.call(this, name);
    }

    SubClass.prototype = new SuperClass();
    SubClass.prototype.constructor = SubClass;


    var test1 = new SubClass('one');
    var test2 = new SubClass('two');

    test1.sayHi(); //one
    test2.sayHi(); //two
    test2.sayBye(); //bye

缺点：
调用了两次父类构造函数，实例和原型有一样的属性的方法。
一个来自于SuperClass.call(this, data);
一个来自于SubClass.prototype = new SuperClass()

image.png

4. 原型式继承

利用一个空函数作为中介，进行原型的连接。

    //这个操作其实就是ES5里面的Object.create
    function inherits(obj) {
        function F() { }
        F.prototype = obj;
        return new F();
    }


    function SuperClass(name) {
        this.text = ['hello', 'world'];
        this.name = name;
        this.sayHi = function () {
            console.log(this.name);
        }
    }

    SuperClass.prototype.sayBye = function () {
        console.log('bye');
    }

    var parent = new SuperClass('test');
    var child1 = inherits(parent);
    var child2 = inherits(parent);

    child1.sayHi(); //test
    child1.sayBye(); //bye

    child1.text.push('shit');
    console.log(child2.text); //["hello", "world", "shit"] 实例共享父类属性

缺点：与原型链继承相同

5. 寄生式继承

和原型式继承一个意思

function createObj (o) {
    var clone = Object.create(o);
    clone.sayName = function () {
        console.log('hi');
    }
    return clone;
}

缺点：与原型式继承相同

6. 寄生组合继承

利用空函数来连接原型，代替组合继承中的SubClass.prototype = new SuperClass()，减少了一次父类构造调用

    function SuperClass(name) {
        this.text = ['hello', 'world'];
        this.name = name;
        this.sayHi = function () {
            console.log(this.name);
        }
    }

    SuperClass.prototype.sayBye = function () {
        console.log('bye');
    }

    function SubClass(name) {
        SuperClass.call(this, name);
    }

    var F = function(){};
    F.prototype = SuperClass.prototype;
    SubClass.prototype = new F();
    //以上三行相当于
    //SubClass.prototype =  Object.create(SuperClass.prototype)

    var test1 = new SubClass('one');
    var test2 = new SubClass('two');

    test1.sayHi(); //one
    test2.sayHi(); //two
    test2.sayBye(); //bye

总结：
最好的继承方式是寄生组合继承

    function SubClass() {
        SuperClass.call(this);
    }
    SubClass.prototype = Object.create(SuperClass.prototype);

JavaScript继承