ES6 class本质是原型继承的语法糖,底层通过prototype和__proto__实现;子类必须调用super()初始化this;推荐用Object.getPrototypeOf()而非__proto__验证继承链;class在调试、工具支持和类型推导上优于手动原型继承。

ES6 的 class 本质就是语法糖,底层仍是原型继承
你写 class,JS 引擎最终还是把它编译成基于 prototype 和 __proto__ 的对象链。比如 class B extends A,实际等价于手动设置 B.prototype.__proto__ = A.prototype(加上构造函数调用、super() 绑定等细节)。这不是“模拟”,而是标准规定的实现方式——V8、SpiderMonkey 都照此执行。
所以不存在“两种继承机制”,只有“一种机制 + 两种写法”。理解这点,才能不被 class 的表象迷惑。
extends 要求子类构造函数必须调用 super()
这是强制规则,不调用会直接报错:ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor。因为子类的 this 必须由父类构造函数初始化(比如分配实例属性、绑定内部 slot),super() 就是触发这个过程的唯一入口。
常见错误场景:
立即学习“Java免费学习笔记(深入)”;
- 在
super()前访问this(哪怕只是console.log(this))→ 报错 - 箭头函数中写
super()→ 语法错误(super只能在普通函数方法中使用) - 忘记传参给
super(),导致父类初始化不完整(比如父类需要name,子类没传)→ 运行时逻辑异常
Object.getPrototypeOf() 和 __proto__ 都能验证继承链,但推荐前者
想确认 B 是否继承自 A,可以查原型链:
class A {}
class B extends A {}
console.log(Object.getPrototypeOf(B.prototype) === A.prototype); // true
console.log(B.prototype.__proto__ === A.prototype); // true(但不推荐)
__proto__ 是非标准遗留属性,虽被广泛支持,但规范明确建议用 Object.getPrototypeOf();同理,设置原型应使用 Object.setPrototypeOf(),而非直接赋值 __proto__。
另外注意:Object.getPrototypeOf(B) === A 是错的——那是**构造函数的继承**(即静态方法继承),而 extends 默认只建立 prototype 链;若需静态继承,得显式写 static get [Symbol.hasInstance]() { ... } 或靠 Babel 转译补全。
手动原型继承和 class 在可调试性与工具支持上有明显差距
用传统方式写继承(Child.prototype = Object.create(Parent.prototype))虽然原理透明,但现代 IDE 和 DevTools 对它识别度低:断点可能跳不到正确位置,instanceof 在某些边界情况返回 false,TypeScript 类型推导也容易失效。
而 class 写法:
- DevTools 中能清晰显示
class B extends A结构 -
instanceof行为稳定(只要没篡改constructor) - TypeScript 能准确推导泛型、重载、装饰器行为
- 构建工具(如 Webpack、Rollup)对
class的 tree-shaking 更可靠
真正容易被忽略的是:即使你用 class,如果在子类中覆盖了 constructor 却忘了写 super(),或者误把 super 当作普通函数调用(比如 super.foo() 在非方法上下文中),错误信息并不会直接告诉你“你破坏了原型链”,而是抛出看似无关的 this 相关异常。











