编辑“︁JavaScript闭包”︁（章节）

= JavaScript闭包 =

'''闭包'''（Closure）是 JavaScript 中一个强大且核心的概念，它允许函数访问并记住其词法作用域（lexical scope）中的变量，即使该函数在其原始作用域之外执行。理解闭包对于编写高效、模块化的 JavaScript 代码至关重要。

== 闭包的定义 ==
闭包是指一个函数及其捆绑的周围状态（lexical environment）的组合。换句话说，闭包让函数可以“记住”并访问其创建时的作用域链，即使该函数在另一个作用域中被调用。

在 JavaScript 中，每当函数被创建时，闭包就会同时被创建。闭包的关键特性是：
* 函数可以访问其外部函数的变量。
* 即使外部函数已经执行完毕，内部函数仍然可以保留对外部变量的引用。

== 闭包的原理 ==
JavaScript 使用词法作用域（lexical scoping），这意味着函数的作用域在函数定义时就已经确定，而不是在调用时。闭包利用这一特性，使得内部函数可以访问外部函数的变量，即使外部函数已经执行完毕。

=== 作用域链 ===
闭包的形成依赖于 JavaScript 的作用域链机制。当一个函数被调用时，会创建一个新的执行上下文，并关联一个作用域链。这个作用域链包含：
1. 当前函数的变量对象（Variable Object）。
2. 外部函数的作用域链（如果存在）。
3. 全局作用域。

由于内部函数可以访问外部函数的作用域链，因此即使外部函数执行完毕，只要内部函数仍然存在（例如被返回或传递给其他函数），外部函数的变量对象就不会被垃圾回收，从而形成闭包。

== 闭包的示例 ==
以下是一个简单的闭包示例：

<syntaxhighlight lang="javascript">
function outerFunction() {
    let outerVariable = 'I am outside!';

    function innerFunction() {
        console.log(outerVariable); // 访问外部函数的变量
    }

    return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // 输出: "I am outside!"
</syntaxhighlight>

=== 代码解析 ===
1. `outerFunction` 定义了一个局部变量 `outerVariable` 和一个内部函数 `innerFunction`。
2. `innerFunction` 引用了 `outerVariable`，因此形成了一个闭包。
3. `outerFunction` 返回 `innerFunction`，并将其赋值给 `myClosure`。
4. 即使 `outerFunction` 已经执行完毕，`myClosure`（即 `innerFunction`）仍然可以访问 `outerVariable`，输出 "I am outside!"。

== 闭包的实际应用 ==
闭包在 JavaScript 中有多种实际用途，以下是几个常见场景：

=== 1. 数据封装与私有变量 ===
JavaScript 没有原生的私有变量支持，但闭包可以模拟这一功能：

<syntaxhighlight lang="javascript">
function createCounter() {
    let count = 0; // 私有变量

    return {
        increment: function() {
            count++;
            console.log(count);
        },
        decrement: function() {
            count--;
            console.log(count);
        }
    };
}

const counter = createCounter();
counter.increment(); // 输出: 1
counter.increment(); // 输出: 2
counter.decrement(); // 输出: 1
</syntaxhighlight>

这里，`count` 是一个私有变量，只能通过 `increment` 和 `decrement` 方法访问和修改。

=== 2. 函数工厂 ===
闭包可以用于创建具有特定行为的函数：

<syntaxhighlight lang="javascript">
function createMultiplier(factor) {
    return function(number) {
        return number * factor;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 输出: 10
console.log(triple(5)); // 输出: 15
</syntaxhighlight>

`createMultiplier` 返回一个函数，该函数记住了 `factor` 的值，从而实现了不同的乘法行为。

=== 3. 事件处理与回调 ===
闭包常用于事件处理程序，以保留某些状态：

<syntaxhighlight lang="javascript">
function setupButton() {
    let clicks = 0;

    document.getElementById('myButton').addEventListener('click', function() {
        clicks++;
        console.log(`Button clicked ${clicks} times`);
    });
}

setupButton();
</syntaxhighlight>

每次点击按钮时，回调函数都能访问并更新 `clicks` 变量。

== 闭包与内存管理 ==
闭包可能导致内存泄漏，因为外部函数的变量对象不会被垃圾回收，只要内部函数仍然存在引用。为避免问题：
* 及时解除不再需要的函数引用（如移除事件监听器）。
* 避免在闭包中保留不必要的变量。

== 闭包的常见误区 ==
=== 1. 循环中的闭包 ===
以下代码展示了闭包在循环中的常见问题：

<syntaxhighlight lang="javascript">
for (var i = 1; i <= 3; i++) {
    setTimeout(function() {
        console.log(i); // 输出: 4, 4, 4
    }, 1000);
}
</syntaxhighlight>

问题在于 `var` 没有块级作用域，所有 `setTimeout` 回调共享同一个 `i`。解决方法：
* 使用 `let`（块级作用域）：
  <syntaxhighlight lang="javascript">
  for (let i = 1; i <= 3; i++) {
      setTimeout(function() {
          console.log(i); // 输出: 1, 2, 3
      }, 1000);
  }
  </syntaxhighlight>
* 使用闭包创建新的作用域：
  <syntaxhighlight lang="javascript">
  for (var i = 1; i <= 3; i++) {
      (function(j) {
          setTimeout(function() {
              console.log(j); // 输出: 1, 2, 3
          }, 1000);
      })(i);
  }
  </syntaxhighlight>

=== 2. 性能考量 ===
过度使用闭包可能导致内存占用增加，因为外部函数的变量对象不会被释放。应谨慎使用闭包，尤其是在频繁调用的函数中。

== 总结 ==
闭包是 JavaScript 的核心特性，它允许函数访问其词法作用域中的变量，即使函数在原始作用域之外执行。闭包的实际应用包括：
* 数据封装与私有变量。
* 函数工厂。
* 事件处理与回调。

理解闭包有助于编写更高效、模块化的代码，但也需注意内存管理和性能问题。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript函数]]