闭包：揭秘 JavaScript 中变量作用域的隐藏力量

2023-11-19 23:41:48







## 揭开闭包的神秘面纱

闭包是 JavaScript 中的内置机制，允许内部函数访问外部函数作用域中的变量。这些变量即使在外部函数执行结束后也不会被销毁，而是长期驻扎在内存中，可供内部函数之后使用。闭包可以帮助我们避免变量全局污染，并把变量独立到独立的作用域中，作为私有成员存在。

闭包在 JavaScript 中应用广泛，例如：

* 事件处理：闭包可以在事件处理函数中访问事件对象，即使该事件已经发生。
* 私有变量：闭包可以创建私有变量，只允许特定函数访问和修改这些变量。
* 函数柯里化：闭包可以创建部分应用函数，将函数的参数预先定义好，从而创建新的函数。
* 模块化开发：闭包可以将相关代码封装在一个模块中，防止变量污染其他模块。

## 闭包的实际应用

让我们通过一些实际的例子来进一步理解闭包的用法。

### 事件处理

```javascript
// 添加点击事件监听器
const button = document.getElementById('button');
button.addEventListener('click', function() {
  // 访问外部函数作用域中的变量
  console.log(message);
});

// 在外部函数中定义变量
const message = 'Hello, world!';

在这个例子中，闭包允许我们访问外部函数中的变量 message，即使该变量在事件处理函数执行之前已经定义。

私有变量

// 创建闭包，将变量私有化
const createCounter = () => {
  // 私有变量
  let count = 0;

  // 返回一个函数来递增计数器
  return () => {
    count++;
    return count;
  };
};

// 创建计数器实例
const counter1 = createCounter();
const counter2 = createCounter();

// 递增计数器
console.log(counter1()); // 1
console.log(counter2()); // 1

在这个例子中，闭包将变量 count 私有化，使外部代码无法直接访问和修改它。

函数柯里化

// 创建函数柯里化函数
const curry = (fn) => {
  return (...args1) => {
    return (...args2) => {
      return fn(...args1, ...args2);
    };
  };
};

// 创建加法函数
const add = (a, b) => {
  return a + b;
};

// 将加法函数柯里化
const addCurried = curry(add);

// 使用柯里化函数
console.log(addCurried(1)(2)); // 3

在这个例子中，我们使用闭包来实现函数柯里化。柯里化允许我们将一个多参数函数分解为一系列单参数函数，从而使函数更易于组合和重用。

模块化开发

// 创建模块
const module = (function() {
  // 私有变量
  let count = 0;

  // 私有函数
  const incrementCount = () => {
    count++;
  };

  // 公开函数
  return {
    incrementCount: incrementCount,
    getCount: () => {
      return count;
    }
  };
})();

// 使用模块
module.incrementCount();
console.log(module.getCount()); // 1