JavaScript继承方式全解析

JavaScript继承的本质并非语法层面的“类式扩展”，而是通过精准操控原型链，让子类实例既能访问父类原型上的方法，又能正确初始化自身属性；文章深入剖析了Object.create()手动实现继承的核心原理、ES6 class extends背后的底层机制、组合继承的冗余问题及寄生组合继承的优化方案，并警示避免使用__proto__或Object.setPrototypeOf等低效或非标准方式——真正可靠的继承，是确保instanceof校验准确、方法查找路径清晰、构造函数调用无副作用的原型链工程。

JavaScript 中没有原生的 class 继承语法（ES6 class 只是语法糖），所谓“多种继承方式”本质是模拟原型链行为的不同写法，核心只有一条：让子类实例能访问父类原型上的方法，且构造函数能正确初始化实例属性。

用 Object.create() 手动设置原型链

这是最贴近 ES5 原型机制本质的做法，不依赖构造函数调用顺序，也不污染子类原型。

常见错误是直接赋值 Child.prototype = Parent.prototype，导致修改子类原型会意外影响父类。

• 必须用 Object.create(Parent.prototype) 创建干净的原型对象
• 要手动修复 constructor 指针：Child.prototype.constructor = Child
• 父类实例属性需在子类构造函数中显式调用 Parent.call(this, ...)

function Parent(name) {
  this.name = name;
}
Parent.prototype.say = function() { return 'hi'; };

function Child(name, age) {
  Parent.call(this, name); // 继承实例属性
  this.age = age;
}
Child.prototype = Object.create(Parent.prototype); // 继承原型方法
Child.prototype.constructor = Child;

ES6 class + extends 的真实行为

extends 不是新机制，它背后仍调用 Object.setPrototypeOf(Child.prototype, Parent.prototype)，并强制要求子类构造函数中必须先执行 super()。

容易踩的坑：在 super() 前访问 this 会直接报错 ReferenceError: Must call super constructor in derived class before accessing 'this'；这和 Babel 编译出的 ES5 代码行为一致。

• super() 等价于 Parent.call(this, ...)，负责初始化父类实例属性
• super.xxx 访问的是 Parent.prototype 上的属性或方法
• 子类未写 constructor 时，会隐式添加 constructor(...args) { super(...args); }

组合继承（最常用但有冗余）

即「原型链继承方法 + 借用构造函数继承属性」，解决了单纯原型链无法传参、单纯借用构造函数无法复用方法的问题，但会导致父类构造函数被调用两次。

第一次在 Child.prototype = new Parent() 时（只为取到原型），第二次在 Parent.call(this) 时（为初始化实例）。这意味着父类中的引用类型属性会被重复创建，浪费内存。

• 若父类构造函数中有副作用（如发请求、改全局状态），会被触发两次
• 可通过寄生组合继承优化：用 Object.create() 替代 new Parent() 来设置原型
• 现代开发中，除非要兼容极老环境，否则直接用 class 更清晰

为什么不能用 __proto__ 或 setPrototypeOf 实现继承？

__proto__ 是非标准属性，已被废弃；Object.setPrototypeOf() 虽然标准，但性能差——V8 引擎会将设置了该属性的对象标记为「非内联缓存友好」，后续属性访问变慢。

也就是说，它能用，但不该用于构建继承关系。所有主流方案（包括 class extends）都只在定义阶段一次性设置原型，而不是运行时动态修改。

真正容易被忽略的点是：继承不是为了「看起来像」，而是为了保证 instanceof 和 isPrototypeOf() 行为一致，以及方法查找路径符合预期。一旦原型链断裂或 constructor 错位，instanceof 就会返回 false，而开发者往往只测功能，不验类型关系。

终于介绍完啦！小伙伴们，这篇关于《JavaScript继承方式全解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！