17370845950

如何理解JavaScript中的变量提升【教程】
变量提升是声明在编译阶段被“记忆”而赋值保留在原地;var声明提升并初始化为undefined,let/const提升但不初始化(进入TDZ),函数声明完全提升,函数表达式仅声明提升。

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

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

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

console.log(a); // undefined
var a = 1;
  • 等价于:var a; console.log(a); a = 1;
  • 函数内部的 var 同样只在该函数作用域顶部被提升
  • 重复 var a 不报错,也不会覆盖已有值

    ——只是声明被忽略

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

letconst 声明确实被提升,但 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 < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 输出:3, 3, 3 —— 因为 var i 被提升为单个全局绑定
  • let i 就能按预期输出 0, 1, 2(每次迭代有独立绑定)
  • 模块顶层的 import 不受提升影响,但 import() 动态导入是 Promise,和提升无关
  • ESLint 规则 no-use-before-definevar 默认不报,但对 let/const 严格检查

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