为什么 ES6 或 TypeScript 中的 Class 不会自动提升？

Question

在 JavaScript（包括 ES6）和 TypeScript 中， class 不会像函数声明那样进行“提升”（hoisting）。函数声明会在编译阶段被提升到作用域的顶部，因此在声明之前就可以调用。然而， class 声明则不会如此。这种设计背后有几个关键原因：

1. 暴露顺序问题

JavaScript 函数声明被提升时，它们的定义会在作用域的顶部变得可见。这意味着你可以在声明之前调用它们，这在大多数情况下是安全的。

然而， class 是复杂的结构，包含构造函数、方法以及静态成员。如果 class 声明也被提升，这意味着你可以在类声明之前创建类的实例或调用类的方法，这可能会导致未定义行为，因为类的定义可能尚未完全解析。

2. Class 的本质

class 实际上是语法糖，它包装了 JavaScript 中已有的原型链机制。因此， class 是在运行时被解释的，而不是在编译时处理的。如果类声明被提升，类定义的整个语法结构就必须提前加载，这会改变 JavaScript 的加载方式和执行顺序。

3. Temporal Dead Zone（TDZ）

在 ES6 中，引入了“Temporal Dead Zone”概念，这意味着在 let 和 const 声明的变量或 class 声明的类，在初始化之前不能访问。这是为了避免潜在的错误和未初始化变量的使用。由于 class 在未初始化之前不能使用，因此不能像函数一样被提升。

示例对比

// 函数声明被提升
console.log(foo()); // 输出: "Hello, world!"
function foo() {
  return "Hello, world!";
}

// Class 声明不被提升
const instance = new MyClass(); // 抛出 ReferenceError: Cannot access 'MyClass' before initialization
class MyClass {
  constructor() {
    this.name = 'MyClass';
  }
}

在这个例子中，函数 foo 可以在定义之前被调用，因为它被提升到了作用域顶部。而 MyClass 则不会被提升，因此在声明之前尝试实例化会导致错误。

总结

class 不会被提升的主要原因是其复杂的定义结构和 Temporal Dead Zone 机制，确保了在未定义类之前不会使用它，从而减少了潜在的错误。

因为当 class 使用 extends 关键字实现继承的时候，我们不能确保所继承父类是有效的，那么就可能导致一些无法预知的行为。详细的内容可以参考 - Angular 2 Forward Reference 这篇文章。