JavaScript-继承的多种方式以及优缺点

很多面向对象语言都支持两种继承：接口继承和实现继承。前者只继承方法签名，后者继承实际的方法。接口继承在ECMAScript中是不可能的，因为函数没有签名。实现继承是ECMAScript唯一支持的继承方式，而这主要是通过原型链实现的。

如果对原型链不清楚，可以看我上篇博客https://blog.csdn.net/lililiwenqi/article/details/116707906?spm=1001.2014.3001.5501

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

原型链的问题：

1.原型中包含的引用值会在所有实例间共享

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

function Child () {

}

Child.prototype = new Parent();

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", "yayu"]

每个Parent的实例都会有自己的names属性。当Child通过原型继承Parent后，Child.prototype变成了Parent的一个实例，因而获得了自己的names属性。这类似于创建了Child.prototype.names属性，所以Child的所有实例都会共享这个names属性。

2.字类型在实例化时不能给父类型的构造函数传参

 

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()或apply()方法，Parent构造函数在为Child的实例创建的新对象的上下文中执行了。这相当于新的Child对象上运行了Parent()函数中所有初始化代码。结果就是每个实例都会有自己的names属性。

优点：

1.避免了引用类型的属性被所有实例共享

2.可以在子类构造函数中向父类构造函数传参

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

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

var child1 = new Child('kevin');

console.log(child1.name); // kevin

var child2 = new Child('daisy');

console.log(child2.name); // daisy

问题：

必须在构造函数中定义方法，因此函数不能重用。子类也不能访问父类原型上定义的方法。

 

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();

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"]

 

4.原型式继承

function createObj(o) {
    function F(){}
    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"]

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

 

5.寄生式继承

创建一个实现继承的函数，以某种方式增强对象，然后返回这个对象

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

let person = {
    name: "Nicholas",
    friends: ["she", "con", "van"]
}
let child = createObj(person)
child.sayName() //"hi

新返回的对象具有person的所有属性和方法，还有一个新方法sayName()。

缺点：

跟盗用构造函数模式一样，每次创建对象都会创建一遍方法。

 

6.寄生式组合继承

组合继承其实也存在效率问题。父类构造函数始终会被调用两次：一次在创建子类原型时调用，另一次是在子类构造函数中调用。

我们不使用 Child.prototype = new Parent() ，而是间接的让 Child.prototype 访问到 Parent.prototype 。

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

function inheritPrototype(child, parent) {
    var prototype = object(parent.prototype);
    prototype.constructor = child;
    child.prototype = prototype;
}

// 当我们使用的时候：
inheritPrototype(Child, Parent);

这种方式的高效率体现它只调用了一次 Parent 构造函数，并且因此避免了在 Parent.prototype 上面创建不必要的、多余的属性。与此同时，原型链还能保持不变；因此，还能够正常使用 instanceof 和 isPrototypeOf。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

 

如果有错误或者不严谨的地方，请务必给予指正，十分感谢。