詳細介紹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 是很常見的，現在有了這種規定，避免這類錯誤就很容易了。

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

相關推薦：

JS預解析是什麼?

#js字串indexof與search使用時有什麼差別

以上是詳細介紹JS中「暫時性死區」的概念的詳細內容。更多資訊請關注PHP中文網其他相關文章！