摘要本文系统讲解 JavaScript 变量提升机制、暂时性死区TDZ以及 ES6 块级作用域通过大量可运行案例清晰展示 var/let/const 在声明、提升、作用域上的差异总结日常开发中的常见陷阱与最佳实践帮助开发者从底层理解变量行为避免隐性 bug夯实前端基础。一、变量提升JavaScript 先 “扫描” 再执行在 JS 执行代码前引擎会先遍历当前作用域把变量声明和函数声明提升到作用域顶部这一机制称为变量提升Hoisting。关键点只提升声明不提升赋值函数声明整体提升可在定义前调用var 变量提升为undefined1. var 变量提升javascript运行console.log(name); // undefined var name 前端开发; // 引擎实际执行顺序 var name; console.log(name); name 前端开发;2. 函数声明提升javascript运行foo(); // 正常执行hello function foo() { console.log(hello); }3. 函数表达式不会提升javascript运行foo(); // TypeError: foo is not a function var foo function () { console.log(hello); };4. 函数提升优先级高于变量同名情况下函数声明会覆盖 var 声明javascript运行console.log(foo); // [Function: foo] var foo 123; function foo() {}二、let /const 也会提升但存在暂时性死区很多人误以为 let/const 不提升实际上它们同样提升只是进入暂时性死区TDZ无法提前访问。javascript运行console.log(age); // Uncaught ReferenceError: Cannot access age before initialization let age 20;什么是暂时性死区 TDZ从作用域开始到变量声明语句之间的区域就是该变量的暂时性死区。在死区内访问变量会直接报错。javascript运行{ // 此处开始到 let num 之前都是 TDZ console.log(num); // 报错 let num 10; // TDZ 结束 }经典陷阱javascript运行let a 1; { console.log(a); // 报错受内部 let 影响进入 TDZ let a 2; }三、ES6 块级作用域{}就是一个作用域ES6 之前只有全局作用域和函数作用域。ES6 新增块级作用域由{}包裹if / for / while / try都会形成块级作用域。let /const 具有块级作用域javascript运行{ let name 张三; const age 20; } console.log(name); // ReferenceErrorvar 不受块级作用域限制javascript运行{ var num 100; } console.log(num); // 100正常访问典型场景循环事件绑定问题javascript运行// var 会泄露输出都是 5 for (var i 0; i 5; i) { setTimeout(() console.log(i), 0); } // let 具有块级作用域输出 0 1 2 3 4 for (let i 0; i 5; i) { setTimeout(() console.log(i), 0); }四、var /let/const 全方位对比表格特性varletconst作用域函数 / 全局块级块级变量提升是值为 undefined是但 TDZ 不可访问是但 TDZ 不可访问重复声明允许不允许不允许重新赋值支持支持不支持初始赋值非必须非必须必须挂载到 window是否否开发推荐不推荐可变值使用优先使用五、常见面试题变量提升是什么为什么会出现答JS 执行前会扫描作用域并提升声明只提升声明不提升赋值目的是为了让函数可以在定义前调用。let 存在变量提升吗答存在提升但受暂时性死区限制声明前访问会抛出引用错误。const 定义的对象可以修改属性吗答可以修改属性与成员不能修改引用重新赋值。暂时性死区的意义是什么答强制规范变量先声明后使用减少隐性错误提升代码健壮性。为什么现代项目推荐 const let var答const 语义明确、不可变、更安全let 避免变量污染var 易产生提升与全局污染问题。六、总结变量提升是 JS 执行前的声明扫描机制只提升声明不提升赋值。函数声明提升优先级高于 var 变量声明。let/const 存在提升但受暂时性死区 TDZ 保护。let/const 支持块级作用域可有效避免变量污染与循环问题。现代开发规范优先使用 const需要变化时使用 let尽量不使用 var。