17370845950

class 是构造函数的语法糖，本质基于原型链和 new 调用；两者行为等价但 class 不可枚举、不提升、强制 new 调用；继承推荐 class，简单工厂用构造函数更灵活；兼容性和维护性比语法选择更重要。

JavaScript 的 class 和构造函数本质是同一套机制的两种写法，class 是语法糖，底层仍基于原型链和 new 调用构造函数。该用哪个，取决于你是否需要继承、是否在写模块化代码、以及目标环境是否支持。

class 是构造函数的语法糖，不是新机制

class 编译后（或在引擎内部）仍会生成一个可被 new 调用的函数对象，它依然依赖 prototype，依然受 instanceof 和原型链查找规则约束。

以下两者行为完全等价：

class Person {
  constructor(name) {
    this.name = name;
  }
  say() {
    return `Hi, ${this.name}`;
  }
}

等价于：

function Person(name) {
  th
is.name = name;
}
Person.prototype.say = function() {
  return `Hi, ${this.name}`;
};

• class 内部方法默认不可枚举（Object.keys(Person.prototype) 拿不到 say），而手动挂到 prototype 上的方法是可枚举的（除非显式设 enumerable: false）
• class 声明不会被提升（ReferenceError），而函数声明会被提升
• class 构造器必须用 new 调用，否则报 TypeError；普通构造函数若忘记 new，通常静默创建全局属性（容易出 bug）

继承场景下 class 更安全、更清晰

用 extends + super() 写子类，比手动操作 Object.setPrototypeOf 或 Sub.prototype = Object.create(Super.prototype) 更可靠，也更易读。

• class 自动绑定 super() 调用父类构造器，且强制要求子类构造器中调用（否则报错），避免遗漏初始化
• 手动实现继承时，容易漏掉 constructor 中对 this 的赋值，或误写 Sub.prototype.constructor = Sub，导致 instanceof 失效
• Babel/TypeScript 编译 class 继承时会注入辅助函数（如 _inherits），兼容性更好；而手写继承逻辑容易在 IE 或老 Node 版本中出问题

不涉及继承时，构造函数更轻量、更灵活

如果只是封装一个简单工厂，不需要子类扩展，也不需要静态方法或私有字段，直接用函数更直接。

• 构造函数可以动态返回任意对象（甚至非 this），class 构造器只能返回 this 或显式返回对象，但不能返回原始值（否则忽略）
• 构造函数可轻松配合 Object.assign 或展开运算符做浅拷贝初始化：function Point(x, y) { Object.assign(this, {x, y}); }
• 某些工具函数（如单例包装、依赖注入 wrapper）用普通函数 + 闭包更自然，没必要套 class

兼容性和构建链决定实际选择

如果你的项目需支持 IE11 或 Node.js class（除非经 Babel 转译）。但即使转译，也要注意：

• Babel 默认把 class 编译为 ES5 函数 + Object.defineProperty，但某些老运行时（如微信 JS SDK 2.0 内核）不支持 defineProperty 的某些参数，可能触发静默失败
• TypeScript 的 private / #field 私有字段，在编译为 ES2015+ 时才真正生效；降级到 ES5 时，#field 会退化为普通属性名（仅靠命名约定），失去运行时保护
• 使用 class 后，V8 引擎能更好识别“类形状”，有利于优化对象内联缓存（IC），但前提是类结构稳定——频繁增删属性反而影响性能

真正关键的不是语法选型，而是是否统一了实例初始化逻辑、是否控制了原型污染、以及是否让继承关系可维护。很多 bug 来自混用：比如用 class 定义父类，却用函数方式手动改子类 prototype，结果 super 失效或 method 查找断裂。