闭包（Closure）

介绍

在 JavaScript 中，闭包（Closure）是一个非常重要且实用的概念，它是函数和其周围词法环境的组合体，这个环境包含了函数被创建时所能访问的所有变量和其他资源。

简单来说，当一个内部函数能够访问并操作外部函数作用域中的变量，即使外部函数已经执行完毕（即外部函数的作用域理论上应该被销毁），但因为内部函数仍然存在，并保持着对外部函数作用域的引用，所以这些变量得以保留，这就形成了闭包。

下面通过一个简单的示例来说明闭包的原理：

function outerFunction() {
  var outerVariable = 'Hello, '; // 外部局部变量

  function innerFunction(name) {
    // 内部函数（闭包）
    console.log(outerVariable + name); // 访问外部函数作用域中的变量
  }

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

var greet = outerFunction(); // 执行外部函数，返回内部函数并赋值给greet
greet('World'); // 输出 "Hello, World"，即使outerFunction已经执行完毕，innerFunction仍能访问outerVariable

// 这里展示了闭包的两个关键特性：
// 1. innerFunction 记住了 outerVariable 的值，尽管它是在 outerFunction 执行上下文中定义的。
// 2. 即使 outerFunction 已经执行结束，由于 innerFunction 被返回并赋给了 greet，因此 outerVariable 通过闭包保持活动状态。

在这个例子中，innerFunction 就是一个闭包，因为它在其自身的作用域内仍然能够访问 outerFunction 作用域内的 outerVariable 变量。即使 outerFunction 执行完毕后，innerFunction 通过闭包机制保有对 outerVariable 的访问权，在后续调用中依然能够正确输出结果。

应用

闭包在 JavaScript 中有多种实际应用场景，以下是一些常见的例子：

1. 封装私有变量

闭包可以用来模拟类的私有属性和方法。例如，在一个构造函数中定义并返回一个对象，该对象的方法利用闭包访问构造函数内部的私有变量。

function Counter() {
  var count = 0; // 私有变量

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

  return {
    increase: increment, // 返回的对象通过increment方法访问count，形成闭包
  };
}

var counter = new Counter();
counter.increase(); // 输出：1

2. 事件监听器与回调函数

在 JavaScript 中，通常会将函数作为事件处理器传递给 DOM 元素。这些函数即使在事件触发时（如点击按钮）执行，也能够保持对定义时作用域内变量的访问。

function createButton(id, text) {
  var button = document.createElement('button');
  button.id = id;

  button.addEventListener('click', function () {
    console.log('Clicked on button with id:', this.id); // 使用闭包捕获button.id
  });

  button.textContent = text;
  return button;
}

document.body.appendChild(createButton('myButton', 'Click me'));

3. 定时器与延时执行

setTimeout 或 setInterval 的回调函数同样维持了外部函数的作用域，因此可以在回调中操作外部变量。

function delayedAlert(message, delay) {
  setTimeout(function () {
    alert(message); // 即使delay时间过后，message仍能被正确访问到
  }, delay);
}

delayedAlert('Hello from a closure!', 2000);

4. 模块化设计

利用闭包实现模块模式，隐藏模块内部状态，只暴露必要的接口。

var myModule = (function () {
  var privateVar = 'This is private';

  function privateFunction() {
    console.log(privateVar);
  }

  return {
    publicMethod: function () {
      privateFunction(); // 内部方法调用私有函数，闭包确保privateVar的安全性
    },
  };
})();

myModule.publicMethod(); // 可以调用publicMethod，但不能直接访问privateVar或privateFunction

5. 缓存计算结果

利用闭包存储先前计算的结果，避免重复计算。

function expensiveCalculation(value) {
  let cache = {};

  return function cachedCalculation(newValue) {
    if (newValue in cache) {
      return cache[newValue];
    } else {
      let result = performExpensiveOperation(newValue);
      cache[newValue] = result;
      return result;
    }
  };
}

let memoizedCalc = expensiveCalculation();
memoizedCalc(10); // 第一次计算
memoizedCalc(10); // 第二次从缓存中获取结果

以上只是闭包在 JavaScript 中的部分应用实例，实际上它在异步编程、函数式编程以及各种需要维持变量状态的场景中都有广泛的应用。