web前端tips：js继承——寄生组合式继承

本文介绍: 寄生组合式继承是一种结合了**寄生式继承**和**组合式继承**的方式，它的目标是减少组合式继承中多余的调用父类构造函数的开销。在组合式继承中，我们通过调用父类构造函数两次来实现属性的继承，但这样做可能会导致一些性能上的问题。

输入图片描述

上篇文章给大家分享了 js继承中的 寄生式继承

web前端tips：js继承——寄生式继承

今天给大家分享一下 js 继承中的 寄生组合式继承

寄生 组合式继承

寄生组合式继承是一种结合了寄生式继承和组合式继承的方式，它的目标是减少组合式继承中多余的调用父类构造函数的开销。在组合式继承中，我们通过调用父类构造函数两次来实现属性的继承，但这样做可能会导致一些性能上的问题。

寄生组合式继承通过创建一个中间对象来继承父类的原型，从而避免了调用父类构造函数两次。以下是寄生组合式继承的实现方式：

基本步骤：

创建一个中间对象，该对象的原型为父类的原型。
将中间对象的构造函数指向子类。
将子类的原型设置为中间对象。
进行调用继承。

function inheritPrototype(child, parent) {
  // 创建一个中间对象，该对象的原型为父类的原型
  var prototype = Object.create(parent.prototype);
  // 将中间对象的构造函数指向子类
  prototype.constructor = child;
  // 将子类的原型设置为中间对象
  child.prototype = prototype;
}

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

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

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

inheritPrototype(Child, Parent);

var child1 = new Child('Tom', 5);
child1.colors.push('black');
console.log(child1.name); // 输出 "Tom"
console.log(child1.age); // 输出 5
console.log(child1.colors); // 输出 ["red", "blue", "green", "black"]
child1.sayName(); // 输出 "Tom"

var child2 = new Child('Jerry', 4);
console.log(child2.name); // 输出 "Jerry"
console.log(child2.age); // 输出 4
console.log(child2.colors); // 输出 ["red", "blue", "green"]
child2.sayName(); // 输出 "Jerry"

通过这种方式，子类就能够继承父类的原型链上的属性和方法，而不需要调用两次父类构造函数。这种方式避免了组合继承中的性能问题，使得继承更加高效。

优点

避免调用父类构造函数两次： 与组合式继承相比，寄生组合式继承通过创建一个中间对象，避免了调用父类构造函数两次的问题，从而提高了性能。
原型链继承父类的方法和属性： 寄生组合式继承继承了父类原型链上的方法和属性，使子类实例能够访问到父类原型链上定义的方法，同时又避免了组合式继承中的一些问题。

缺点

仍然有原型链上的引用类型问题： 如果父类原型链上有引用类型的属性，这些属性仍然会在子类实例之间共享，需要额外的注意以避免意外的修改。
ES5 之前的兼容性： 使用 Object.create 方法可能会导致在一些不支持 ES5 的环境中出现兼容性问题。在这种情况下，可能需要使用其他方法来创建对象，或者进行兼容性处理。
对性能的依赖： 虽然寄生组合式继承相对于组合式继承有性能上的优势，但在大规模的应用中，仍然可能需要额外的性能优化或者考虑其他的继承方式。