当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript类与构造函数有什么不同

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

2026-01-30 16:27:41 0浏览收藏

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

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

JavaScript类如何定义_与传统构造函数有何区别【教程】

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 指向类本身，不是实例