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

news2024/9/24 11:29:00

输入图片描述

上篇文章给大家分享了 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 的环境中出现兼容性问题。在这种情况下，可能需要使用其他方法来创建对象，或者进行兼容性处理。
对性能的依赖： 虽然寄生组合式继承相对于组合式继承有性能上的优势，但在大规模的应用中，仍然可能需要额外的性能优化或者考虑其他的继承方式。

总体来说，寄生组合式继承是一种在继承中相对合理的选择，特别是在要求继承父类原型链上方法和避免组合式继承性能问题的情况下。在实际应用中，选择继承方式时需要根据具体情况进行权衡和取舍。如果在现代环境下，可以考虑使用 ES6 的 class 语法来实现继承。