JavaScript 中的作用域链（Scope Chain）是理解变量访问机制的核心概念。简单来说，作用域链决定了当前执行代码可以访问哪些变量，以及这些变量的访问顺序。

1. 基本概念

什么是作用域链？

作用域链是一个由多个执行上下文的变量对象组成的链式结构，用于变量查找。

let globalVar = "全局变量";

function outer() {
    let outerVar = "外部变量";
    
    function inner() {
        let innerVar = "内部变量";
        // 这里可以访问：
        console.log(innerVar);    // ✓ 自己的变量
        console.log(outerVar);    // ✓ 父函数的变量
        console.log(globalVar);   // ✓ 全局变量
    }
    
    inner();
}

outer();

2. 作用域链的构建过程

2.1 函数创建时

函数在定义时就确定了自己的作用域链（词法作用域）。

function outer() {
    let x = 10;
    
    // inner函数在定义时，其作用域链就已包含outer的作用域
    function inner() {
        console.log(x); // 可以访问outer的x
    }
    
    return inner;
}

const func = outer();
func(); // 10，即使outer已经执行完毕

2.2 函数调用时

函数被调用时，会创建新的执行上下文，其中包含：

1. 变量对象（VO/AO）：存储局部变量
2. 作用域链：当前VO + 所有父级VO
3. this值

let globalVar = "global";

function a() {
    let aVar = "a";
    
    function b() {
        let bVar = "b";
        console.log(bVar); // 访问自己的变量
        console.log(aVar); // 访问父级变量
        console.log(globalVar); // 访问全局变量
    }
    
    b();
}

a();
// b函数的作用域链：[b的VO] -> [a的VO] -> [全局VO]

3. 作用域链的示例分析

示例1：多层嵌套

let level0 = 0;

function level1() {
    let level1 = 1;
    
    function level2() {
        let level2 = 2;
        
        function level3() {
            let level3 = 3;
            
            // 变量查找过程：
            console.log(level3);  // 1. 查找自己的作用域 ✓
            console.log(level2);  // 2. 查找父级作用域 ✓
            console.log(level1);  // 3. 查找父级的父级 ✓
            console.log(level0);  // 4. 查找全局作用域 ✓
            console.log(level4);  // ❌ 报错：找不到
        }
        
        level3();
    }
    
    level2();
}

level1();

示例2：闭包的作用域链

function createCounter() {
    let count = 0; // count在闭包的作用域链中被保留
    
    return {
        increment: function() {
            count++;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        }
    };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
// 每次调用都能访问到同一个count变量

4. 作用域链 vs 原型链（后面介绍一下原型链）

特性	作用域链	原型链
目的	查找变量/函数声明	查找对象的属性和方法
构成	变量对象（VO）链	对象（proto）链
查找规则	就近原则，逐级向上	先在自身查找，再沿原型链查找
终点	全局作用域	null

// 作用域链示例
let name = "全局";

function showName() {
    console.log(name); // 作用域链查找：局部 → 全局
}

// 原型链示例
const obj = {
    name: "对象自身"
};

const child = Object.create(obj);
child.age = 10;

console.log(child.name); // 原型链查找：自身 → 父对象 → null

5. 特殊情况和注意事项

5.1 块级作用域（ES6+）

function demo() {
    let a = 1;
    
    if (true) {
        let a = 2; // 不同的块级作用域
        console.log(a); // 2
    }
    
    console.log(a); // 1
}

5.2 with语句（已废弃）

let obj = { x: 10, y: 20 };

with(obj) {
    console.log(x); // 10，将obj添加到作用域链前端
    console.log(y); // 20
}

5.3 eval函数的影响

function test() {
    let x = 10;
    eval('let y = 20; console.log(x + y)'); // 30
    // console.log(y); // ❌ 报错，y只在eval的作用域中
}

6. 实际应用技巧

避免污染全局作用域

// 不好的做法
let temp = "临时数据"; // 污染全局

// 好的做法：使用IIFE
(function() {
    let temp = "临时数据";
    // 使用temp...
})();
// temp在这里不可访问

模块模式

const MyModule = (function() {
    let privateVar = "私有变量";
    
    function privateMethod() {
        return privateVar;
    }
    
    return {
        publicMethod: function() {
            return privateMethod();
        }
    };
})();

console.log(MyModule.publicMethod()); // "私有变量"
// console.log(MyModule.privateVar); // undefined

总结

作用域链的关键点：

1. 词法作用域：作用域在函数定义时确定，而非调用时
2. 链式结构：从当前作用域逐级向外查找
3. 闭包基础：内部函数可以访问外部函数的作用域
4. 性能影响：变量查找的层级越深，性能开销越大

理解作用域链有助于：

• 正确使用闭包
• 避免变量污染
• 优化代码性能
• 调试变量查找问题