You Don't Know JS 深入解析：作用域与闭包中的闭包机制

什么是闭包？

闭包是 JavaScript 中一个既强大又常被误解的概念。简单来说，闭包是指函数能够记住并访问其词法作用域，即使该函数在其词法作用域之外执行。

让我们从一个基础示例开始：

function outer() {
  var a = 2;
  
  function inner() {
    console.log(a); // 2
  }
  
  inner();
}

outer();

在这个例子中，inner 函数能够访问外部函数 outer 中的变量 a，这是通过词法作用域查找实现的。虽然这展示了嵌套作用域的概念，但还不是闭包的完整体现。

真正的闭包示例

闭包真正发挥作用是在函数在其词法作用域之外执行时：

function outer() {
  var a = 2;
  
  function inner() {
    console.log(a);
  }
  
  return inner;
}

var myFunc = outer();
myFunc(); // 2

这里发生了什么？

1. outer() 执行后返回 inner 函数
2. 我们将返回的函数赋值给 myFunc
3. 当我们调用 myFunc() 时，它仍然能够访问 outer 的作用域中的变量 a

这就是闭包的神奇之处！按照常规理解，outer 执行完毕后，它的作用域应该被销毁。但由于 inner 函数保持了对这个作用域的引用，JavaScript 引擎会保留这个作用域，这就是闭包的核心机制。

闭包的实际应用

闭包在 JavaScript 中无处不在，特别是在以下场景：

1. 定时器

function wait(message) {
  setTimeout(function timer() {
    console.log(message);
  }, 1000);
}

wait("Hello, closure!");

即使 wait 函数执行完毕，传递给 setTimeout 的回调函数仍然能够访问 message 变量。

2. 事件处理

function setupButton(buttonId, message) {
  document.getElementById(buttonId).addEventListener('click', function() {
    console.log(message);
  });
}

setupButton('myBtn', 'Button clicked!');

3. 模块模式

闭包是实现模块模式的关键：

var counter = (function() {
  var count = 0;
  
  return {
    increment: function() {
      return ++count;
    },
    decrement: function() {
      return --count;
    },
    getCount: function() {
      return count;
    }
  };
})();

counter.increment(); // 1
counter.increment(); // 2
counter.getCount();  // 2

经典循环问题

闭包在循环中常引起困惑：

for (var i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

这段代码会输出什么？不是预期的1,2,3,4,5，而是6被打印5次！这是因为所有回调函数共享同一个 i 的引用。

解决方案

1. 使用IIFE创建新作用域：

for (var i = 1; i <= 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j);
    }, j * 1000);
  })(i);
}

2. 使用let块级作用域（ES6+）：

for (let i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

闭包与性能

虽然闭包非常有用，但需要注意：

1. 闭包会阻止垃圾回收器清理不再需要的作用域
2. 过度使用闭包可能导致内存泄漏
3. 在性能关键的代码中要谨慎使用

总结

闭包不是JavaScript中需要刻意使用的特殊功能，而是编写依赖词法作用域代码时的自然结果。理解闭包的关键点：

1. 函数可以记住并访问其词法作用域
2. 即使函数在其词法作用域之外执行
3. 闭包使得回调函数、模块模式等成为可能
4. 现代JavaScript开发中闭包无处不在

当你真正理解了闭包，你会突然发现它其实一直在你的代码中默默工作着，就像《黑客帝国》中尼奥第一次看到代码雨一样，整个世界都变得不一样了！