JavaScript 作用域、作用域链与闭包核心机制解析

一、JavaScript 中的作用域基础

作用域决定了变量的可访问范围。JavaScript 中最基本的两种变量定义方式包括：全局变量（函数体外声明）和局部变量（函数体内声明）。理解其差异是掌握 JS 高级特性的前提。

第1步：区分块级作用域与函数级作用域

许多开发者熟悉 C#、Java 等语言，它们采用块级作用域（如 for 循环内的变量仅在循环内有效）。而传统 JavaScript (ES5) 采用函数级作用域，即作用域的单位是函数而非代码块。

1. 参照案例 (C#)：在 C# 中，若尝试在 for 循环外访问循环内声明的 var x，会引发编译错误：The name 'x' does not exist in the current context。
2. JS 行为验证：在 JS 中执行以下代码，变量 x 虽在 for 循环内使用 var 声明，但仍可在循环后的代码行中被正常访问和输出。

function main() {
    for (var x = 1; x < 10; x++) {
        console.log(x.toString());
    }
    // 能够访问到循环内部的 x
    console.log("循环后：", x.toString()); 
}
main();

注：上图直观展示了当变量离开其声明的代码块后，在全局或外层函数作用域中依然可见的状态。

第2步：理解“变量提升” (Hoisting)

JS 引擎在执行代码前，会先进行预解析。这导致变量声明会被“提升”至当前作用域的顶部，但赋值操作保留在原位。

观察以下代码：

function func(){
    console.log(x); // 输出 undefined
    var x = 1;
    console.log(x); // 输出 1
}

该代码的实际执行顺序等价于将 var x 移至函数开头：

function func(){
    var x;             // 变量提升，默认初始化为 undefined
    console.log(x);     // 打印 undefined
    x = 1;              // 赋值操作在原位执行
    console.log(x);     // 打印 1
}

第3步：注意 var 对作用域的影响

在函数内部声明变量时，是否使用 var 决定了变量是属于局部还是全局：

• 使用 var：创建局部变量，不影响外部同名全局变量。
• 不使用 var：若未在当前作用域找到该变量，引擎会向上查找直至全局。若仍不存在，则在 Window 对象上创建该属性（隐式全局变量），这会污染全局命名空间。

二、JavaScript 的作用域链

当代码在一个作用域中执行时，如果访问了非本地的变量，引擎会沿着定义时的作用域链向外层一级一级地查找，直到找到变量或到达全局作用域为止。

第4步：演示作用域链的层级查找

嵌套函数可以访问外层函数的变量，但反之不行。以下代码展示了从内向外查找变量的过程：

var name = "Global";
function t() {
    var name = "t_Local";
    function s1() {
        var name = "s1_Local";
        console.log(name); // 1. 先查自身，找到 s1_Local
    }
    function s2() {
        console.log(name); // 2. 自身无，查外层 t，找到 t_Local
    }
    s1();
    s2();
}

执行结果：

1. s1() 输出 s1_Local。
2. s2() 输出 t_Local。

如果删除 t() 中的 name 声明，s2() 将继续沿链向上查找，最终找到全局变量并输出 Global。这种链状结构保证了变量查找的可预测性。

三、闭包的核心原理与应用

闭包是指有权访问另一个函数作用域中变量的函数。简单来说，当一个内部函数被返回到其外部并被保存时，就形成了闭包。它实现了数据私有化并保持变量常驻内存。

第5步：利用闭包访问内部变量

直接访问外部函数的私有变量会报错。通过将内部函数作为返回值，或者将其赋给全局变量，可以建立访问接口：

function s1() {
    var x = 123;
    // 返回一个匿名函数，该函数保留了对外层变量 x 的引用
    return function() {
        return x;
    };
}
var test = s1();
console.log(test()); // 输出 123

注：上图揭示了闭包的内存模型，即使 s1 已经执行完毕，但由于 test 引用了其内部环境，x 依然存在。

第6步：通过闭包保持变量驻留内存

由于闭包的存在，父函数的作用域不会被垃圾回收机制 (GC) 立即清理。这使得变量的状态得以保留：

function f1() {
    var n = 1;
    add = function() { n += 1; }; // 此处故意省略var，形成全局引用以便调用
    function f2() {
        console.log(n);
        return '输出完成';
    }
    return f2;
}
var res = f1();
res();    // 输出 1
add();    // 修改 n 为 2
res();    // 输出 2，证明 n 未被清除

第7步：闭包的经典应用场景

1. 实现类似属性的访问控制：使用自执行函数 (IIFE) 封装私有变量，仅暴露 getter/setter。

(function(){
    var x = 0; // 私有变量
    window.set = function(n) { x = n; }
    window.get = function() { return x; }
})();
console.log(get()); // 0
set(5);
console.log(get()); // 5

2. 遍历数组的简单迭代器：利用闭包保存当前索引状态。

function foo(myArray){
    var i=0;
    next=function(){
        return myArray[i++];
    }
}
foo(['a','b','c']);
console.log(next()); // a
console.log(next()); // b

3. 解决循环中捕获变量引用的常见问题：

如果在 for 循环中直接保存函数，所有函数将共享同一个外部索引 i，导致执行时只能获取最终值（例如全是 3）。修复方法是引入额外的立即执行函数来锁定当前的循环值：

// 修复方案：每次循环创建一个独立的作用域绑定当前值
for(i=0;i<3;i++){
    a[i]=(function(x){
        return function(){
            return x; // 这里的 x 是传入的参数，不受后续循环影响
        }
    })(i); 
}