es6 的 class 是构造函数的语法糖,本质为严格模式下的函数声明、原型方法挂载和寄生组合继承的自动化实现。
es6 的 class 不是全新机制,而是对传统构造函数的语法封装——它在运行时会被 javascript 引擎(或 babel 等编译器)转译为等价的构造函数+原型操作代码。识别它的“语法糖本质”,关键在于理解三组对应关系:声明形式、实例初始化逻辑、以及继承行为。
class 声明 → 构造函数声明 + 严格模式检查
当你写:
class Person {
constructor(name) {
this.name = name;
}
}
引擎实际处理逻辑接近于:
function Person(name) {
// 自动插入:检测是否用 new 调用
if (!(this instanceof Person)) {
throw new TypeError('Cannot call a class as a function');
}
this.name = name;
}
也就是说:class 声明会隐式添加 instanceof 校验,防止被当作普通函数调用;而原生构造函数需手动加这层防护(否则 Person('张三') 会静默污染全局对象)。
class 内方法 → 挂载到 prototype 上的函数
类中定义的非静态方法(如 say()),不会绑定到每个实例上,而是自动挂载到 Class.prototype:
class Person {
constructor(name) { this.name = name; }
say() { return `Hi, I'm ${this.name}`; }
}
等价于构造函数写法中的:
function Person(name) { this.name = name; }
Person.prototype.say = function() {
return `Hi, I'm ${this.name}`;
};
所有实例共享同一个方法引用,节省内存;这也解释了为什么 class 方法不能访问私有变量(除非用闭包模拟),因为它们本质上就是原型方法。
extends 继承 → 寄生组合继承的自动化实现
使用 class Child extends Parent 时,底层不是简单设置 Child.prototype = Object.create(Parent.prototype),而是完整复现了 ES5 最优继承模式:
- 子类构造函数内部自动调用
Parent.call(this, ...)(通过super()实现),确保父类实例属性正确初始化 - 子类原型链正确指向父类原型(
Object.setPrototypeOf(Child.prototype, Parent.prototype)) - 同时保证
Child.prototype.constructor === Child(避免被覆盖)
换句话说:extends 不是语法捷径,而是把寄生组合继承的 4–5 步手动操作压缩成一行关键字,既安全又不易出错。
其他可验证的底层线索
你可以通过几个小实验确认 class 的构造函数本质:
-
typeof MyClass返回"function",不是"class" -
MyClass.prototype存在且可读写(比如动态加方法:MyClass.prototype.newMethod = () => {}) - Babel 编译后的输出是标准函数+
Object.defineProperty+Object.setPrototypeOf调用 - 不支持变量提升:和函数表达式一样,必须先声明再使用,证明它不是“新类型”而是受作用域约束的函数值











