javascript中变量提升是什么_它如何影响代码执行?

变量提升是JavaScript编译阶段对声明的处理:var声明被绑定并初始化为undefined;let/const声明被绑定但不初始化,进入暂时性死区(TDZ),访问会报ReferenceError;函数声明完全提升,函数表达式仅变量名提升。

变量提升(hoisting)到底是什么

JavaScript 中的变量提升不是把代码“移动”到顶部,而是指在编译阶段,var 声明会被解析并绑定到当前作用域,初始值设为 undefined;而 letconst 虽然也会被声明绑定,但不会初始化,进入「暂时性死区」(TDZ)。

var 声明的提升表现和陷阱

var 的提升常导致意料之外的 undefined 值,尤其在条件块或函数内提前访问时:

  • 即使 var x = 1 写在后面,console.log(x) 也不会报错,只会输出 undefined
  • 函数内部用 var 声明同名变量,会覆盖外部变量,但仅限该函数作用域
  • 重复的 var 声明会被忽略,不会报错
console.log(a); // undefined
var a = 2;
console.log(a); // 2

let/const 不是“不提升”,而是有 TDZ

很多人误以为 letconst 没有提升。实际上它们在词法环境创建时就被声明绑定,只是不初始化——任何在声明前访问都会触发 ReferenceError

  • let x 声明前读取:抛出 ReferenceError: Cannot access 'x' before initialization
  • const 必须在声明时赋值,否则语法错误
  • TDZ 从块顶部开始,到声明语句执行完毕为止
console.log(b); // ReferenceError
let b = 3;

函数声明 vs 函数表达式提升差异

函数声明(function foo() {})会被完全提升(包括函数体),而函数表达式(var foo = function() {})只提升变量名,不提升赋值:

  • foo() 在函数声明前可调用
  • bar() 在函数表达式前调用会报 TypeError: bar is not a function(因为 barundefined
  • 箭头函数属于函数表达式,不具提升能力
foo(); // OK → "hello"
function foo() { return "hello"; }

bar(); // TypeError
var bar = function() { return "world"; };
真正容易被忽略的是:提升行为只发生在**声明本身**,不涉及赋值、运算或副作用。哪怕写 var x = getValue()getValue() 依然在原位置执行,不会提前调用。