什么是JavaScript中的变量提升?

JavaScript中变量提升指var声明的变量和函数声明会被提升到作用域顶部,但仅声明被提升、赋值不提升;let/const无提升且存在暂时性死区;函数声明完整提升而函数表达式不提升。

JavaScript中的变量提升(Hoisting)是指变量和函数声明在代码执行前被“移动”到当前作用域顶部的现象。注意,只是声明被提升,赋值操作不会被提升。

var声明的提升

使用var声明的变量,其声明会被提升到当前作用域(函数或全局)顶部,但初始化(即赋值)保留在原位置。这意味着你可以在声明前访问该变量,但值为undefined

  • console.log(a); // undefined
  • var a = 10;

这段代码实际等价于:

  • var a;(声明提升)
  • console.log(a); // undefined
  • a = 10;(赋值不提升)

let和const不存在变量提升(但有暂时性死区)

letconst声明不会被提升。在声明之前访问它们会直接报错:ReferenceError。这是因为它们存在“暂时性死区”(Temporal Dead Zone, TDZ),从块级作用域开始到声明语句之间,变量不可访问。

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

函数声明也会被提升(且完整提升)

函数声明(不是函数表达式)不仅声明被提升,整个函数定义也被提升,因此可以在声明前调用。

  • sayHello(); // 正常输出 "Hello"
  • function sayHello() { console.log("Hello"); }

但函数表达式不会被完整提升:

  • sayHi(); // TypeError: sayHi is not a function
  • var sayHi = function() { console.log("Hi"); };

提升只发生在声明,不包括赋值或执行

无论哪种声明方式,只有声明本身参与提升机制。任何运行时行为(如函数调用、对象创建、异步操作)都严格按代码顺序执行,不受提升影响。

  • console.log(x); // undefined
  • var x = getData(); // getData() 这行仍会在原位置执行

基本上就这些。理解提升有助于避免意外的undefinedReferenceError,也解释了为什么推荐优先使用let/const——它们的行为更符合直觉。