什么是类以及如何在javascript中定义类_它与构造函数有何关系【教程】

幻影之瞳 2026-01-18 00:00:00 次阅读

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() {}。它不会初始化任何属性，也不会调用 super()（在子类中则必须显式调用）。

子类继承时，若写了 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);      // ✅ 正常调用