JavaScript 中的闭包

闭包（Closure） 是 JavaScript 中一个非常重要的概念，它是指 函数和声明该函数的词法环境（包含该函数的作用域链） 的组合。闭包使得函数能够记住并访问定义时的作用域，即使在函数外部调用它时，仍然可以访问这些变量。

闭包的特点：

1. 函数可以访问外部函数的变量。

2. 即使外部函数已经返回，内部函数仍然可以访问外部函数的局部变量。

3. 闭包可以创建私有变量，因为外部函数的局部变量对外部是不可见的，但内部函数能够访问和操作这些局部变量。

闭包的工作原理

当一个函数定义在另一个函数内部时，内部函数可以访问外部函数的变量。但是，通常在外部函数执行完后，其局部变量就会被销毁。闭包使得内部函数即使在外部函数执行完后，依然能够访问外部函数的局部变量。

示例 1：基本的闭包

function outer() {
  let counter = 0;  // `counter` 是外部函数的局部变量

  // 内部函数
  function inner() {
    counter++;
    console.log(counter);
  }

  return inner; // 返回内部函数
}

const myCounter = outer(); // 调用 outer 函数，并返回 inner 函数
myCounter();  // 输出 1
myCounter();  // 输出 2
myCounter();  // 输出 3

在上面的例子中：

outer 函数返回了 inner 函数。即使 outer 执行完毕，它的局部变量 counter 仍然存在于内存中，且 inner 函数仍然可以访问和修改它。
inner 函数构成了一个闭包，绑定了 outer 的作用域。

示例 2：闭包与私有变量

闭包的一个常见用途是 模拟私有变量。由于外部无法直接访问闭包内部的局部变量，我们可以通过闭包来隐藏某些信息，并提供方法来访问和修改这些变量。

function createCounter() {
  let count = 0;  // 私有变量

  return {

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

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

    getCount: function() {
      return count;
    }

  };

}

const counter = createCounter();
counter.increment(); // 输出 1
counter.increment(); // 输出 2
counter.decrement(); // 输出 1
console.log(counter.getCount()); // 输出 1

在这个例子中，count 变量是 私有的，外部无法直接访问。它只能通过闭包提供的 increment、decrement 和 getCount 方法来操作。

闭包的常见应用场景

1. 数据封装：使用闭包创建私有变量，只能通过特定方法访问和修改。

2. 函数柯里化（Currying）：将一个接受多个参数的函数转换成多个单参数函数，每个返回一个新的函数，直到所有的参数都被传递。

3. 延迟执行：通过闭包实现延迟执行的功能，比如使用 setTimeout、setInterval。

示例 3：闭包与事件处理

闭包也常用于事件处理器中，确保在事件触发时能够访问到特定的变量。

function setupButton(id) {

  let buttonClicked = 0;

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

}

setupButton('btn1');
setupButton('btn2');