暂时性死区TDZ理解与总结

暂时性死区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 = ;

  console.log(tmp); //

}

　　上面代码中，在let命令声明变量tmp之前，都属于变量tmp的“死区”。

“暂时性死区”也意味着typeof不再是一个百分之百安全的 *** 作。

typeof x; // ReferenceError

let x;

　　上面代码中，变量x使用let命令声明，所以在声明之前，都属于x的“死区”，只要用到该变量就会报错。

因此，typeof运行时就会抛出一个ReferenceError。

大家应该养成良好的编程习惯，变量一定要在声明之后使用，否则就报错。

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

function bar(x = y, y = ) {

  return [x, y];

}

bar(); // 报错

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

如果y的默认值是x，就不会报错，因为此时x已经声明了。

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

这样的错误在ES5是很常见的，现在有了这种规定，避免此类错误就很容易了。

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

　　我们再来看一个问题

function bar() {

    var x = y

    y =

    return [x, y];

}

bar()   // y未定义

function bar() {

    var x =

    y =

    return [x, y];

}

bar()

window.y  //

　　至于上面的y未定义的错，也是一个死区。

千万不要以为下面隐式声明的一个全局变量就以为y会变量提升，不是这样的。

只有var声明的才会提升，隐式的全局变量是不会提升的，这样就会存在死区。