JavaScript 作用域与变量提升详解

Cora

发布时间：2026-10-13| 6人浏览过

原创

JavaScript 采用函数作用域而非块级作用域，导致变量存在“声明提前”现象。使用 var 声明的变量会在代码执行前被移至作用域顶部，但仅初始化为 undefined。本文通过代码示例解析变量提升机制及未声明变量的影响。

JavaScript 的作用域特性

在 C、Java 等语言中，存在明确的“块级作用域”，即花括号内的代码段拥有独立的变量可见性，外部无法访问内部声明的变量。然而，JavaScript 早期版本并未引入严格的块级作用域，而是采用函数作用域。

这意味着：

变量在声明它们的函数体内以及该函数嵌套的任意函数体内始终可见。
变量可以在其声明语句之前就被访问，这一特性被称为“声明提前”（Hoisting）。
所有使用 var 声明的变量，其声明部分会被提升至当前函数体的顶部，而赋值操作仍保留在原位置。

变量提升的实际表现

第1步：观察 var 声明的提升行为

当在函数内部使用 var 声明变量时，即使代码顺序看似是“先使用后声明”，实际执行逻辑也会发生变化。

目的：验证局部变量是否遮蔽全局变量，以及提升机制的具体表现。
入口：定义一个全局变量和一个包含局部变量的函数。

动作：

var test1 = "globalVariable";
function test() {
    console.log(test1); // 第一次输出
    var test1 = "localVariable"; // 第二次声明并赋值
    console.log(test1); // 第三次输出
}

重要参数：注意 console.log 的执行顺序与 var 的位置关系。
完成状态：控制台先输出 undefined，再输出 localVariable。

原理解析：许多人误以为第一行会输出全局变量 globalVariable，但事实并非如此。由于局部变量 test1 在整个函数体中始终可见，它遮蔽了同名的全局变量。但由于 var 的声明提前特性，上述代码在引擎内部实际上等效于：

准备：重新构建等效代码以展示提升本质。

动作：

var test1 = "globalVariable";
function test() {
    var test1; // 声明提升到顶部，此时值为 undefined
    console.log(test1); 
    test1 = "localVariable"; // 赋值留在原位
    console.log(test1);
}

结论：第一次输出时，局部变量已声明但未赋值，故为 undefined；第二次输出时，已完成赋值，故为 localVariable。

第2步：对比未使用 var 声明的情况

如果函数体内的变量没有使用 var 显式声明，其行为将完全不同。

目的：区分隐式全局变量与局部变量的差异。
入口：修改上述代码，移除 var 关键字。

动作：

var test1 = "globalVariable";
function test() {
    console.log(test1); // 第一次输出
    test1 = "localVariable"; // 直接赋值
    console.log(test1); // 第三次输出
}