Var vs Let：大混淆解析！

Source: Dev.to

这是对 “Let” 与 “Var” 概念的清晰阐述。

Let

你可能听说过 let 是块级作用域的。下面看看它在循环、函数和闭包中的具体表现。

循环示例（每次迭代新变量）

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// Output: 0, 1, 2

函数示例（块级遮蔽）

function test() {
  let x = 10; // 外层 x

  if (true) {
    let x = 20; // 新的 x（遮蔽外层 x）
    console.log(x); // 20
  }

  console.log(x); // 10（外层 x 未改变）
}

let 变量 在其块结束后不能被外部作用域访问。

闭包示例（每个块相互独立）

function createClosures() {
  const closures = [];

  for (let i = 0; i < 3; i++) {
    closures[i] = () => console.log(i); // 每个 i 拥有自己的闭包
  }

  closures[0](); // 0
  closures[1](); // 1
  closures[2](); // 2
}

闭包 是记住外层函数作用域变量的函数。

Var

var 最让人困惑的地方在于它在循环中的行为。

循环示例

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// Output: 3, 3, 3

逐步说明：

1. 第一次迭代：var i = 0 → 创建了一个变量。
2. 第二次迭代：i = 1 → 同一个变量，值被修改。
3. 第三次迭代：i = 2 → 同一个变量，值被修改。
4. 循环结束：i = 3 → 最终值。

所有三个 setTimeout 在循环结束后才执行，所以 console.log(i) 打印 3。

函数作用域示例

function test() {
  if (true) {
    var x = 10; // 函数作用域，而非块级作用域
  }
  console.log(x); // 10 – 在函数内部任何位置都可访问
}

Var vs Let – 真正的区别

简要结论

• var = 一个变量，值会被改变。
• let = 每个块都会生成一个新变量。

有帮助的视频演示：https://www.youtube.com/watch?v=1mgLWu69ijU