ES6 Class中的constructor与传统JS构造函数有何不同

一、语法形态与定义方式的直观对照

在 ES6 之前，JavaScript 没有类概念，对象的实例化与初始化完全依托普通函数（Function）挂载原型属性来完成。ES6 则通过专用的 class 关键字将构造逻辑约束进专门的 constructor 代码块内：

// 传统构造函数方式 (ES5)
function TraditionalUser(name, role) {
  this.name = name;
  this.role = role;
}
TraditionalUser.prototype.getRole = function() {
  return this.role;
};

// ES6 类声明方式
class ModernUser {
  constructor(name, role) {
    this.name = name;
    this.role = role;
  }
  getRole() {
    return this.role;
  }
}

表面上看，两者的实例行为十分相似：通过 new TraditionalUser('Alice', 'Admin') 和 new ModernUser('Alice', 'Admin') 都能得到带有相同属性和原型链方法的对象。然而，一旦涉及非规范调用或复杂继承场景，两者的底层行为就会产生根本分歧。

二、调用限制与内部方法（[[Call]] 与 [[Construct]]）

传统构造函数在底层本质上就是普通的 JavaScript 函数对象，这意味着它同时具备 ECMAScript 内部方法 [[Call]] 和 [[Construct]]。当开发者忘记书写 new 操作符直接执行 TraditionalUser('Alice', 'Admin') 时，引擎会将其作为普通函数执行：

// 传统函数直接调用示例
var res = TraditionalUser('Bob', 'Guest');
console.log(res); // 示例输出：undefined
console.log(window.name); // 示例输出："Bob"（在非严格模式浏览器环境中，this 指向全局对象导致变量泄露）

为了防止这种疏漏，过去开发者往往必须在函数内部手动编写守卫逻辑，如 if (!(this instanceof TraditionalUser)) return new TraditionalUser(...)。

而 ES6 的 class 内部的 constructor 在规范中被明确标记为仅供构造使用。类构造器只实现了 [[Construct]] 内部槽，不提供可调用的 [[Call]] 入口。只要省略 new 操作符直接调用类，引擎会立即阻断并抛出类型错误（TypeError）：

// 类构造器直接调用示例
try {
  ModernUser('Bob', 'Guest');
} catch (err) {
  console.log(err.message); 
  // 示例输出：Class constructor ModernUser cannot be invoked without 'new'
}

三、继承机制中实例与 this 的构建次序逆转

这是 constructor 与传统构造函数之间最具技术深度、也最关键的差异。在传统的继承模式（例如寄生组合式继承）中，实例构建是“自底向上”的；而在 ES6 类继承中，构建过程变成了“自顶向下”。

1. 传统继承的构建顺序

当执行 new Child(...) 时，JavaScript 引擎首先为 Child 分配一个空的实例对象并将其绑定给 this。接着，在子构造函数体内通过 Parent.call(this, ...) 借用父类构造函数，将父类的属性依次修饰到已经存在的 this 对象上。

2. ES6 类继承中的 super() 与 TDZ

在 ES6 中，派生类的 constructor 内部在调用 super() 之前，this 对象根本尚未创建，处于暂时性死区（Temporal Dead Zone, TDZ）中。如果在 super() 之前试图读取或操作 this，引擎会直接抛出 ReferenceError：

class Parent {
  constructor(name) {
    this.name = name;
  }
}

class Child extends Parent {
  constructor(name, score) {
    // 错误示范：在 super() 之前访问 this
    // console.log(this.name); // 抛出 ReferenceError: Must call super constructor in derived class before accessing 'this'
    super(name); // 正确做法：由基类分配实例并回传绑定
    this.score = score;
  }
}

四、原型方法的可枚举性与属性描述符

在传统构造函数中，我们将方法挂载到 prototype 对象上时，使用的是常规的属性赋值操作：

TraditionalUser.prototype.sayHello = function() { return "hello"; };
var desc = Object.getOwnPropertyDescriptor(TraditionalUser.prototype, 'sayHello');
console.log(desc.enumerable); // 示例输出：true

赋值语句创建的方法默认其属性描述符的 enumerable 值为 true。这带来了一个常见的副作用：当对实例使用 for...in 循环遍历属性时，原型上的这些自定义方法也会被遍历出来，迫使开发者必须在循环体内包裹一层 hasOwnProperty 进行防护。

而在 ES6 的 class 体内声明的所有方法（包括构造函数内部隐式挂载的原型方法），其底层均被默认配置为 enumerable: false：

var classDesc = Object.getOwnPropertyDescriptor(ModernUser.prototype, 'getRole');
console.log(classDesc.enumerable); // 示例输出：false

var user = new ModernUser('Alice', 'Admin');
console.log(Object.keys(ModernUser.prototype)); // 示例输出：[]（保持极度干净）

五、执行环境、变量提升与原型链连接

除了调用与继承外，两者在运行环境与语言基础设施上还有以下关键不同：

• 强制严格模式（Strict Mode）： 传统构造函数默认运行在松散模式（Sloppy Mode）下，除非在文件或函数顶部显式添加 "use strict"。而 ES6 class 的整个主体（包括 constructor、静态方法和实例方法）在语言规范中被永久锁定在严格模式下，即使整个脚本未启用严格模式也是如此。
• 声明提升（Hoisting）与暂时性死区： 传统的 function 声明具有完整的提升特性，即使在定义语句之前实例化 new TraditionalUser() 也能正常运行。而 class 声明的行为类似于 let 和 const，虽然变量名会被登记，但在执行到达声明语句之前访问会处于暂时性死区，抛出 ReferenceError。
• 静态方法的原型链继承： 在传统继承中，Child.__proto__ 默认指向 Function.prototype，父构造函数上的静态方法不会自动传递给子构造函数，除非手动调用 Object.setPrototypeOf(Child, Parent)。而在 ES6 中，class Child extends Parent 会直接建立构造函数之间的原型链：Child.__proto__ === Parent，使得父类的静态方法和属性自然被子类继承。

六、全景对比与工程选型建议

通过以上分析可以看出，ES6 class 中的 constructor 绝不仅是传统构造函数的书写简写，它修正了早期 JavaScript 构造函数的诸多设计妥协与潜在缺陷。