ES6之Temporal Dead Zone

在使用ES6时，一般都是推荐使用let, const来定义变量，相对var而言：

Hoisting Scope Creates global properties
var Declaration Function Yes
let Temporal dead zone Block No
const Temporal dead zone Block No

Temporal dead zone这个与var的Declaration有什么不一样的地方？

先看一个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// var定义的变量提升
console.log(tmpVar); // undefined
if (true) {
    var tmpVar = 12; // var定义的变量不是块级作用域
}
console.log(tmpVar); // 12

// let定义的变量提升
let tmp = true;
if (true) { // 新的作用域 TDZ 开始
    console.log(tmp);  // ReferenceError

    let tmp; // TDZ 结束, `tmp` 被初始化为 undefined
    console.log(tmp); // undefined

    tmp = 123;
    console.log(tmp); // 123
}
console.log(tmp); // true

可以查看其实TDZ类似于一个视觉的盲区，在作用域中应该意识到变量的存在，但却看不见，更用不了。

之所以需要TDZ：

  1. 捕获错误： 变量提升本就比较奇怪，也不太符合变量需要定义才能使用的逻辑。
  2. const语义要求： const定义一个不可以变更的常量，只能在定义时赋值，如果存在变量提升和语义不符合。为了保持一致，所以let也有TDZ。

相关资料

  1. 9.4 The temporal dead zone