为什么JavaScript中的变量提升容易引发问题_通过let与const理解块级作用域【教程】_技术教程

JavaScript中var声明会提升并初始化为undefined，而let/const仅提升声明、不初始化，访问时触发TDZ报错；var是函数作用域，let/const是块级作用域，for循环中let每次迭代创建新绑定，避免闭包陷阱。

JavaScript 中的变量提升（hoisting）本身不是问题，问题出在开发者误以为 var 声明的行为和 let/const 一样——而它们根本不同。

var 声明会提升声明和初始化，但值是 undefined

这是最常被误解的一点：var 只提升声明，不提升赋值；但因为在进入作用域时就被初始化为 undefined，所以不会报错，只会返回意外值。

console.log(a); // undefined
var a = 1;

看似“能用”，实则掩盖了逻辑顺序错误。真实场景中，这会导致：

函数内提前读取未赋值变量，得到 undefined 而非报错，调试困难
与条件块混用时行为反直觉，比如 if (false) { var x = 1; } 之后仍可访问 x
闭包中捕获到的是同一个变量绑定，循环里多个回调共享最终值

let/const 不提升声明，进入暂时性死区（TDZ）

let 和 const 声明确实会被“提升”，但不初始化；在声明语句执行前访问，会直接抛出 ReferenceError。

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 2;

这不是 bug，是设计来暴露时序错误的机制。关键差异在于：

let 允许后续重新赋值，const 要求必须初始化且不可再赋值（注意：对象属性仍可修改）
两者都绑定到块级作用域（{} 内），包括 if、for、try/catch 等，而 var 只有函数作用域
在 for (let i...) {} 中，每次迭代都会创建新绑定，避免经典闭包陷阱

for 循环中 var 与 let 的闭包表现完全不同

这是面试高频坑点，也是 TDZ 最具实感的体现。

// 使用 var：全部输出 3
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}

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

原因很直接：

var i 是函数作用域，整个循环共用一个 i，异步回调执行时循环早已结束，i 已变为 3
let i 每次迭代都生成独立绑定，每个回调捕获的是各自作用域下的 i

如果你试图在 let 声明前读取它（比如把 setTimeout 提到 for 外面并引用 i），就会立刻触发 TDZ 报错，而不是静默返回 undefined。

不要依赖提升，更不要混用 var/let/const 在同一作用域

现代代码应默认使用 const，仅当变量需要重赋值时才用 let，彻底

弃用 var。混用会放大理解成本：

var 和 let 同名声明在同一作用域会报错：Identifier 'x' has already been declared
但 var x; let x; 和 let x; var x; 错误位置不同，前者在 let 行报错，后者在 var 行——因为 var 声明被提升到了顶部，而 let 还没走到那一步
TSLint / ESLint 默认禁用 var，TypeScript 编译器也会在严格模式下拒绝混合声明