JS继承方式与ES6类原型关系解析

文章不知道大家是否熟悉？今天我将给大家介绍《JS继承实现方式及ES6类与原型关系详解》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

ES6的class和extends本质是原型链语法糖，通过设置B.prototype.__proto__指向A.prototype实现方法继承，B.__proto__指向A实现静态方法继承；子类constructor中必须先调用super()初始化this；静态成员继承依赖B.__proto__===A链，而非prototype链；兼容ES5需同时补全两条原型链。

class extends 本质还是基于原型链

ES6 的 class 和 extends 并没有改变 JavaScript 继承的底层机制——它只是语法糖，背后依然靠修改 prototype 和 __proto__ 构建原型链。当你写 class B extends A，引擎实际做了两件事：让 B.prototype.__proto__ 指向 A.prototype（方法继承），同时让 B.__proto__ 指向 A（静态方法继承）。

这意味着所有你对原型链的理解（比如属性查找顺序、instanceof 判定逻辑、Object.getPrototypeOf() 返回值）在 class 写法下完全适用，没被绕过也没被替换。

super() 不是可选的，且必须在 this 之前调用

子类构造函数中若定义了 constructor，就必须显式调用 super()，否则会报 ReferenceError: Must call super constructor in derived class before accessing 'this'。这不是风格建议，是语言强制约束。

• super() 必须出现在 this 任何使用之前（包括 return、赋值、访问属性）
• super(...args) 会调用父类构造函数，并初始化 this，相当于传统写法里的 A.call(this, ...args)
• 如果子类没写 constructor，JS 引擎会自动补一个隐式构造函数，里面带 super(...arguments)

静态方法和属性的继承规则容易被忽略

静态成员（static 方法或属性）通过 constructor 自身的原型链继承，即 B.__proto__ === A 这条链起作用，而不是 B.prototype.__proto__。所以：

• class A { static foo() {} } → class B extends A 后，B.foo() 可用
• 但 A.prototype.bar = () =>{} 是实例方法，不会被 B 的静态上下文继承
• 若手动改 B.__proto__ = {}，就会断掉静态继承，而实例继承可能还完好

这种分离设计常导致调试时误以为“继承失效”，其实只是查错了链。

想兼容老环境？别只转 class，还得处理原型链补丁

Babel 把 class B extends A 编译成 ES5 时，核心不是简单模拟 function B()，而是用 _inherits(B, A) 辅助函数确保两条链都正确设置：

function _inherits(subClass, superClass) {
  subClass.prototype = Object.create(superClass && superClass.prototype);
  Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}

漏掉 Object.setPrototypeOf(subClass, superClass) 或等价逻辑，会导致静态方法丢失。很多手写“类继承”的工具函数只处理了 prototype 链，就栽在这儿。

真正要落地兼容，不能只盯着 new B() 能不能跑，得验证 B.staticMethod() 和 new B() instanceof A 是否同时成立。

今天关于《JS继承方式与ES6类原型关系解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！