🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

在 JavaScript 中，组合继承（Combination Inheritance）是一种通过融合 构造函数继承 和 原型链继承 实现的继承模式。它的核心目标是解决传统原型链继承的缺陷（如引用类型属性共享、无法传参初始化），同时保留原型链继承的优势（方法复用）。本文将从内存机制、执行流程、关键缺陷与优化等角度，深入解析组合继承的底层原理。

一、组合继承的核心机制：两次构造函数调用 + 原型链绑定

组合继承的实现依赖两个关键步骤，对应两种继承方式的底层逻辑：

1.1 构造函数继承：属性私有化与参数传递

核心操作：在子类构造函数中，通过 call/apply 调用父类构造函数，将父类的属性“复制”到子类实例中。

function Child(name, age, grade) {
  Parent.call(this, name, age); // 调用父类构造函数，绑定子类实例的 this
  this.grade = grade; // 子类独有属性
}

底层原理：

• 当执行 Parent.call(this, name, age) 时，JavaScript 会在 子类实例的作用域 中执行父类构造函数：
  • 父类构造函数中的 this 指向子类实例（this 绑定）。
  • 父类的属性（如 name、age、friends）会被直接挂载到子类实例对象上，成为实例的自有属性。
• 效果：每个子类实例拥有独立的属性副本，避免引用类型共享问题；支持在实例化时向父类传递参数，动态初始化属性。

1.2 原型链继承：方法复用与原型绑定

核心操作：将子类原型指向父类原型的副本，建立原型链关系。

Child.prototype = Object.create(Parent.prototype); // 创建原型链
Child.prototype.constructor = Child; // 修正 constructor 指向

底层原理：

• Object.create(Parent.prototype) 创建一个新对象，其 [[Prototype]] 内部属性指向 Parent.prototype（即原型链绑定）。
• 子类原型（Child.prototype）不再是父类的实例（避免引用类型共享），而是直接关联父类原型，形成 Child实例 → Child.prototype → Parent.prototype → Object.prototype 的原型链。
• 效果：子类实例可通过原型链访问父类原型上的方法（如 sayName），实现方法复用，且无需重复定义。

二、内存模型：实例属性与原型方法的存储分离

组合继承的底层逻辑可通过内存模型直观理解：

2.1 父类构造函数的作用：初始化实例属性

（示例：父类 Parent 定义实例属性 name、age、friends，通过 call 挂载到子类实例）

• 父类实例属性（如 friends）存储在每个子类实例的内存空间中，彼此独立，修改一个实例的属性不会影响其他实例。

2.2 父类原型的作用：共享方法

（示例：父类原型方法 sayName 存储在 Parent.prototype，子类实例通过原型链访问）

• 父类原型方法（如 sayName）存储在 Parent.prototype 对象中，所有子类实例共享该原型对象，节省内存空间。

三、关键缺陷：父类构造函数的两次调用

组合继承的最大争议在于 父类构造函数会被调用两次，其底层原因与执行顺序密切相关：

3.1 第一次调用：创建原型链时的“无用实例”

Child.prototype = new Parent(); // 旧实现方式（非优化版组合继承）

• 在早期的组合继承实现中，直接通过 new Parent() 创建父类实例作为子类原型。此时父类构造函数会被调用，生成一个“原型实例”，其属性（如 friends）会被挂载到 Child.prototype 上。
• 问题：Child.prototype 中的属性是父类实例的属性（属于引用类型），会被所有子类实例共享，导致原型链继承的缺陷未被解决。

3.2 优化后的第二次调用：Object.create 避免属性污染

现代组合继承通过 Object.create(Parent.prototype) 替代 new Parent()，避免了第一次构造函数调用带来的属性污染：

Child.prototype = Object.create(Parent.prototype); // 优化后，不调用父类构造函数

• Object.create 仅创建原型链关联，不会实例化父类，因此父类构造函数仅在子类构造函数中被调用一次（通过 Parent.call(this)）。
• 残留问题：虽然 Object.create 避免了第一次调用，但早期部分资料仍将组合继承描述为“两次调用”，这是历史实现方式的遗留说法。

四、与 ES6 类继承的底层关联

ES6 的 class 语法本质上是组合继承的语法糖，其底层实现完全遵循组合继承的逻辑：

4.1 构造函数继承：super() 的本质

class Child extends Parent {
  constructor(name, age, grade) {
    super(name, age); // 等价于 Parent.call(this, name, age)
    this.grade = grade;
  }
}

• super() 会调用父类构造函数，并将 this 绑定到子类实例，实现属性初始化。

4.2 原型链继承：原型绑定的底层操作

// ES6 引擎内部实现（简化版）
Object.setPrototypeOf(Child.prototype, Parent.prototype); // 绑定原型链
Child.prototype.constructor = Child;

• 通过 Object.setPrototypeOf 建立子类原型与父类原型的关联，与组合继承的 Object.create 效果一致。

五、组合继承的性能与适用场景

5.1 性能权衡

• 优点：属性私有化避免共享冲突，原型链实现方法复用，内存效率较高。
• 争议点：早期实现中父类构造函数的两次调用可能产生冗余实例，但现代优化后仅需一次有效调用，性能影响可忽略。

5.2 适用场景

• 需要复用方法：如工具类、基类与子类的逻辑继承。
• 需要属性独立：如用户实例、业务对象等具有独立状态的数据模型。
• 兼容性要求：在不支持 ES6 class 的环境中（如老旧浏览器），组合继承是标准实现方案。

六、总结：组合继承的设计哲学

组合继承的底层原理体现了 JavaScript 面向对象的核心思想：

• 通过原型链实现逻辑复用（代码重用）。
• 通过构造函数实现状态隔离（数据独立）。
• 通过 this 绑定实现灵活的参数传递（运行时动态性）。

尽管 ES6 的 class 语法简化了继承的写法，但理解组合继承的底层逻辑（如原型链绑定、this 作用域、构造函数调用时机）仍是掌握 JavaScript 继承机制的关键。无论是调试传统代码，还是深入理解现代框架（如基于原型的 UI 组件库），组合继承的原理都具有不可替代的价值。