JavaScript 闭包解释：为什么你的函数记住了一切

Source: Dev.to

JavaScript 闭包解释

闭包是能够记住其外部作用域变量的函数，即使外部函数已经返回。理解闭包可以解决常见问题，如 var 循环错误、React 中的陈旧 Hook、以及内存泄漏。

关键要点

• 闭包捕获的是引用，而不是值——函数持有的是变量的指针，而不是快照。
• 词法作用域——函数能够访问的内容取决于它在代码中写在哪里，而不是在何处被调用。
• 循环中的 var 与 let——var 共享同一个变量；let 为每次迭代创建新的绑定。
• React Hook 与陈旧闭包——闭包可能捕获旧的状态。可通过依赖数组或 useRef 来修复。
• 记忆化（Memoization）——闭包可以存储计算结果以提升性能。
• 内存泄漏——闭包会保持引用存活。务必清理事件监听器和定时器。

示例：计数器

function makeCounter() {
  let count = 0; // closure keeps this alive
  return function increment() {
    count++;
    return count;
  };
}

const counter = makeCounter();
counter(); // 1
counter(); // 2
counter(); // 3

闭包使得 count 即使在 makeCounter 返回后仍然保持。

React 陈旧闭包修复

useEffect(() => {
  const id = setInterval(() => fetchResults(query), 2000);
  return () => clearInterval(id);
}, [query]); // dependency array ensures fresh state

闭包遍布 JavaScript 的各个角落；理解它们对于编写可预测且高效的代码至关重要。