ES2015 ——let命令的暫時性死區

ES6新增了let命令，用來聲明變量。它的用法相似於var，可是所聲明的變量，只在let命令所在的代碼塊內有效。

和var不一樣的還有，let命令不存在變量提高，因此聲明前調用變量，都會報錯，這就涉及到一個概念——暫時性死區。

 

暫時性死區：

只要塊級做用域內存在let命令，它所聲明的變量就「綁定」（binding）這個區域，再也不受外部的影響。

var tmp = 123;

if (true) {
   tmp = 'abc'; // ReferenceError
   let tmp;
}

上面代碼中，存在全局變量tmp，可是塊級做用域內let又聲明瞭一個局部變量tmp，致使後者綁定這個塊級做用域，因此在let聲明變量前，對tmp賦值會報錯。

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。

做爲比較，若是一個變量根本沒有被聲明，使用typeof反而不會報錯。

typeof undeclared_variable // "undefined"

上面代碼中，undeclared_variable是一個不存在的變量名，結果返回「undefined」。因此，在沒有let以前，typeof運算符是百分之百安全的，永遠不會報錯。如今這一點不成立了。這樣的設計是爲了讓你們養成良好的編程習慣，變量必定要在聲明以後使用，不然就報錯。

有些「死區」比較隱蔽，不太容易發現。

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

bar(); // 報錯

上面代碼中，調用bar函數之因此報錯（某些實現可能不報錯），是由於參數x默認值等於另外一個參數y，而此時y尚未聲明，屬於」死區「。若是y的默認值是x，就不會報錯，由於此時x已經聲明瞭。

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

ES6規定暫時性死區和let、const語句不出現變量提高，主要是爲了減小運行時錯誤，防止在變量聲明前就使用這個變量，從而致使意料以外的行爲。這樣的錯誤在ES5是很常見的，如今有了這種規定，避免此類錯誤就很容易了。

總之，暫時性死區的本質就是，只要一進入當前做用域，所要使用的變量就已經存在了，可是不可獲取，只有等到聲明變量的那一行代碼出現，才能夠獲取和使用該變量。

 

其餘易錯點：

let b = 1;

function test4() {
    console.log(b);  //1
    let a = 2;
}
test4()


let b = 1;

function test4() {
    console.log(b);  //not defined
    let b = 2;
}
test4()

我猜測大概第二種狀況是由於變量就近原則和暫時性死區的綜合緣由。

 

 

 

參考資料：阮一峯的ES2015