JavaScript继承有传统组合继承和ES6 class两种方式:前者通过call/apply与Object.create实现但易出错;后者用extends和super封装细节,更简洁规范,但仍是原型链语法糖,不支持多重继承。

JavaScript 中实现继承的方式有多种,ES6 的 class 语法本质上是基于原型链的语法糖,它没有引入新的面向对象机制,但大幅提升了可读性与开发效率。
传统方式:基于原型链和构造函数的继承
在 ES6 之前,常用组合继承(构造函数 + 原型链)来模拟类式继承:
- 用
call()或apply()在子类构造函数中调用父类,继承实例属性; - 将父类原型赋给子类原型(如
Sub.prototype = Object.create(Super.prototype)),继承方法; - 手动修复
constructor指向,避免丢失子类构造器引用。
这种方式逻辑清晰但代码冗长,容易出错,比如忘记设置 constructor、多次调用父类构造函数、或原型链污染等。
ES6 class 继承:简洁、规范、语义明确
class 语法通过 extends 和 super() 封装了上述细节:
立即学习“Java免费学习笔记(深入)”;
-
extends自动建立正确的原型链关系(Sub.__proto__ === Super,Sub.prototype.__proto__ === Super.prototype); -
super()在子类构造器中必须调用,确保父类实例属性被正确初始化; - 静态方法、getter/setter、
new.target等特性天然支持,无需额外适配; - 编译工具(如 Babel)能可靠转译为兼容代码,便于工程化落地。
例如:
class Animal {constructor(name) { this.name = name; }
speak() { console.log(`${this.name} makes a sound`); }
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // 调用父类构造器
this.breed = breed;
}
speak() { console.log(`${this.name} barks`); }
}
class 不是“真类”,但解决了关键痛点
JavaScript 仍基于原型,class 不改变底层机制,但它统一了继承写法,消除了常见陷阱:
- 不再需要手动操作
prototype和__proto__; - 子类构造器中不调用
super()会直接报错,强制规范流程; - 静态属性/方法继承更自然(
Super.staticMethod可被Sub.staticMethod访问); - 与 TypeScript、React Class Component 等生态工具配合更顺滑。
注意事项:class 仍有局限性
它不支持多重继承、运行时动态修改继承关系,私有字段(#field)仍处于提案阶段且兼容性需留意。若需更灵活的组合逻辑,仍应考虑 Mixin 或代理模式。











