JavaScript类与构造函数有什么不同

有志者，事竟成！如果你在学习文章，那么本文《JavaScript类与构造函数区别详解》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

class声明不提升且强制new调用，function声明提升且可直接调用；class方法不可枚举、子类必须super()，static方法定义时机与绑定方式也不同。

class 声明不会被提升，而 function 构造函数会

这是最常踩的坑：用 class 定义类时，如果在声明前就尝试实例化，会直接报 ReferenceError: Cannot access 'MyClass' before initialization。而传统 function 构造函数虽然没有变量提升的完整语义，但函数声明会被提升（hoisted），允许在声明前调用。

实操建议：

• 始终把 class 声明放在使用它的代码之前，不要依赖提升
• 若需模块内“先用后定义”，改用 const MyClass = class { ... } 表达式（它和函数表达式一样不提升）
• 构建工具（如 Webpack、Vite）中，ES 模块默认是 strict mode，且 class 总是处于 TDZ（暂时性死区），这点无法绕过

class 内部方法默认不可枚举，constructor 必须显式调用 super()

在 class 中定义的实例方法（包括 constructor）自动设置 enumerable: false，而用 function 构造函数 + .prototype 手动挂载的方法默认是可枚举的——这会影响 for...in、Object.keys() 等行为。

子类 constructor 中若没写 super()，运行时直接抛 ReferenceError: Must call super constructor in derived class before accessing 'this'；传统构造函数继承靠手动 Parent.call(this)，没这层强制约束，但也容易漏掉导致 this 绑定错误。

实操建议：

• 别依赖 for...in 遍历实例方法，优先用 Object.getOwnPropertyNames() 或 Reflect.ownKeys()
• 子类 constructor 第一行必须是 super()（或 return 一个对象），哪怕不传参也要写 super()
• 想让某个方法可枚举？只能用赋值方式：this.myMethod = function() { ... }，但这就脱离了原型链

class 不能直接当普通函数调用，而 function 构造函数可以

class 声明创建的是“类构造器”，它内部有 [[IsClassConstructor]] 内部属性，导致直接调用 MyClass()（不带 new）必然抛 TypeError: Class constructor MyClass cannot be invoked without 'new'。传统 function 构造函数没有这层限制——你可以 MyConstructor() 当普通函数用，只是 this 会指向全局或 undefined（strict mode 下）。

实操建议：

• 如果你需要“兼容 new 和非 new 调用”的构造逻辑，必须用 function，并在内部判断 this instanceof MyConstructor
• class 的设计哲学就是强制面向对象契约，不提供这种灵活性；强行绕过（比如用 Reflect.construct()）属于反模式
• 注意 Babel 编译后的 class 代码仍保留该检查，不是语法糖层面的“可忽略”

static 方法与 prototype 方法的绑定时机不同

class 中的 static 方法在类定义时就被绑定到类本身（即 MyClass.staticMethod），而实例方法只在原型对象上定义（MyClass.prototype.instanceMethod）。传统 function 构造函数里，两者都得手动挂：静态方法挂到函数对象上，实例方法挂到 .prototype 上——但没人强制你这么做，容易混用。

关键差异在于：Babel 或 TypeScript 编译 class 时，static 方法不会被添加到原型链，也不会被 instanceof 或原型查找影响；而手写 MyConstructor.static = function(){} 是纯属性赋值，无语言级保障。

实操建议：

• 避免在 class 外部给类动态添加 static 属性（如 MyClass.extra = ...），这会破坏类型推导和 tree-shaking
• 想让子类继承父类 static 方法？ES2022 起支持 static 继承，但老环境需靠 Object.setPrototypeOf(Child, Parent) 补齐
• 不要在 static 方法里访问 this.prototype——这里的 this 指向类本身，不是实例

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