WeakMap与WeakSet：内存泄漏的沉默终结者

揭秘WeakMap如何通过弱引用解决DOM节点或对象关联数据的内存泄漏，实现一个自动清理的事件监听管理器。 · 难度：入门 · +10XP

WeakMap与WeakSet：内存泄漏的沉默终结者

一般对象和Map会保持强引用，导致无法被垃圾回收，从而引发内存泄漏。WeakMap只持有弱引用，当键对象被回收时，对应的值也会自动清除。本教程将构建一个基于WeakMap的“私有属性”系统，以及一个不泄露的事件绑定库——当DOM节点移除时，所有相关监听器自动解绑。

const listeners = new WeakMap();
function addListener(el, type, handler) {
  if (!listeners.has(el)) {
    listeners.set(el, []);
  }
  listeners.get(el).push({ type, handler });
  el.addEventListener(type, handler);
}
function cleanup(el) {
  const list = listeners.get(el);
  if (list) {
    list.forEach(({type, handler}) => el.removeEventListener(type, handler));
    listeners.delete(el);
  }
}
// 当el被GC时，listeners中对应条目自动消失