17370845950

JavaScript 中的 class 本质是构造函数的语法糖，底层仍生成普通函数并挂载到 prototype 上，不改变原型继承机制，typeof 返回 "function"，不支持变量提升，静态方法挂类本身，实例方法挂 prototype。

JavaScript 中的 class 本质上是构造函数的语法糖，不是全新机制，也不改变原型继承的本质。

class 声明只是构造函数的包装写法

用 class 定义的类，底层仍会生成一个普通函数，并挂载到 prototype 上。它不能替代对原型链的理解。

• class Person { constructor(name) { this.name = name; } } 等价于 function Person(name) { this.name = name; }
• Person.prototype 依然存在，所有实例共享该对象上的方法
• typeof Person 返回 "function"，不是 "class"
• 不能用 class 声明变量提升（ReferenceError），但函数声明可以提升

constructor 方法不是必须显式写出的

如果省略 constructor，JavaScript 会自动插入一个空的构造函数： constructor()

• 子类继承时，若写了 constructor，必须第一行调用 super()，否则报 ReferenceError: Must call super constructor in derived class before accessing 'this'
• 父类没写 constructor，子类 super() 仍会调用隐式的空函数，没问题
• constructor 内部的 this 指向新创建的实例，和传统构造函数一致

静态方法和原型方法的存储位置不同

这是容易混淆的关键点：静态方法直接挂在类本身（即函数对象）上，而实例方法挂在 prototype 上。

class MathUtils {
  static add(a, b) { return a + b; }
  multiply(a, b) { return a * b; }
}
MathUtils.add(2, 3);        // ✅ 正常调用
MathUtils.multiply(2, 3);  // ❌ TypeError: MathUtils.multiply is not a function
const utils = new MathUtils();
utils.add(2, 3);           // ❌ TypeError: utils.add is not a function
utils.multiply(2, 3);      // ✅ 正常调用

• 静态方法相当于 MathUtils.add = function(a, b) { ... }
• 实例方法相当于 MathUtils.prototype.multiply = function(a, b) { ... }
• 不支持在 class 内部定义“私有实例属性”（ES2025 才有 #field，且仅限字段，不适用于方法）

真正要掌握的不是 class 的写法，而是它背后如何映射到函数、prototype 和 [[Prototype]] 链——尤其当调试继承关系或使用 instanceof、Object.getPrototypeOf() 时，这些底层行为不会因用了 class 而消失。