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__。所以:
立即学习“Java免费学习笔记(深入)”;
-
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 是否同时成立。











