web前端tips：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"