目前，let 和 const 關(guān)鍵字已經(jīng)取代了傳統(tǒng)的 var，帶來(lái)了更合理的作用域規(guī)則和更嚴(yán)格的使用限制。然而，即使是有經(jīng)驗(yàn)的開(kāi)發(fā)者，也會(huì)忽略一些微妙的細(xì)節(jié)。

一、var 的問(wèn)題：為什么不要用它

在深入了解 let 和 const 之前，有必要先理解為什么我們不要用 var：

• 函數(shù)作用域而非塊級(jí)作用域

if (true) {
  var x = 10;
}
console.log(x); // 10，變量 x 泄露到外部作用域

• 變量提升（Hoisting）帶來(lái)的困惑

console.log(x); // undefined，而非報(bào)錯(cuò)
var x = 5;

• 允許重復(fù)聲明

var user = "張三";
var user = "李四"; // 不報(bào)錯(cuò)，靜默覆蓋

• 全局聲明成為全局對(duì)象的屬性

var global = "我是全局變量";
console.log(window.global); // "我是全局變量"（瀏覽器環(huán)境）

這些特性導(dǎo)致了許多難以追蹤的 bug，尤其在大型應(yīng)用程序中。

二、let 的核心特性：被忽略的細(xì)節(jié)

1. 暫時(shí)性死區(qū)（Temporal Dead Zone）

這可能是 let 最容易被忽略的特性：

console.log(x); // ReferenceError: x is not defined
let x = 5;

與 var 不同，let 聲明的變量存在"暫時(shí)性死區(qū)"（TDZ）。從塊作用域開(kāi)始到變量聲明之前，該變量都是不可訪問(wèn)的。這并非簡(jiǎn)單的"不提升"，而是一種更精細(xì)的機(jī)制。

let x = 10;
function example() {
  // 從這里開(kāi)始，x 進(jìn)入 TDZ
  console.log(x); // ReferenceError
  
  let x = 20; // 這里 x 離開(kāi) TDZ
}

被忽略的細(xì)節(jié)：即使外部作用域已有同名變量，內(nèi)部作用域的暫時(shí)性死區(qū)仍然會(huì)阻止訪問(wèn)。

2. 真正的塊級(jí)作用域

let 聲明的變量嚴(yán)格遵循塊級(jí)作用域規(guī)則，這點(diǎn)經(jīng)常被低估：

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 輸出：0, 1, 2

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 輸出：3, 3, 3

被忽略的細(xì)節(jié)：每次循環(huán)迭代，let 聲明都會(huì)創(chuàng)建一個(gè)新的變量實(shí)例，這在處理閉包時(shí)尤為重要。

3. 不污染全局對(duì)象

雖然知道 let 不會(huì)成為全局對(duì)象的屬性，但有一個(gè)細(xì)節(jié)常被忽略：

被忽略的細(xì)節(jié)：全局 let 變量存儲(chǔ)在稱為"腳本作用域"的特殊環(huán)境中，而非全局對(duì)象上。

三、const 的核心特性：被誤解的不變性

1. 對(duì)象和數(shù)組的可變性

許多開(kāi)發(fā)者誤以為 const 聲明的對(duì)象或數(shù)組是完全不可變的：

被忽略的細(xì)節(jié)：const 只保證引用不變，而非內(nèi)容不變。要?jiǎng)?chuàng)建不可變對(duì)象，需要使用 Object.freeze()：

但要注意，Object.freeze() 只是淺凍結(jié)：

深度凍結(jié)需要遞歸應(yīng)用 Object.freeze()。

2. 聲明時(shí)必須初始化

這似乎是顯而易見(jiàn)的，但容易被忽略的是初始化的時(shí)機(jī)：

被忽略的細(xì)節(jié)：const 聲明的變量不能被賦予新值，但這并不意味著它的內(nèi)容不可變。

3. 性能考慮

一個(gè)常被忽略的事實(shí)是，在某些 JavaScript 引擎中，const 聲明可能會(huì)有輕微的性能優(yōu)勢(shì)：

引擎可以確保這些值永遠(yuǎn)不會(huì)改變，從而可能進(jìn)行常量折疊等優(yōu)化。

四、實(shí)用的使用模式和最佳實(shí)踐

1. 默認(rèn)使用 const，必要時(shí)退回到 let

這種方式可以最大限度減少代碼中的變量重新賦值，提高可讀性和可維護(hù)性。

2. 解構(gòu)賦值中的 let 和 const

被忽略的細(xì)節(jié)：函數(shù)參數(shù)解構(gòu)本質(zhì)上是 const 聲明，不能重新賦值。

3. 循環(huán)中的 let vs const

被忽略的細(xì)節(jié)：for-of 和 for-in 循環(huán)中使用 const 是合法的，因?yàn)槊看蔚紩?huì)創(chuàng)建新的綁定。

五、深入理解：let、const 的內(nèi)部工作機(jī)制

理解 JavaScript 引擎如何處理這些聲明，有助于避免常見(jiàn)陷阱：

// 簡(jiǎn)化的內(nèi)部處理流程
function example() {
  // 1. 創(chuàng)建詞法環(huán)境
  // 2. 對(duì) let/const 聲明進(jìn)行"未初始化"標(biāo)記（TDZ 開(kāi)始）
  
  // console.log(x); // 如果取消注釋，會(huì)報(bào)錯(cuò)：x 在 TDZ 中
  
  let x = 10; // x 從 TDZ 中解除，并賦值為 10
  
  if (true) {
    // 創(chuàng)建新的塊級(jí)詞法環(huán)境
    const y = 20;
    x = 30; // 可以訪問(wèn)外部 x
    // y 僅在此塊中可用
  }
  
  // console.log(y); // 如果取消注釋，會(huì)報(bào)錯(cuò)：y 不在此作用域
}

詞法環(huán)境（Lexical Environment）和變量環(huán)境（Variable Environment）的區(qū)別是 JavaScript 引擎如何區(qū)分處理不同類型的聲明。