JavaScript · 闭包与词法作用域

场景 1 · 防抖: 搜索框 300ms 合并请求

输入联想每敲一键发一次请求, 服务器被打爆还闪屏。闭包保存 timer 与上下文, 静默期后才真正触发:

function debounce(fn, wait = 300) {
  let timer = null;                    // 闭包状态: 藏在返回函数里
  return function (...args) {
    clearTimeout(timer);               // 重置上一轮
    timer = setTimeout(() => fn.apply(this, args), wait);
  };
}
input.addEventListener('input', debounce(e => search(e.target.value)));

请求量从"每键一次"降到"停手一次", QPS 降 90%+; apply(this, args) 保住调用方上下文。

场景 2 · memoize: 参数不变就不重算

价格计算函数每次都要拉汇率、跑 200ms, 列表页一次调 500 次。闭包字典做结果缓存:

function memoize(fn) {
  const cache = new Map();             // 闭包持有, 外部摸不到
  return (...args) => {
    const key = JSON.stringify(args);
    if (!cache.has(key)) cache.set(key, fn(...args));
    return cache.get(key);             // 关键: 同参直接命中
  };
}
const quote = memoize(calcPrice);

同参命中率 80%+, 页面计算耗时从 10s 降到 2s; 注意缓存键要含全部影响结果的入参。

场景 3 · once: 防重复提交与幂等初始化

"提交"按钮连点 3 次生成 3 笔订单; SDK init 被多处调用重复连接。闭包守卫只放行第一次:

function once(fn) {
  let called = false, result;
  return (...args) => {
    if (called) return result;         // 关键: 之后全返回首跑结果
    called = true;
    return (result = fn(...args));
  };
}
const submit = once(async (form) => createOrder(form));

场景 4 · React stale closure: 计数按钮点快了丢次数

批量导入进度用 setCount(count + 1), 连续触发时读到的都是旧快照, 100 次只 +37:

// 错: count 是本次渲染的快照, 批量更新时已过期
onChange={() => setCount(count + 1)}
// 对: 函数式更新, 拿到队列里最新的值
onChange={() => setCount(c => c + 1)}
// 跨渲染读最新值(如定时器里), 用 ref:
const latest = useRef(count);
latest.current = count;
useEffect(() => {
  const id = setInterval(() => report(latest.current), 1000);
  return () => clearInterval(id);
}, []);

场景 5 · 动态列表事件绑定: 闭包带上下文

1000 行表格每行删除按钮要带自己的 id, 传统做法 dataset 存值再解析, 闭包直接捕获行对象更干净:

rows.forEach(row => {
  const btn = el('button', '删除');
  btn.onclick = () => removeRow(row.id);   // 关键: 每轮闭包捕获自己的 row
  tr.append(btn);
});
// 注意: 重建列表前先解绑, 否则旧 row 全被拽在闭包里不释放

场景 6 · 柯里化: 给埋点函数预置公共参数

埋点接口 20 个参数, 业务侧只想传事件名与属性。闭包固定公共参数, 生成专用函数:

const track = (common) => (event, props = {}) =>
  beacon({ ...common, event, ...props });

const trackApp = track({ app: 'mall', ver: '2.3.0' });
trackApp('add_cart', { sku: 'A1' });   // 公共字段自动带上

场景 7 · 单测隔离: 闭包状态污染

模块级缓存闭包让测试互相污染: 用例 A 写入的缓存被用例 B 命中, 单跑绿合跑红。工厂化让每例拿到全新实例:

// 错: 模块顶层创建, 所有测试共享同一个 cache 闭包
export const store = createStore();
// 对: 导出工厂, 测试 setup 里各造各的
export const createStore = () => { let cache = new Map();
  return { get: k => cache.get(k), set: (k, v) => cache.set(k, v) };
};
// 每个用例: const store = createStore();  隔离干净

场景 8 · 闭包泄漏: 图表页内存只涨不降

切换 20 个报表后页面上 GB。heap snapshot 显示大量 Retained by "refreshChart" 闭包 — 监听器没解绑, 大数据被拽住:

// 泄漏形态: 全局事件持有含 50MB 数据的闭包
window.addEventListener('resize', () => chart.refresh(bigData));
// 修复: 命名函数 + 生命周期对称解绑
const onResize = () => chart.refresh(bigData);
window.addEventListener('resize', onResize);
onUnmount(() => window.removeEventListener('resize', onResize));

切换 50 次内存曲线平稳; 排查路径: Memory 面板拍快照 → 按 Retainers 找闭包 → 对应解绑。

场景 9 · 私有状态选型: 闭包 vs #field

类字段 #count 与闭包都能私有, 选型看需求: 闭包适合少量实例/函数式, #field 适合类体系且调试器可见:

// 闭包版: 状态在构造器作用域里, 调试面板看 Closure
class RateLimiter1 {
  constructor(max) { let used = 0;
    this.tryAcquire = () => used < max && (used++, true);
  }
}
// #field 版: 真·对象私有, 子类不可见但 DevTools 直接可查
class RateLimiter2 { #used = 0; #max;
  constructor(max) { this.#max = max; }
  tryAcquire() { return this.#used < this.#max && (this.#used++, true); }
}

场景 10 · SSR 下的模块级闭包: 用户 A 看到用户 B 的数据

Node 服务里模块级 let currentUser 被所有请求共享, 高并发下串号。请求级状态必须每请求新建:

// 错: 模块级闭包状态, 全进程共享
let currentUser = null;
app.use((req, res, next) => { currentUser = req.user; next(); });
// 对: 状态挂到请求对象/AsyncLocalStorage, 每请求独立
const { AsyncLocalStorage } = require('async_hooks');
const als = new AsyncLocalStorage();
app.use((req, res, next) => als.run({ user: req.user }, next));
// 任意深度: als.getStore().user  —— 跟踪异步链且请求间隔离