先明确一个核心痛点:寄生组合继承的诞生,归根结底是为了解决传统组合继承中那个让人头疼的“二次调用”问题。简单说,就是保证父类构造函数只在子类实例化的时候跑一次,而不是在设置原型的时候就提前跑一遍,从而彻底规避掉原型上那些多余的初始化逻辑以及数据共享的坑。

寄生组合继承的精髓,恰好就落在这个点上——它让父类构造函数只触发一次,而且是唯一一次:在子类实例化时。
为什么“多跑一次”会是个大问题
传统组合继承中,父类构造函数的调用,变成了一个“重复劳动”:
- 第一次调用:发生在
Child.prototype = new Parent()这一步。注意,此时的this指向的是一个临时对象,这个对象将成为子类的原型。后果是什么?父类的实例属性,比如this.colors = ['red'],直接被绑定到了Child.prototype上。这意味着所有子类实例,都将共享这同一个colors引用。 - 第二次调用:发生在子类构造函数内部的
Parent.call(this, name)。这次是为每个实例单独初始化,它会覆盖原型上的同名属性。但第一次调用留下的副作用——比如原型上多出一个数组引用——已经无法消除了。
这可不是多跑几行代码那么简单——它背后藏着实打实的隐患:数据污染、计数器不准、重复发起请求……凡是依赖初始化状态的场景,都可能被它带偏。
关键操作:如何干净利落地切断原型上的构造调用
寄生组合继承的思路很直接:不再依赖 new Parent() 来创建原型,而是用更轻量、更干净的方式建立起原型链:
- 使用
Object.create(Parent.prototype)创建一个空对象。这个空对象的[[Prototype]]会直接指向父类原型,整个过程中父类构造函数一次都不会被执行。 - 手动将这个新对象的
constructor属性指回子类。如果不这么做,后续的instanceof判断或者obj.constructor取值,可能会出现意料之外的结果。 - 子类构造函数内部,仍然保留
Parent.call(this, ...)这一行。它的职责是确保每个实例都拥有独立的属性副本。
标准封装写法(可直接复用)
function inherit(Child, Parent) { const proto = Object.create(Parent.prototype); proto.constructor = Child; Child.prototype = proto;}function Parent(name) { this.name = name; this.tags = ['js', 'web'];}Parent.prototype.say = function() { console.log(this.name); };function Child(name, age) { Parent.call(this, name); // ✅ 唯一一次调用 this.age = age;}inherit(Child, Parent); // ❌ 不再 new Parent()Child.prototype.sayAge = function() { console.log(this.age); };
效果验证要点
运行后,可以重点确认以下三点是否达成:
- 子类实例能正常调用
say()(说明原型链完整)。 - 修改
child1.tags.push('react')不会影响child2.tags(说明原型上没有冗余的实例属性)。 child1 instanceof Parent和child1 instanceof Child都返回true(说明原型链和 constructor 都正确)。
这套模式并不复杂,但涉及细节多,容易踩坑。理解清楚它的运作方式,后续工作里自然游刃有余。
