暂时性死区TDZ理解与总结

　　为什么会出现暂时性死区？

　　先来看看 ES6 标准中对 let/const 声明中的解释 第13章，有如下一段文字：The variables are created when their containing Lexical Environment is instantiated but may not be accessed inany way until the variable’s LexicalBinding is evaluated.

　　当然这段话我看完也很懵，查阅了一些帖子，翻译成人话就是：

　　当程序的控制流程在新的作用域（module function 或 block 作用域）进行实例化时，在此作用域中用let/const声明的变量会先在作用域中被创建出来，但因此时还未进行词法绑定，所以是不能被访问的，如果访问就会抛出错误。因此，在这运行流程进入作用域创建变量，到变量可以被访问之间的这一段时间，就称之为暂时死区。

　　如果你还是记不住，那么只需理解下面这句话即可：

　　ES6规定，let/const 命令会使区块形成封闭的作用域。若在声明之前使用变量，就会报错。总之，在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。这在语法上，称为 “暂时性死区”（ temporal dead zone，简称 TDZ）。

if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

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

　　上面代码中，在let命令声明变量tmp之前，都属于变量tmp的“死区”。“暂时性死区”也意味着typeof不再是一个百分之百安全的操作。

typeof x; // ReferenceError
let x;

　　上面代码中，变量x使用let命令声明，所以在声明之前，都属于x的“死区”，只要用到该变量就会报错。因此，typeof运行时就会抛出一个ReferenceError。大家应该养成良好的编程习惯，变量一定要在声明之后使用，否则就报错。

　　有些“死区”比较隐蔽，不太容易发现。

function bar(x = y, y = 2) {
  return [x, y];
}

bar(); // 报错

　　上面代码中，调用bar函数之所以报错，是因为参数x默认值等于另一个参数y，而此时y还没有声明，属于”死区“。如果y的默认值是x，就不会报错，因为此时x已经声明了。

　　ES6规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的错误在ES5是很常见的，现在有了这种规定，避免此类错误就很容易了。

　　总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

　　我们再来看一个问题

function bar() {
    var x = y
    y = 2
    return [x, y];
}

bar()   // y未定义

function bar() {
    var x = 2
    y = 2
    return [x, y];
}
bar()
window.y  // 2

　　至于上面的y未定义的错，也是一个死区。千万不要以为下面隐式声明的一个全局变量就以为y会变量提升，不是这样的。只有var声明的才会提升，隐式的全局变量是不会提升的，这样就会存在死区。