JavaScript 作用域问题：var、let、const 变量作用域

JavaScript 的变量定义方式决定了代码在何处能够访问这些数据。理解 var、let 和 const 的作用域差异，是避免“变量未定义”或“意外覆盖”等常见 Bug 的关键。

1. 理解 var 的函数作用域

var 声明的变量作用域仅限于当前的函数内部。如果在函数外部声明，它就会变成全局变量。这通常被称为“函数作用域”。

运行以下代码，观察 var 的行为：

function testVar() {
  if (true) {
    var x = 10;
  }
  // 即使在 if 块外部，依然可以访问 x
  console.log("访问 if 块外的 x:", x); 
}

testVar();
// 在函数外部无法访问 x
// console.log(x); // 报错: x is not defined

注意变量提升现象。var 声明的变量会被“提升”到函数或全局作用域的顶部，但赋值操作保留在原地。其逻辑公式如下：

$$var \ a = 1 \equiv var \ a; \quad a = 1;$$

分析以下代码的输出结果：

console.log("提升的值:", hoistedVar); // 输出 undefined，而非报错
var hoistedVar = 100;
console.log("赋值后的值:", hoistedVar); // 输出 100

这表示在代码执行前，JavaScript 引擎已经知晓 hoistedVar 的存在，只是尚未赋值。

2. 掌握 let 与 const 的块级作用域

let 和 const 引入了块级作用域。这意味着变量只在所在的 {} 代码块（如 if、for、while）内有效。一旦离开这个代码块，变量立即销毁。

对比 var 和 let 的区别：

function testBlockScope() {
  if (true) {
    var aVar = "我是 var";
    let aLet = "我是 let";
  }

  console.log(aVar); // 输出: "我是 var"
  // console.log(aLet); // 报错: aLet is not defined
}

testBlockScope();

区分 let 与 const 的用法：

查看以下代码中的错误示例：

// let 的用法
let score = 80;
score = 90; // 合法：重新赋值

// const 的用法
const PI = 3.14;
PI = 3.14159; // 报错: Assignment to constant variable

// const 声明对象
const user = { name: "Alice" };
user.name = "Bob"; // 合法：对象的内容可以修改
// user = {}; // 报错：不能修改对象本身的引用

3. 体验暂时性死区 (TDZ)

let 和 const 声明的变量不会像 var 那样被提升到顶部。从代码块开始到变量声明语句之间的这段区域，被称为“暂时性死区”（Temporal Dead Zone）。在此区域访问变量会直接报错。

验证 TDZ 的存在：

{
  // TDZ 开始
  // console.log(tdzVar); // 报错: Cannot access 'tdzVar' before initialization
  // TDZ 结束

  let tdzVar = "现在可以用了";
  console.log(tdzVar); // 正常输出
}

严格遵守规则：禁止在声明 let 或 const 变量之前访问它。

4. 解决循环中的闭包问题

这是作用域问题中最经典的一个案例。当我们在循环中使用 var 来定义计数器，并在异步回调（如 setTimeout）中使用它时，往往会得到错误的结果。

运行有问题的 var 版本：

for (var i = 1; i <= 3; i++) {
  setTimeout(function() {
    console.log("var 循环输出:", i);
  }, 100);
}
// 输出结果：
// var 循环输出: 4
// var 循环输出: 4
// var 循环输出: 4

原因是 var i 是函数作用域（此处为全局），循环结束时 i 变成了 4，所有回调函数都引用这同一个 i。

修复该问题，改用 let：

for (let j = 1; j <= 3; j++) {
  setTimeout(function() {
    console.log("let 循环输出:", j);
  }, 100);
}
// 输出结果：
// let 循环输出: 1
// let 循环输出: 2
// let 循环输出: 3

let 具有块级作用域，每一次循环都会创建一个新的 j 变量绑定，闭包捕获的是各自块内的 j，从而输出正确结果。

5. 最佳实践总结

在编写现代 JavaScript 代码时，请遵循以下操作步骤：

1. 默认使用 const。当你确定一个变量引用不会被重新赋值时，优先使用它，这能防止意外的修改。
2. 按需使用 let。仅当你需要改变变量的值（如循环计数器、累加器）时，才使用 let。
3. 避免使用 var。除非是为了维护极古老的遗留代码，否则在新的开发中完全不要使用 var，以消除作用域混乱和变量提升带来的隐患。