JavaScript原型链继承与ES6 class继承本质相同,均基于原型机制;前者需手动设置prototype、constructor及调用super.call(),后者是语法糖,通过extends和super强制约束继承流程,更安全易读。

JavaScript 原型链继承是通过手动设置构造函数的 prototype 指向父类实例(或父类原型),让子类实例能沿原型链访问父类方法和属性;而 ES6 的 class 语法是基于原型链的语法糖,底层仍靠原型机制实现,但提供了更清晰、更符合传统面向对象习惯的声明方式和语义约束。
原型链继承的核心操作
手动构建继承关系的关键在于让子类原型“链接”到父类实例或原型上:
- 最典型的是
Sub.prototype = new Super():子类原型被设为父类的一个实例,从而继承父类实例属性和原型方法(但会执行父类构造函数,可能带来副作用) - 更安全的做法是
Object.create(Super.prototype):只继承父类原型上的方法,不触发父类构造逻辑 - 必须重设
constructor指针,否则Sub.prototype.constructor会指向Super - 子类构造函数中需用
Super.call(this, ...)显式调用父类构造器,才能正确初始化实例属性
ES6 class 继承的实质与限制
class 并非新机制,而是对原型继承的封装:
-
extends底层仍是设置Sub.__proto__ = Super(静态继承)和Sub.prototype.__proto__ = Super.prototype(原型链继承) -
super()在子类构造器中必须调用,且必须在使用this前调用——这是 class 语法强加的时序约束,原型链写法中没有该限制 - class 内部方法默认不可枚举,且 class 声明不会被提升(函数声明会)
- 无法直接访问或修改原型链结构(如不能写
Sub.prototype = ...),所有继承行为必须通过extends和super控制
关键差异总结
二者本质一致,但表现和约束不同:
立即学习“Java免费学习笔记(深入)”;
-
可读性:class 更接近 Java/C++ 风格,逻辑集中;原型链写法分散、易出错(比如漏写
constructor或super.call) -
语义明确性:class 强制区分静态继承(
__proto__)和实例继承(prototype.__proto__),原型链需手动维护两者 -
运行时灵活性:原型链可在运行时动态修改继承关系(如替换
prototype);class 定义后结构基本固定 -
错误提示:class 报错更友好(如未调用
super()直接报 ReferenceError);原型链错误往往延迟到调用时才暴露(如this.xxx为 undefined)
实际开发建议
现代项目优先使用 class + extends:
- 代码更简洁、协作更易理解,且与 TypeScript、Babel 等工具链兼容良好
- 若需深度定制继承行为(如多继承模拟、运行时混入),可在 class 基础上操作原型(如
Object.setPrototypeOf),但避免完全绕过 class 体系 - 阅读旧代码或调试时,要清楚
class A extends B展开后就是原型链操作,便于排查instanceof、isPrototypeOf或方法查找问题











