变量提升将var和函数声明移至作用域顶部,而let和const存在暂时性死区,禁止在声明前访问。1. var声明提升且初始化为undefined;2. let/const提升但未初始化,访问触发ReferenceError;3. 函数声明完全提升,可提前调用;4. 函数表达式表现取决于赋值方式;5. 建议先声明后使用,优先采用let和const以避免意外行为。

JavaScript中的变量提升和暂时性死区是理解变量生命周期的关键概念。很多人在使用var、let和const时会遇到意料之外的行为,根源往往就出在这两个机制上。
变量提升(Hoisting)
JavaScript引擎在执行代码之前会先进行编译阶段,这个阶段会将变量和函数的声明“提升”到作用域的顶部。
对于var声明的变量,其声明会被提升,但赋值不会。
console.log(name); // 输出:undefined
立即学习“Java免费学习笔记(深入)”;
var name = "Alice";
// 相当于:
var name;
console.log(name); // undefined
name = "Alice";
函数声明也会被完整提升,可以在声明前调用。
sayHello(); // 输出:Hello!
function sayHello() {
console.log("Hello!");
}
let 和 const 的暂时性死区(Temporal Dead Zone, TDZ)
let和const虽然也会被提升,但在进入作用域后到正式声明之前,处于“暂时性死区”——此时访问变量会抛出错误。
console.log(age); // 报错:ReferenceError
let age = 25;
这是因为let和const的设计初衷是避免var带来的误解。在声明前访问它们是不被允许的。
TNZ从作用域开始到变量声明完成前都存在。例如:
function example() {
console.log(value); // ReferenceError
let value = 10;
}
var、let、const 的行为对比
不同关键字在提升和死区上的表现有明显区别:
-
var:声明提升,初始化为
undefined,无TDZ - let:声明提升,但未初始化,存在TDZ
-
const:同
let,且必须在声明时赋值
函数表达式的行为取决于声明方式:
console.log(funcVar); // undefined(可调用?不,它是undefined)
funcVar(); // TypeError: funcVar is not a function
var funcVar = function() { console.log("Hi"); };
实际开发建议
为了避免因提升和TDZ导致的问题,推荐以下做法:
- 始终在使用变量前声明它们
- 优先使用
let和const代替var - 理解块级作用域的影响,尤其是
let和const在if、for中的行为 - 避免在声明前访问变量,即使语法上看似“合法”
基本上就这些。掌握变量提升和暂时性死区,能帮助你写出更 predictable 的JavaScript代码。











