JavaScript变量提升机制_JavaScript执行上下文

变量提升使var声明和函数声明在创建阶段被提升至作用域顶部,var仅提升声明、初始化为undefined,函数声明则完全提升可提前调用,而let/const存在暂时性死区,未声明前访问报错,函数表达式因赋值未提升导致调用出错,执行上下文的两阶段机制决定了代码实际运行行为。

JavaScript中的变量提升和执行上下文是理解代码运行机制的关键。很多人在使用var声明变量或定义函数时,会遇到看似“奇怪”的行为,比如为什么可以在声明之前访问变量而不报错。这背后的核心机制就是量提升(Hoisting)执行上下文(Execution Context)的创建过程。

执行上下文的两个阶段

每当JavaScript执行一段代码时,都会先创建一个执行上下文,它分为两个阶段:

  • 创建阶段(Creation Phase):此时会处理变量声明、函数声明和作用域链构建。
  • 执行阶段(Execution Phase):代码逐行执行,赋值操作和函数调用发生在此阶段。

变量提升主要发生在创建阶段。

变量提升的表现

在创建阶段,JavaScript引擎会将所有通过var声明的变量和function声明的函数“提升”到当前作用域的顶部。

  • 使用var声明的变量会被提升,但只提升声明,不提升赋值。初始值为undefined
  • 函数声明会被完整提升,因此可以在声明前调用。
  • letconst虽然也有提升,但不会被初始化,进入“暂时性死区”(Temporal Dead Zone),在声明前访问会报错。

例如:

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

fn(); // 输出 "I'm hoisted"
function fn() {
  console.log("I'm hoisted");
}

函数表达式与提升

函数表达式不会被完整提升。例如:

console.log(func); // undefined(因为func是var声明)
func(); // 报错:func is not a function

var func = function() {
  console.log("This won't work before assignment");
};

这里func被提升了,但值是undefined,所以调用时报错。

作用域与提升范围

提升只发生在当前作用域内。无论是全局作用域还是函数作用域,变量和函数声明都会被提升到该作用域的顶部。

例如在函数内部:

function example() {
  console.log(localVar); // undefined
  var localVar = "local";
}
example();

这里的localVar在函数执行上下文中被提升,但未赋值。

基本上就这些。理解变量提升的关键是明白:声明被提前,赋值仍保留在原地。结合执行上下文的创建过程,就能准确预测代码行为。不复杂但容易忽略。