深入理解作用域与作用域链

一、引言

在 JavaScript 编程中，作用域和作用域链是极为核心的概念，它们犹如程序运行时的 “隐形规则手册”，深刻影响着变量的可见性、生命周期以及代码的逻辑结构。透彻掌握这两个概念，是编写高效、可维护 JavaScript 代码的关键基石。二、作用域基础概念（一）全局作用域全局作用域是 JavaScript 程序中最顶层的作用域。在浏览器环境下，全局对象通常是 window（Node.js 环境中则是 global）。在全局作用域中定义的变量和函数，可在代码的任何位置被访问，除非在局部作用域中被同名变量遮蔽。

// 定义全局变量
var globalVariable = "I am global";

// 定义全局函数
function globalFunction() {
    console.log(globalVariable);
}
// 在全局范围内调用函数
globalFunction(); // 输出：I am global

（二）函数作用域

函数作用域是指在函数内部定义的变量和函数所拥有的作用域。这些变量和函数仅在函数内部可访问，外部无法直接访问。函数作用域的存在使得代码的模块化和封装成为可能。

function localScopeFunction() {
    // 定义局部变量
    var localVariable = "I am local";
    console.log(localVariable);
}

// 尝试在函数外部访问局部变量，会引发错误
// console.log(localVariable); // Uncaught ReferenceError: localVariable is not defined

// 调用函数，在函数内部访问局部变量
localScopeFunction(); // 输出：I am local

（三）块级作用域（ES6 引入）

ES6 引入了 let 和 const 关键字，带来了块级作用域。块级作用域由花括号 {} 界定，在块内定义的变量仅在该块及其嵌套子块内可访问。

{
    let blockVariable = "I am block scoped";
    const blockConstant = "I am a constant in block";
    console.log(blockVariable);
    console.log(blockConstant);
}

// 在块级作用域外访问块内变量，会引发错误
// console.log(blockVariable); // Uncaught ReferenceError: blockVariable is not defined
// console.log(blockConstant); // Uncaught ReferenceError: blockConstant is not defined

在 for 循环中，let 关键字的块级作用域特性尤为实用：

for (let i = 0; i < 5; i++) {
    // 循环体中的 i 是块级作用域，每个迭代都有独立的 i
    setTimeout(() => {
        console.log(i);
    }, 1000);
}

// 在循环外部无法访问循环体内的 i
// console.log(i); // Uncaught ReferenceError: i is not defined

上述代码中，由于 let 的块级作用域，每个循环迭代的 i 都是独立的，所以在定时器回调函数中能够正确输出对应的 i 值，而不是像使用 var 时那样，所有定时器回调都共享同一个最终的 i 值。

三、变量提升在 JavaScript 中，变量和函数声明会被提升到它们所在作用域的顶部。这意味着在代码执行之前，JavaScript 引擎会先处理变量和函数声明，将它们 “移动” 到作用域的开头。对于变量声明，使用 var 关键字声明的变量会被提升，但变量的初始化不会被提升。例如：

console.log(variable); // 输出：undefined
var variable = "I am kobe";

在上述代码中，虽然 console.log 语句在变量声明之前，但由于变量提升，变量 variable 已经在作用域顶部被声明，只是此时还未被初始化，所以输出 undefined。 而函数声明不仅会被提升，整个函数体也会被提升。例如：

functionDeclaration(); // 输出：mamba never out

function functionDeclaration() {
    console.log("mamba never out");
}

需要注意的是，函数表达式不会像函数声明那样被提升。例如：

functionExpression(); // 报错：Uncaught TypeError: functionExpression is not a function

var functionExpression = function() {
    console.log("mamba never out expression");
};

变量提升可能会导致一些意想不到的结果，尤其是在代码结构较为复杂时。为了避免因变量提升带来的困惑和错误，建议在使用变量之前先进行声明，并尽量将变量声明放在作用域的顶部。

四、作用域链概念

（一）作用域链的形成

当 JavaScript 代码执行时，会创建一个执行上下文。每个执行上下文都有一个与之关联的变量对象，该变量对象包含了在该作用域内定义的变量、函数声明等信息。在函数执行时，其执行上下文会被压入一个执行上下文栈中。 作用域链是由当前执行上下文的变量对象以及所有父级执行上下文的变量对象按照特定顺序连接而成的链式结构。当在代码中访问一个变量时，JavaScript 引擎首先会在当前执行上下文的变量对象中查找，如果未找到，则沿着作用域链向上一级执行上下文的变量对象中查找，直至找到该变量或者到达全局作用域。如果在整个作用域链中都未找到，则会抛出 ReferenceError 异常。

（二）嵌套函数中的作用域链

考虑以下嵌套函数的示例：

var globalVar = "I am jordan";

function outerFunction() {
    var outerVar = "I am kobe";

    function innerFunction() {
        var innerVar = "I am durant";
        console.log(globalVar);
        console.log(outerVar);
        console.log(innerVar);
    }

    innerFunction();
}

outerFunction();

 在上述代码中，当 innerFunction 执行时，其作用域链包含了 innerFunction 自身的变量对象、outerFunction 的变量对象以及全局变量对象。所以在 innerFunction 中访问变量时，会按照作用域链的顺序依次查找，先在自身作用域内查找 innerVar，再在 outerFunction 的作用域内查找 outerVar，最后在全局作用域查找 globalVar。因此，代码会依次输出：I am jordan、I am kobe、I am durant。

（三）变量遮蔽与作用域链

当在内部作用域中定义了与外部作用域同名的变量时，内部作用域中的变量会遮蔽外部作用域中的同名变量。但外部作用域中的变量仍然存在于作用域链中，只是在内部作用域中通过同名变量名无法直接访问。 

var variable = "global";

function shadowingFunction() {
    var variable = "local";
    console.log(variable); 
    // 输出：local，这里访问的是内部作用域的 variable，外部的被遮蔽了

    // 可以通过特定方式访问被遮蔽的外部变量（在浏览器环境下）
    console.log(window.variable); 
    // 输出：global
}

shadowingFunction();

五、闭包

（一）闭包的形成

闭包是 JavaScript 中一个非常独特且强大的概念。当一个函数内部定义了另一个函数，并且内部函数引用了外部函数的变量时，就形成了闭包。即使外部函数已经执行完毕，其内部变量由于被内部函数引用，不会被垃圾回收机制回收，仍然存活在内存中，供内部函数继续访问。 

function outer() {
    var outerVar = "I am from Lakers";

    function inner() {
        console.log(outerVar);
    }

    return inner;
}

var closureFunction = outer();
closureFunction(); 

// 输出：I am from Lakers，即使 outer 函数已经执行完毕，inner 函数仍能访问 outerVar，这就是闭包的作用

（二）闭包的应用场景

数据隐藏与封装

可以利用闭包创建私有变量和函数，只暴露特定的接口来操作这些私有数据，从而实现数据的隐藏和封装，增强代码的安全性和可维护性。例如：

function createCounter() {
    var count = 0;

    return {
        increment: function() {
            count++;
            return count;
        },
        getCount: function() {
            return count;
        }
    };
}

var counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount());  // 2

在上述代码中，count 变量是私有的，外部无法直接访问和修改，只能通过 increment 和 getCount 方法来间接操作。函数柯里化 闭包可用于实现函数柯里化，即将一个多参数函数转换为一系列单参数函数。例如：

function add(x) {
    return function(y) {
        return x + y;
    };
}

var add5 = add(5);
console.log(add5(3)); // 8

 这里 add 函数返回的内部函数形成了闭包，它记住了外部函数传入的 x 值，当调用 add(5) 时，再传入 y 值进行计算。

事件处理与回调函数

在事件驱动编程中，闭包经常用于处理事件回调。例如，当为多个按钮添加点击事件处理函数时，可以利用闭包来传递每个按钮的特定信息，以便在回调函数中进行针对性的操作。

var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
    (function(index) {
        buttons[index].addEventListener('click', function() {
            console.log('Button'+ (index + 1) +'clicked');
        });
    })(i);
}

 这里的匿名函数形成闭包，保存了当前循环的 index 值，使得每个按钮的点击事件处理函数能够正确识别对应的按钮序号。

（三）闭包与内存管理

由于闭包会持有对外部变量的引用，这可能导致内存泄漏问题。如果一个闭包所引用的外部变量不再需要，但由于闭包的存在而无法被垃圾回收机制回收，就会造成内存占用。例如：

function createClosure() {
    var largeData = new Array(24).fill(8);

    return function() {
        console.log(largeData.length);
    };
}

var closure = createClosure();
closure();

此时，虽然 createClosure 函数已经执行完毕，但由于 closure 闭包仍然引用 largeData，导致 largeData 无法被回收

为了避免这种情况，可以在适当的时候将闭包引用置为 null，手动释放对外部变量的引用，以便垃圾回收机制能够回收内存。例如：

function createClosure() {
    var largeData = new Array(24).fill(8);

    var closure = function() {
        console.log(largeData.length);
    };

    return closure;
}

var closure = createClosure();
closure();
// 释放闭包引用
closure = null;

六、总结

作用域和作用域链是 JavaScript 语言的核心特性，它们共同决定了变量的可见性和生命周期，以及函数之间的变量共享和访问机制。变量提升虽然是 JavaScript 的一个特性，但也可能带来一些代码理解和维护上的困扰，通过合理的代码书写习惯可以有效避免。闭包为 JavaScript 编程带来了强大的功能，如数据隐藏、函数柯里化和事件处理等，但也需要注意内存管理问题，避免因不当使用闭包导致内存泄漏。深入理解这些概念有助于我们编写更健壮、高效且易于维护的 JavaScript 代码，能够合理利用闭包等特性解决实际问题，并避免因作用域相关概念理解不足而引发的错误和性能隐患。