JavaScript 变量提升陷阱：为什么你的`let`没声明就能用？

引言：一个令人困惑的错误

在调试 JavaScript 时，你是否遇到过类似报错：Uncaught ReferenceError: Cannot access 'x' before initialization？明明上一行还引用了变量，下一行却报错未初始化。这背后的“元凶”就是 JavaScript 的**变量提升（Hoisting）**机制。理解它不仅能解决这类报错，更能写出更健壮的代码。

正文：揭开变量提升的面纱

变量提升是 JavaScript 引擎在执行代码前的准备工作：将变量和函数的声明（不包括赋值）移动到当前作用域的顶部。

1. `var` 的经典提升行为

console.log(myVar); // 输出: undefined (而不是报错！)
var myVar = 10;
console.log(myVar); // 输出: 10

引擎实际上是这样处理的：

声明提升：var myVar; 被提升到作用域顶部。
赋值在原地：myVar = 10; 留在原地。

所以第一个`console.log`访问的是已声明但未赋值的`myVar`（值为`undefined`）。

2. `let` 与 `const`：暂时性死区（TDZ）

ES6 引入了`let`和`const`，它们也存在提升，但行为不同：

console.log(myLet); // 🔴 报错: Cannot access 'myLet' before initialization
let myLet = 20;

声明提升：`let myLet;`被提升到块级作用域顶部。
暂时性死区（TDZ）：从作用域开始到变量声明语句执行之前，该变量都处于不可访问状态。访问它会触发`ReferenceError`。

这迫使开发者养成“先声明后使用”的好习惯，避免了`var`的`undefined`陷阱。

3. 函数提升：声明优先

函数声明也会被提升（整个函数体一起提升）：

sayHello(); // 输出: "Hello!" (正常运行)
function sayHello() {
  console.log("Hello!");
}

但函数表达式（赋值给变量）则遵循变量提升的规则（`var`得`undefined`，`let/const`进 TDZ）。

实际开发案例与规避技巧

案例1：循环中的闭包陷阱（经典面试题）

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 输出5个5！
  }, 100);
}

问题根源：由于`var`没有块级作用域且提升，循环结束后`i`的值是5，所有`setTimeout`回调共享同一个`i`。

解决方案：

使用 `let`：`let`为每次循环创建新的块级作用域。
```
for (let j = 0; j < 5; j++) { ... } // 输出 0,1,2,3,4
```

IIFE 创建作用域 (旧方法)：

for (var k = 0; k < 5; k++) {
  (function(m) {
    setTimeout(function() { console.log(m); }, 100);
  })(k);
}

案例2：避免重复声明

let userId = 'A123';
// ... 很多行代码后 ...
var userId = 'B456'; // 🔴 在同一个作用域内，`var` 可能无意中重复声明 `let` 变量 (严格模式下报错)

规避技巧：

统一使用 `let`/`const`：避免混用`var`。
启用严格模式 `'use strict';`：严格模式下在同一作用域重复声明变量会报错。
使用 Linter (如 ESLint)：配置规则(`no-redeclare`, `no-var`)强制检查。

最新实践：拥抱块级作用域

现代 JavaScript 开发强烈推荐：

默认使用 `const`：声明不会被重新赋值的变量。
需要重新赋值时用 `let`。
避免使用 `var`：除非有非常特殊的兼容性需求。

这样可以充分利用块级作用域的优势，有效规避变量提升带来的意外行为和污染全局作用域的风险。

结论：知其然，更要知其所以然

理解 JavaScript 的变量提升机制（尤其是`let`/`const`的 TDZ）是避免“变量未定义”类错误的关键。通过：

始终先声明后使用变量。
优先使用 `let` 和 `const`。
利用块级作用域管理变量生命周期。
在循环和异步回调中警惕共享作用域问题。

你能显著提高代码的清晰度和健壮性。下次再遇到 `Cannot access before initialization`，你就能一眼看穿问题所在，快速修复！