变量提升指声明被提前至作用域顶部,但仅声明被提升、赋值不提升;var 声明访问未初始化变量得 undefined,let/const 因 TDZ 抛 ReferenceError;函数声明全提升可前置调用,函数表达式仅变量名提升。

JavaScript 中的变量提升(Hoisting)是指变量和函数声明在代码执行前被“移动”到当前作用域顶部的现象。它不是真正的物理移动,而是 JavaScript 引擎在编译阶段将声明部分提前处理的结果。理解它能帮你避开 undefined、ReferenceError 等常见陷阱。
变量提升只提升声明,不提升赋值
用 var 声明的变量会被提升,但初始化(即等号右边的值)不会。这意味着变量在声明前访问会得到 undefined,而不是报错。
例如:
console.log(a); // undefined
var a = 10;
立即学习“Java免费学习笔记(深入)”;
引擎实际按如下顺序处理:
var a;
console.log(a); // undefined
a = 10;
这种行为容易让人误以为变量已就绪,导致逻辑出错。
let 和 const 不会变量提升?其实是暂时性死区(TDZ)
let 和 const 声明虽然也会被“提升”,但在声明前访问会直接抛出 ReferenceError,因为它们处于“暂时性死区”。这是有意设计的安全机制。
例如:
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
所以,避免错误的关键不是“不提升”,而是**始终先声明再使用**——尤其对 let/const,哪怕只是换行写在前面也更安全。
函数声明与函数表达式的提升差异
函数声明会被完整提升(包括函数体),可安全地在声明前调用;而函数表达式(尤其是用 var 赋值的)只提升变量名,不提升赋值,调用会报 TypeError。
对比:
foo(); // 正常输出 "hello"
function foo() { console.log("hello"); }bar(); // TypeError: bar is not a function
var bar = function() { console.log("world"); };
建议:优先使用函数声明处理需要前置调用的逻辑;若用函数表达式,确保调用在赋值之后。
实用建议:从写法上规避提升带来的混乱
现代 JavaScript 开发中,可通过以下方式减少变量提升引发的问题:
- 统一使用
let/const替代var,利用 TDZ 提前暴露错误 - 坚持“声明靠近使用”的原则,避免跨多行或跨逻辑块引用未声明变量
- 启用 ESLint 规则如
no-use-before-define,自动检测未声明先使用的代码 - 在函数或块级作用域开头集中声明变量(尤其
let/const),增强可读性和可控性
变量提升是 JS 执行机制的一部分,无法关闭,但通过规范写法和工具辅助,可以完全绕过它带来的隐患。











