es6 class本质是原型链的语法糖:编译后为构造函数,自动设置原型链、修正constructor,并强制super调用;super()对应父类构造调用或prototype方法显式绑定;class方法不可枚举且启用严格模式。

ES6 的 class 本质是语法糖,底层完全依托于 JavaScript 原型链机制。要真正看清它怎么工作,不能只写 class A extends B 就停下,得一层层剥开运行时的真实结构。
看编译后的真实函数结构
把 class 写出来,再手动还原成等价的函数式写法,是最直接的“透视”方式:
-
class Person { constructor(name) { this.name = name; } }等价于:function Person(name) { this.name = name; },且Person.prototype自动挂载了所有非静态方法 -
class Student extends Person { constructor(name, id) { super(name); this.id = id; } }底层实际做了三件事:
– 调用Person.call(this, name)初始化父类实例属性
– 执行Student.prototype = Object.create(Person.prototype)建立原型链
– 补上Student.prototype.constructor = Student修正构造器引用
检查运行时的原型链关系
实例创建后,用原生 API 打印出真实的连接关系,比任何文档都直观:
const s = new Student('Alice', 101);console.log(Object.getPrototypeOf(s) === Student.prototype); // trueconsole.log(Object.getPrototypeOf(Student.prototype) === Person.prototype); // trueconsole.log(Person.prototype.isPrototypeOf(s)); // true
这串输出清晰表明:实例 → 子类原型 → 父类原型 → Object.prototype → null,就是完整的查找链。
验证 super() 的实际行为
super() 不是魔法,它在子类构造函数中就对应一次明确的父类构造调用:
- 去掉
super()会报错Must call super constructor...,因为引擎强制要求先初始化this(即完成父类构造逻辑) -
super.sayHello()在方法体内,等价于Person.prototype.sayHello.call(this),即显式绑定上下文并调用父类原型上的方法 - 可在 Chrome DevTools 的“Sources”面板中打断点,单步进入
super(),观察调用栈里真实执行的是哪个函数
对比 class 与手动原型继承的差异点
写一个纯原型链版本,和 class 版本放一起对照,能立刻暴露关键设计细节:
- 手动设置
Child.prototype = Object.create(Parent.prototype)后,必须手动修复constructor;而 class 自动生成正确指向 - class 中定义的方法默认不可枚举(
Object.keys(Child.prototype)拿不到),但手动挂到prototype上的方法是可枚举的 - class 声明会自动启用严格模式,且不允许重复声明、提升行为受限;普通函数没有这些限制
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











