JavaScript 作用域与作用域链核心原理解析

白榆

发布时间：2026-10-15| 5人浏览过

原创

掌握 JavaScript 中的作用域与作用域链是理解语言行为的关键。本文通过分析 var 与 let 的区别、ES6 块级作用域特性以及变量提升机制，解析变量在代码中的可见性与访问路径，帮助开发者规避命名冲突与作用域陷阱。

全局作用域与局部作用域的界定

在 JavaScript 中，作用域决定了变量的生命周期与可见范围。最基础的分类包括全局作用域和局部作用域。全局变量在任何地方均可访问，而局部变量通常局限于定义它们的函数内部。

考虑以下代码逻辑：

var a = 'jack';
function fn() {
    var a = 'frank';
}
console.log(a);

在此例中，外层定义的 a 为全局变量，函数 fn 内定义的 a 为局部变量。由于 console.log 在全局环境下调用，输出结果为 'jack'。

第 1 步：理解 if/for/while 代码块的变量泄漏

目的：识别非函数代码块不会自动形成封闭作用域的特性。

操作与现象：

若将上述函数的花括号替换为 if 判断：

var a = 'jack';
if(true) {
    var a = 'frank';
}
console.log(a);

此时输出变为 'frank'。这是因为 var 声明的变量不具备块级作用域概念，if 内部重新赋值直接修改了全局变量 a。同理，for 和 while 循环体内的 var 声明也会泄漏到外部：

for(var i = 0; i < 3; i++) {
    break;
}
console.log(i); // 输出 3

k = 5;
while(k > 1) {
    k--;
    var d = 10;
}
console.log(d); // 输出 10

如截图所示，这些变量均被认定为全局变量：

第 2 步：ES6 块级作用域的正确使用

目的：利用 let 和 const 解决变量泄漏问题。

ES6 引入了块级作用域概念。只要 {} 不与函数声明绑定（即不是函数体），即为“块级作用域”。在该环境中：

var 定义的变量依然表现为全局或函数级作用域。
let 定义的变量严格限制在当前的 {} 块内。
若在局部作用域（函数内）使用 let，其作用域同样被限制在函数内。
省略 var 或 let 直接赋值，在严格模式下会报错，在非严格模式下通常会创建全局属性（不推荐）。

作用域链的查找机制

当代码需要访问一个变量时，JavaScript 引擎会沿着“作用域链”进行查找。作用域链本质上是当前执行上下文与所有祖先上下文的集合。查找规则如下：

先在当前作用域内寻找该标识符。
若未找到，则向上（外围/父级）作用域继续搜索。
直到全局作用域，若仍未找到则抛出 ReferenceError。

注意：作用域链只能单向向上查找，无法横向跨越或向下访问。

第 3 步：分析跨层级变量访问实例

目的：验证从局部向全局引用的路径。

基于前述代码，增加全局变量 b 并在函数内引用：

var a = 'jack';
var b = 'andy';
function fn() {
    var a = 'frank';
    console.log(a);      // 1. 查找 fn 内部，找到 'frank'
    console.log(b);      // 2. 查找 fn 内部，未找到；向上查找全局，找到 'andy'
}
fn();
console.log(a);          // 全局环境，找到 'jack'

运行结果清晰展示了这一过程：

变量提升与执行顺序深度解析

理解作用域必须结合 JavaScript 的编译期特性——变量提升（Hoisting）。在代码实际执行前，JS 引擎会先扫描作用域内的声明并将其“提升”至作用域顶部。

第 4 步：剖析 `undefined` 的来源与函数优先权

目的：区分变量声明提升与赋值分离，以及函数声明的提升优先级。

观察以下看似矛盾的输出：

var a = 'jack';
function fn() {
    console.log(a);   // 此处会输出什么？
    var a = 'andy';
    console.log(a);
}
fn();

许多人误以为会输出全局的 'jack'，但实际结果如下：

原理在于：函数内部的 var a 声明被提升到了 fn 的开头。因此，代码在执行时的逻辑相当于：

var a = 'jack';
function fn() {
    var a; // 提升到顶部，初始值为 undefined
    console.log(a); // 打印 undefined
    a = 'andy';     // 执行赋值
    console.log(a); // 打印 'andy'
}

函数声明的提升优先级高于变量：

若在函数内嵌套另一个函数 ss 并提前调用：

var a = 'jack';
function fn() {
    console.log(a);           // undefined
    console.log(ss());        // 'andy'
    function ss() {
        return a;             // 这里的 a 引用的是 fn 内部的 a
    }
    var a = 'andy';
}

执行流程重构：