JS 入门通关手册（36）：变量提升、暂时性死区与块级作用域

摘要

本文系统讲解 JavaScript 变量提升机制、暂时性死区（TDZ）以及 ES6 块级作用域，通过大量可运行案例清晰展示 var/let/const 在声明、提升、作用域上的差异，总结日常开发中的常见陷阱与最佳实践，帮助开发者从底层理解变量行为，避免隐性 bug，夯实前端基础。

一、变量提升：JavaScript 先 “扫描” 再执行

在 JS 执行代码前，引擎会先遍历当前作用域，把变量声明和函数声明提升到作用域顶部，这一机制称为变量提升（Hoisting）。

关键点：

• 只提升声明，不提升赋值
• 函数声明整体提升，可在定义前调用
• var 变量提升为undefined

1. 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); // ReferenceError

var 不受块级作用域限制

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 全方位对比

表格

五、常见面试题

1. 变量提升是什么？为什么会出现？答：JS 执行前会扫描作用域并提升声明，只提升声明不提升赋值，目的是为了让函数可以在定义前调用。

2. let 存在变量提升吗？答：存在提升，但受暂时性死区限制，声明前访问会抛出引用错误。

3. const 定义的对象可以修改属性吗？答：可以修改属性与成员，不能修改引用（重新赋值）。

4. 暂时性死区的意义是什么？答：强制规范变量先声明后使用，减少隐性错误，提升代码健壮性。

5. 为什么现代项目推荐 const > let > var？答：const 语义明确、不可变、更安全；let 避免变量污染；var 易产生提升与全局污染问题。

六、总结

1. 变量提升是 JS 执行前的声明扫描机制，只提升声明不提升赋值。
2. 函数声明提升优先级高于 var 变量声明。
3. let/const 存在提升，但受暂时性死区 TDZ 保护。
4. let/const 支持块级作用域，可有效避免变量污染与循环问题。
5. 现代开发规范：优先使用 const，需要变化时使用 let，尽量不使用 var。