JavaScript中let和var的作用域有什么区别

在JavaScript中，let与var最本质的区别在于它们的作用域边界与变量生命周期：var声明的变量遵循函数作用域或全局作用域，存在声明提升且会自动初始化为undefined，在全局作用域下还会挂载到顶层对象；而ES6引入的let遵循严格的块级作用域（以大括号{}为界），存在暂存死区（TDZ），在声明语句执行前禁止任何形式的访问，且不允许在同一作用域内重复声明。理解两者的差异，是编写无意外副作用、可预测代码的基本前提。

一、核心边界：函数作用域与块级作用域的差别

在ES6之前，JavaScript只有两种作用域：全局作用域和函数作用域。使用var声明的变量，其可见范围完全由包裹它的函数决定；如果在控制流语句（例如if判断、for循环、while语句或普通的独立代码块）中使用var，该变量会直接穿透这些花括号，泄漏到外层的函数作用域或全局作用域中。

let引入了块级作用域。任何被成对的大括号{}包裹的区域（包括语句块与裸代码块），都会为let建立一个独立的作用域环境。在块外试图访问块内用let声明的变量，解释器会立即抛出ReferenceError。

function testScope() {
  if (true) {
    var countVar = 10;
    let countLet = 20;
  }
  console.log(countVar); // 正常输出 10，var 突破了 if 的大括号边界
  console.log(countLet); // 抛出 ReferenceError: countLet is not defined
}
testScope();

二、变量生命周期：声明提升与暂存死区（TDZ）

在执行任何JavaScript代码之前，引擎会先对其进行词法解析并创建执行上下文。在这个阶段，var与let的处理流程有根本区别。

对于var声明的变量，引擎在编译阶段会将其“提升”（Hoisting）到所在作用域的顶部，并赋予初始值undefined。这意味着，在代码执行到声明语句之前读取该变量，不会报错，而是得到undefined。这种特性经常掩盖拼写错误或逻辑漏洞。

对于let声明的变量，其标识符虽然在进入作用域时同样会被感知并创建，但引擎明确规定：在该变量的显式声明语句执行完毕之前，该变量处于“未初始化”（Uninitialized）状态。从进入作用域到变量声明语句执行完成之间的这片区域，被称为“暂存死区”（Temporal Dead Zone，简称 TDZ）。在TDZ内读取或赋值该变量，会立即触发运行时错误。

console.log(scoreVar); // 输出 undefined，var 变量提升并初始化为 undefined
var scoreVar = 95;

console.log(scoreLet); // 抛出 ReferenceError: Cannot access 'scoreLet' before initialization
let scoreLet = 95;      // TDZ 在这一行执行完成后解除

三、经典场景剖析：for 循环与异步回调绑定

在涉及异步执行（例如 setTimeout 或 DOM 事件绑定）的 for 循环中，var 与 let 的行为表现差异最为直观。

当使用 var i = 0 时，由于 var 不具备块级作用域，循环体并没有为其创建独立的作用域，整个循环共享同一个处于函数作用域或全局作用域的变量 i。当异步定时器回调执行时，同步循环早已结束，此时 i 的值已自增至最终值，导致所有回调打印出来的都是同一个数字。

当使用 let i = 0 时，JavaScript 引擎在每次迭代中都会单独创建一个新的词法作用域，并使用当前迭代的计算结果对新作用域中的 i 进行独立绑定。因此，每个定时器闭包所捕获的都是属于当前轮次专属的独立变量副本。

// 使用 var：共享同一变量
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log("var i:", i), 10);
}
// 最终连续输出 3 次: var i: 3

// 使用 let：每次迭代生成独立绑定
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log("let j:", j), 10);
}
// 依次准确输出: let j: 0, let j: 1, let j: 2

四、顶层对象挂载与重复声明规则

除了作用域边界与执行顺序，var 与 let 在顶层上下文行为及语法校验上也有重要区别：

1. 全局对象属性挂载

在浏览器环境的全局作用域下，使用 var 声明的变量不仅是全局变量，还会被自动挂载为全局对象 window 的属性。这意味着 var globalVar = 1 可以通过 window.globalVar 读取，极易无意污染或覆盖全局原生属性。

与之相反，在全局作用域下使用 let 声明的变量，保存在全局词法环境记录（Declarative Environment Record）中，不会挂载到 window 上。window.globalLet 将始终返回 undefined。

2. 重复声明校验

var 宽容地允许在同一个作用域内反复声明同名变量，后声明的语句仅相当于二次赋值，容易导致意外覆盖已有逻辑：

var currentStatus = "idle";
var currentStatus = "running"; // 合法，静默覆盖，无任何警告

let 具有严格的语法校验。在同一个作用域内部，任何对同名标识符的重复声明（无论之前是由 var、let 还是 const 声明），都会在编译解析阶段直接抛出 SyntaxError: Identifier 'currentStatus' has already been declared，彻底杜绝意外覆盖。

五、总结与工程选型建议

通过对作用域、生命周期、执行机制和全局属性的全面比对，两者的差异可以清晰总结为下表及决策体系：