闭包的双刃剑：JavaScript 最强大却最容易踩坑的特性

闭包（Closure）无疑是 JavaScript 中最强大、最迷人的特性之一。它赋予了函数访问其定义时所在词法环境的能力，即使该函数在其定义的作用域之外执行。
凭借闭包，我们可以实现 数据封装、模块化、柯里化 等高级编程技巧。

然而，闭包就像一把双刃剑——带来强大能力的同时，也埋下了许多隐患。稍有不慎，就会掉入闭包的陷阱，导致 内存泄漏、意外的变量共享 和 不可预期的副作用。本文就来系统梳理闭包的常见陷阱及解决方案。

1. 内存泄漏：那些“永不消逝”的变量

闭包最常见的问题就是内存泄漏。当一个闭包引用了外部函数的变量，而这个闭包又被长期持有（例如作为事件处理程序或定时器回调），外部变量就无法被垃圾回收。

❌ 问题示例

function createHandler() {
  let largeObject = new Array(1000000).fill("data"); // 创建一个大对象

  return function() {
    console.log("Handler clicked");
    // 没有直接使用 largeObject, 但闭包导致 largeObject 无法被回收
  };
}

document.getElementById("myButton").addEventListener("click", createHandler());

在上面例子中，largeObject 永远保存在内存中，导致内存泄漏。

✅ 解决方案

解除引用

let handler = createHandler();
document.getElementById("myButton").addEventListener("click", handler);

// 当不再需要事件处理程序时
document.getElementById("myButton").removeEventListener("click", handler);
handler = null; // 解除闭包引用

避免不必要的闭包：如果函数内部的变量不需要被外部使用，就不要制造闭包。
显式清理变量：将不再需要的外部变量设置为 null，帮助垃圾回收器回收内存。

2. 循环中的闭包：意料之外的共享

在循环中使用闭包，常常会出现变量共享的问题。

❌ 问题示例

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 100);
}
// 输出: 5 5 5 5 5

原因是：setTimeout 是异步的，当回调执行时，循环已经结束，i 的值变成了 5。由于 var 没有块级作用域，所有回调共享的是同一个 i。

✅ 解决方案

使用 let

for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 100);
}
// 输出: 0 1 2 3 4

使用 IIFE（立即执行函数）

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(() => console.log(i), 100);
  })(i);
}

使用 bind

for (var i = 0; i < 5; i++) {
  setTimeout(console.log.bind(null, i), 100);
}

3. 意外的副作用：闭包修改共享变量

闭包能够访问外部变量，这让数据封装成为可能，但如果处理不当，就可能产生副作用。

❌ 问题示例

function outer() {
  let counter = 0;

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

const myCounter = outer();
myCounter.increment();
myCounter.increment();
console.log(myCounter.getCount()); // 输出 2

虽然这里 counter 被封装在 outer 内部，但闭包依然能随意修改它。