JavaScript变量提升详解

JavaScript中的变量提升并非代码物理上被“移动”，而是声明在编译阶段被引擎提前“记忆”，而赋值操作始终保留在原位置——这一本质理解能帮你精准避开undefined陷阱、ReferenceError报错以及闭包与循环中的意外交互；var会提升并初始化为undefined，let/const虽提升却因暂时性死区（TDZ）禁止访问，函数声明完全提升而函数表达式仅声明提升，掌握这些差异并结合报错类型（undefined vs ReferenceError）快速定位问题，才是写出健壮代码的关键。

变量提升（Hoisting）不是 JavaScript 把代码“往上挪”，而是**声明在编译阶段被‘记忆’，但赋值仍保留在原地**。理解这点，才能避开 undefined、ReferenceError 和意外交互。

var 声明会被提升并初始化为 undefined

var 声明和初始化是两步：声明在作用域顶部“被看到”，但赋值语句不移动。所以访问未初始化的 var 变量不会报错，只会得到 undefined。

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

• 等价于：var a; console.log(a); a = 1;
• 函数内部的 var 同样只在该函数作用域顶部被提升
• 重复 var a 不报错，也不会覆盖已有值——只是声明被忽略

let 和 const 声明会被提升但不初始化（进入暂时性死区）

let 和 const 声明确实被提升，但 JS 引擎刻意不让它们在声明前被访问——这叫“暂时性死区”（TDZ）。此时读取会直接抛 ReferenceError。

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

• TDZ 从块级作用域开头开始，到 let/const 声明语句执行完为止
• typeof b 在 TDZ 内同样报错（不同于 var 的“安全 typeof”）
• const 还多一层限制：必须在声明时赋值，且不可重复赋值

函数声明 vs 函数表达式提升行为完全不同

函数声明（function foo() {}）会被完整提升：声明 + 定义都提前；函数表达式（const foo = function() {}）则按变量规则处理——只有 const 声明被提升（进 TDZ），赋值不提升。

foo(); // OK，输出 "hello"
function foo() { console.log("hello"); }

bar(); // TypeError: bar is not a function
const bar = function() { console.log("world"); };

• 箭头函数、class 声明也属于“类表达式”，遵循 let 规则（TDZ）
• 命名函数表达式（const x = function y() {}）中，y 在函数体内可访问，但外部不可见，也不提升

真实项目里最容易踩坑的场景

提升本身不难记，难的是它和作用域、闭包、模块加载混在一起时的副作用。比如：

for (var i = 0; i  console.log(i), 100);
}
// 输出：3, 3, 3 —— 因为 var i 被提升为单个全局绑定

• 用 let i 就能按预期输出 0, 1, 2（每次迭代有独立绑定）
• 模块顶层的 import 不受提升影响，但 import() 动态导入是 Promise，和提升无关
• ESLint 规则 no-use-before-define 对 var 默认不报，但对 let/const 严格检查

真正要警惕的不是“有没有提升”，而是“这个变量在当前行是否已进入可访问状态”。看报错类型比背规则更可靠：是 undefined？还是 ReferenceError？答案就藏在里面。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript变量提升详解》文章吧，也可关注golang学习网公众号了解相关技术文章。