17370845950

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 控制

关键差异总结

二者本质一致，但表现和约束不同：

• 可读性：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 或方法查找问题