闭包究竟怎么用？除了作用域你还理解它的优势吗？

在JavaScript的世界里，闭包就像一把打开高阶编程之门的钥匙。当80%的开发者还在用作用域解释闭包时，真正的高手已经在用闭包实现模块化封装、状态持久化和高阶函数等进阶操作。本文将带你突破常规认知，探索闭包在实战中的六大高阶用法。

闭包是函数与其词法环境的绑定组合。当内部函数访问外部函数变量时，即使外部函数已执行完毕，这些变量依然被保留在内存中。

function outer() {
  let count = 0;
  return function() {
    return ++count;
  };
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

误区一：闭包会导致内存泄漏
实际上现代JS引擎的垃圾回收机制已能有效处理闭包引用，关键是要正确管理不再需要的闭包。

通过IIFE（立即执行函数）创建私有作用域：

const module = (function() {
  let privateVar = 'secret';
  
  return {
    getSecret: () => privateVar,
    setSecret: (val) => { privateVar = val }
  };
})();

创建参数化函数模板：

function multiplier(factor) {
  return x => x  factor;
}

const double = multiplier(2);
console.log(double(5)); // 10

在事件处理中保持状态：

function createButton() {
  let clickCount = 0;
  
  document.querySelector('btn').addEventListener('click', () => {
    console.log(`点击次数：${++clickCount}`);
  });
}

通过闭包缓存计算结果：

function memoize(fn) {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args);
    return cache.has(key) ? cache.get(key) : cache.set(key, fn(...args)).get(key);
  };
}

处理AJAX请求的状态隔离：

function createFetchWrapper() {
  let isLoading = false;
  
  return async (url) => {
    if(isLoading) return;
    isLoading = true;
    try {
      return await fetch(url);
    } finally {
      isLoading = false;
    }
  };
}