var声明变量名提升但赋值不提升,let/const仅声明提升且存在暂时性死区(TDZ),函数声明完全提升而函数表达式仅变量名提升;三者语义不同,需依声明方式判断访问行为。

var 声明的变量会被提升到作用域顶部
JavaScript 引擎在执行代码前会先进行“预解析”,var 声明的变量名会被提升(hoist)到当前函数或全局作用域顶部,但赋值不会。这意味着你可以先 console.log(x) 再 var x = 1,不会报错,但输出是 undefined。
常见错误现象:
- 误以为声明和赋值一起被提升,导致逻辑判断出错(比如
if (x === undefined)意外成立) - 在函数内重复用
var声明同名变量,实际只创建一次,后声明被忽略
console.log(a); // undefined var a = 2; console.log(a); // 2
let 和 const 不会提升变量初始化,但有暂时性死区(TDZ)
let 和 const 声明的变量名也会被提升,但引擎不会初始化它们——从块级作用域开始到声明语句之前,访问该变量会直接抛出 ReferenceError,这就是“暂时性死区”。
使用场景:
立即学习“Java免费学习笔记(深入)”;
- 避免在声明前意外读取未定义值(
var下静默返回undefined) - 强制代码顺序清晰,尤其在闭包、循环中绑定正确值时更安全
console.log(b); // ReferenceError: Cannot access 'b' before initialization let b = 3;
函数声明和函数表达式提升行为不同
函数声明(function foo() {})会被完全提升:函数名和函数体都可用;而函数表达式(var foo = function() {})只提升变量名,不提升赋值,行为等同于 var 声明。
容易踩的坑:
- 在条件分支里写函数声明(如
if (...) function f() {}),行为在不同引擎中不一致,ES 规范不鼓励这种写法 - 用
let/const定义函数表达式时,同样受 TDZ 限制,不能提前调用
foo(); // OK,函数声明被完全提升
function foo() {}
bar(); // TypeError: bar is not a function
var bar = function() {};
提升只发生在声明所在的作用域内,不影响嵌套或块级作用域边界
变量提升不会跨函数、也不会穿透 {} 块(除非是 var,它本就不受块级作用域限制)。let/const 的提升范围严格限定在最近的块级作用域内,且受 TDZ 约束。
性能与兼容性影响:
- 现代引擎对提升的优化已非常成熟,不必担心性能损耗
- IE10 及更早版本对
let/const完全不支持,若需兼容,必须用 Babel 转译或改用var+ 显式作用域控制 - 箭头函数没有自己的
this,但它本身是函数表达式,不被提升
if (false) {
var x = 1; // 仍会提升到函数/全局顶部
}
console.log(x); // undefined(非报错)
{
let y = 2;
console.log(y); // 2
}
console.log(y); // ReferenceError: y is not defined
真正麻烦的不是“有没有提升”,而是你是否清楚当前变量是用 var、let 还是 const 声明的——三者提升的语义完全不同,且错误表现方式差异很大。调试时看到 undefined 或 ReferenceError,第一反应不该是“怎么又错了”,而是立刻检查声明方式和访问位置。











