JavaScript继承实现方式全解析

学习文章要努力，但是不要急！今天的这篇文章《JavaScript继承的几种实现方式详解》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

JavaScript继承本质是让子类实例访问父类原型方法并正确初始化属性，核心方案为Object.create()设置原型链并修复constructor，ES6 class extends底层仍基于此机制。

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学习网公众号！