詳細介紹JS中“暫時性死區”的概念

只要塊級作用域內存在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]

另外，下面的代碼也會報錯，與var的行為不同。

// 不報錯
var x = x;

// 報錯
let x = x;
// ReferenceError: x is not defined

上面代碼報錯，也是因為暫時性死區。使用let聲明變量時，只要變量在還沒有聲明完成前使用，就會報錯。上面這行就屬于這個情況，在變量x的聲明語句還沒有執行完成前，就去取x的值，導致報錯”x 未定義“。

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

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com