类与构造函数区别详解【JavaScript教程】

文章不知道大家是否熟悉？今天我将给大家介绍《类与构造函数区别详解【JavaScript教程】》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

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; }
}
<p>MathUtils.add(2, 3);        // ✅ 正常调用
MathUtils.multiply(2, 3);  // ❌ TypeError: MathUtils.multiply is not a function</p><p>const utils = new MathUtils();
utils.add(2, 3);           // ❌ TypeError: utils.add is not a function
utils.multiply(2, 3);      // ✅ 正常调用</p>

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

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

终于介绍完啦！小伙伴们，这篇关于《类与构造函数区别详解【JavaScript教程】》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！