登录
全面解析 JavaScript 类继承：方式、优缺点与应用场景
2025年8月13日 22:00
在 JavaScript 中，“继承”指的是让一个对象或类能够复用另一个对象或类的属性和方法。
由于 JavaScript 的面向对象机制是基于 原型（prototype） 而非传统类，因此继承方式丰富多样，从 ES5 时代的手动原型链，到 ES6 之后的 class 语法糖，都有不同的实现手段。
本文将系统介绍 8 种主要继承方式，分析它们的优缺点与适用场景，并提供代码示例。
1. class 继承（ES6 extends）
class Parent {
greet() { console.log("Hello from Parent"); }
}
class Child extends Parent {
greet() { super.greet(); console.log("...and from Child"); }
}
new Child().greet();
优点
- 语法简洁，接近 Java / C# 等语言。
- 内置
super调用父类构造和方法。 - 支持继承内置对象（
Array,Error等）。 - 性能接近最佳（底层是寄生组合继承）。
缺点
- 只是语法糖，本质仍是原型链。
- 高级场景（动态改继承结构）需理解原型机制。
适用场景
- 现代前端、Node.js 项目的默认选择。
2. class + 表达式继承（动态继承）
function mixin(base) {
return class extends base {
extra() { console.log("extra"); }
}
}
class Parent {}
class Child extends mixin(Parent) {}
new Child().extra();
优点
- 运行时动态决定父类。
- 易于组合多个基类。
缺点
- 可读性差，调试困难。
适用场景
- 插件系统、UI 组件动态扩展。
3. 原型链继承
function Parent() { this.colors = ["red", "blue"]; }
Parent.prototype.say = function() { console.log("parent"); };
function Child() {}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
优点
- 实现简单。
- 子类可直接访问父类原型方法。
缺点
- 属性被所有实例共享（引用类型容易出错）。
- 无法向父类构造传参。
适用场景
- 学习原型链原理，已不推荐在生产使用。
4. 借用构造函数继承
function Parent(name) { this.name = name; }
function Child(name) { Parent.call(this, name); }
优点
- 每个实例的属性独立。
- 可传参。
缺点
- 无法继承父类原型方法，方法需重复定义。
适用场景
- 仅继承属性，不需要父类方法的简单对象。
5. 组合继承
function Parent(name) { this.name = name; }
Parent.prototype.say = function() { console.log(this.name); };
function Child(name) {
Parent.call(this, name); // 继承属性
}
Child.prototype = new Parent(); // 继承方法
Child.prototype.constructor = Child;
优点
- 继承父类属性与方法。
- 子类实例独立。
缺点
- 父类构造函数被调用两次。
适用场景
- ES5 最常用方式，简单可靠。
6. 寄生组合继承
function inherit(Child, Parent) {
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
}
function Parent(name) { this.name = name; }
Parent.prototype.say = function() { console.log(this.name); };
function Child(name) {
Parent.call(this, name);
}
inherit(Child, Parent);
优点
- 父类构造只调用一次，性能好。
- 完整继承属性和方法。
缺点
- 写法比组合继承稍复杂。
适用场景
- ES5 推荐的最佳继承方案。
7. 原型式继承
let parent = { greet() { console.log("hello"); } };
let child = Object.create(parent);
child.greet();
优点
- 极简，无需构造函数。
- 灵活，适合快速克隆对象。
缺点
- 属性共享，引用类型有风险。
- 无法传参初始化。
适用场景
- 创建配置模板、数据对象。
8. 寄生式继承
function createChild(o) {
let clone = Object.create(o);
clone.say = function() { console.log("hi"); };
return clone;
}
let parent = { greet() { console.log("hello"); } };
let child = createChild(parent);
child.say();
优点
- 在原型式继承基础上增强对象。
- 灵活度高。
缺点
- 方法无法复用，浪费内存。
适用场景
- 一次性对象增强。
9. Mixin 混入
const sayMixin = { say() { console.log("hi"); } };
class Person {}
Object.assign(Person.prototype, sayMixin);
优点
- 模拟多继承。
- 灵活扩展功能。
缺点
- 命名冲突风险。
- 方法来源分散，不易维护。
适用场景
- 事件系统、功能扩展。
继承方式对比表
| 方式 | 优点 | 缺点 | 推荐度 | 场景 |
|---|---|---|---|---|
| class 继承 | 语法简洁，支持 super | 语法糖，本质是原型链 | ⭐⭐⭐⭐⭐ | 现代项目 |
| class + 表达式 | 动态父类 | 可读性差 | ⭐⭐⭐ | 插件系统 |
| 原型链继承 | 简单直观 | 属性共享，不能传参 | ⭐ | 学习原理 |
| 借用构造函数 | 属性独立，可传参 | 不继承方法 | ⭐⭐ | 仅需属性 |
| 组合继承 | 属性独立+继承方法 | 调用两次父构造 | ⭐⭐⭐⭐ | ES5 常用 |
| 寄生组合继承 | 性能最佳 | 写法稍复杂 | ⭐⭐⭐⭐⭐ | ES5 推荐 |
| 原型式继承 | 极简 | 属性共享 | ⭐⭐ | 对象克隆 |
| 寄生式继承 | 灵活增强 | 无法复用方法 | ⭐⭐ | 一次性增强 |
| Mixin | 多继承效果 | 命名冲突风险 | ⭐⭐⭐ | 功能扩展 |
结语
- 如果是 现代项目：优先使用
class extends。 - 如果是 ES5 项目：用 寄生组合继承。
- 如果只是克隆/增强对象：用 Object.create 或 Mixin。
- 学习原型链原理时，可以用最简单的原型链继承练习。
理解继承方式，不仅是写代码的技巧，更是掌握 JavaScript 对象模型的关键。
