17370845950

JavaScript 中的类是 ES6 引入的语法糖，本质仍基于原型的构造函数机制；它不改变底层逻辑，仅提升面向对象写法的清晰性与一致性，编译后等价于带原型方法的构造函数。

JavaScript 中的 类（class） 是 ES6 引入的语法糖，本质仍是基于原型的构造函数机制；它本身不改变底层运行逻辑，只是让面向对象写法更清晰、更接近其他语言习惯。

类的定义方式

使用 class 关键字声明，内部用 constructor 定义初始化逻辑，方法直接写在类体中（无需 function 关键字）：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

• 类声明不会被提升（与函数声明不同），必须先定义后使用
• 类内部方法默认不可枚举（Object.keys(Person.prototype) 不会返回 sayHello）
• 类体中只能写方法、getter/setter、静态方法（static），不能写普通属性赋值（如 gender = 'male' 需用字段提案或在 constructor 中设置）

与传统构造函数的核心区别

类和构造函数最终都生成对象并绑定原型，但写法、限制和语义有明显差异：

• 语法约束更严格：类内部必须有 constructor（即使空着也会自动生成），且不能用 new 调用普通函数那样随意调用类（Person() 会报错，必须用 new Person()）
• 继承写法更直观：类用 extends + super() 实现继承；构造函数需手动操作 Parent.call(this) 和 Object.setPrototypeOf(Child.prototype, Parent.prototype)
• 静态方法与实例方法分离明确：类中用 static 声明静态方法，自动挂载到类本身；构造函数中需手动赋值，如 Person.create = function(){}
• 没有变量提升：类声明是块级作用域中的“暂时性死区”（TDZ），而函数声明会被提升

实际运行时并无新机制

把上面的 class Person 编译成 ES5 就会发现，它等价于一个带原型方法的构造函数：

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

浏览器和 Node.js 执行时，class 仍通过修改 prototype 和调用 new 来创建实例，没引入新对象模型。

什么时候该用类？

• 项目使用 ES6+ 环境，团队倾向清晰的 OOP 表达
• 需要多层继承、静态方法、getter/setter、私有字段（#field）等现代特性
• 配合 TypeScript 或构建工具（如 Babel）做类型/兼容性处理
• 避免手写原型链错误，让继承逻辑更可维护

如果只是简单工厂或单例，普通函数或对象字面量往往更轻量直接。