JavaScript深入之继承的多种方式和优缺点

1.原型链继承

function Parent () {
    this.name = 'kevin';
}

Parent.prototype.getName = function () {
    console.log(this.name);
}

function Child () {

}

Child.prototype = new Parent();

var child1 = new Child();

console.log(child1.getName()) // kevin

核心：将父类的实例作为子类的原型

特点：实例可继承的属性有：Child实例的构造函数的属性，父类构造函数属性，父类原型的属性。

缺点：

1.父类引用类型的属性被所有实例共享。
2.在创建 Child 的实例时，不能向Parent传参。

2.借用构造函数

function Parent () {
    this.names = ['kevin', 'daisy'];
}

function Child () {
    Parent.call(this);
}

var child1 = new Child();

child1.names.push('yayu');

console.log(child1.names); // ["kevin", "daisy", "yayu"]

var child2 = new Child();

console.log(child2.names); // ["kevin", "daisy"]

核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类。

特点：

解决了原型链继承中，子类实例共享父类引用属性的问题
创建子类实例时，可以向父类传递参数
可以实现多继承（call多个父类对象）

缺点：

只能继承父类构造函数的属性和方法，不能继承原型上的属性/方法
无法实现函数复用，每个子类都有父类实例函数的副本，浪费内存，影响性能

3.组合继承

function Parent (name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function () {
    console.log(this.name)
}

function Child (name, age) {

    Parent.call(this, name);
    
    this.age = age;

}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('kevin', '18');

child1.colors.push('black');

console.log(child1.name); // kevin
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "black"]

var child2 = new Child('daisy', '20');

console.log(child2.name); // daisy
console.log(child2.age); // 20
console.log(child2.colors); // ["red", "blue", "green"]

核心：原型链继承和经典继承双剑合璧。

优点：可以继承父类原型上的属性，可以传参，可复用。融合原型链继承和构造函数的优点，是 JavaScript 中最常用的继承模式。

缺点：调用了两次父类构造函数（耗内存）。

4.原型式继承

function createObj(o) {
    // 创建一个空函数
    function F(){}
    // o一般指向父类原型
    F.prototype = o;
    // 实例化空函数，可以继承父类原型上的方法和属性
    return new F();
}

就是 ES5 Object.create 的模拟实现，将传入的对象作为创建的对象的原型。

var person = {
    name: 'kevin',
    friends: ['daisy', 'kelly']
}

var person1 = createObj(person);
var person2 = createObj(person);

person1.name = 'person1';
console.log(person2.name); // kevin

person1.firends.push('taylor');
console.log(person2.friends); // ["daisy", "kelly", "taylor"]

注意：修改person1.name的值，person2.name的值并未发生改变，并不是因为person1和person2有独立的 *name *值，而是因为person1.name = ‘person1’，给person1添加了 name 值，并非修改了原型上的 name 值，person2.name获取的是原型上的值。

核心：使用一个空函数作为过渡对象，让空函数的prototype 指向需要继承的对象，返回实例化的空函数。

优点：空函数作为过渡对象，构造函数无内容，可以较少开销。

缺点：包含引用类型的属性值始终都会共享相应的值，这点跟原型链继承一样。

5. 寄生式继承

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

核心：寄生式继承就是对原型式继承的第二次封装，在第二次封装过程中对继承的对象进行了扩展，这样新创建的对象不仅可以继承父类中的属性和方法而且还添加了新的属性和方法。

6. 寄生组合式继承

// 原型式继承
function createObj(o) {
    // 创建一个空函数
    function F(){}
    // o一般指向父类原型
    F.prototype = o;
    // 实例化空函数，可以继承父类原型上的方法和属性
    return new F();
}
// 寄生式继承
function prototype(child, parent) {
    // 通过原型式继承，继承父类原型上的属性和方法
    var prototype = createObj(parent.prototype);
    // 添加新的属性，修复子类的构造函数
    prototype.constructor = child;
    // 修改子类的原型，保留子类的构造函数，继承父类原型上的属性和方法
    child.prototype = prototype;
}

// 当我们使用的时候：
function Parent (name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function () {
    console.log(this.name)
}

function Child (name, age) {
    //  借用构造函数
    Parent.call(this, name);
    this.age = age;
}
prototype(Child, Parent);
var child1 = new Child('kevin', '18');

console.log(child1);

核心：寄生式继承和借用构造函数的经典组合。

借用构造函数，继承了构造函数中的属性和方法。通过原型继承可以继承父类原型的属性和方法，由于原型继承中，使用空函数作为过渡对象，构造函数无内容，可以较少开销。直接通过原型继承存在一个问题，子类的构造函数将会丢失。所以通过，寄生式继承对原型继承的结果进行扩展，修复其构造函数指向的不正确问题。最后将子类原型指向这个结果。

寄生组合式继承是引用类型最理想的继承范式。