如何用 WeakMap 为 DOM 节点绑定私有的业务状态而不必担心节点删除后的内存泄漏-js教程-PHP中文网

weakmap 是唯一能安全绑定 dom 节点私有状态且不引发内存泄漏的原生方案，因其键为弱引用，节点被移除后自动失效，无需手动清理；普通对象或 map 会强引用节点导致内存泄漏；weakmap 键必须为对象（如 dom 节点），传入原始值会抛错；应封装为模块单例并校验键类型；其值仍需避免被闭包长期持有，且不可遍历或获取 size。

如何用 weakmap 为 dom 节点绑定私有的业务状态而不必担心节点删除后的内存泄漏

WeakMap 是唯一能安全绑定 DOM 节点私有状态且不引发内存泄漏的原生方案。 它不阻止节点被 GC 回收，只要节点从 DOM 中移除、又没被其他 JS 变量强引用，对应条目就自动失效——你不用手动 delete，也不用监听 DOMNodeRemoved（已废弃）或 MutationObserver 做清理。

为什么不能用普通对象或 Map 存 DOM 状态

普通对象（{}）或 Map 对键是强引用：哪怕节点早已被 remove() 或父元素 innerHTML = '' 清空，只要它还“挂”在 Map 里，GC 就无法回收该节点及其关联的整个 DOM 子树。

现象：performance.memory.usedJSHeapSize 持续上涨，DevTools 的 Memory 面板显示大量 detached DOM trees
典型错误写法：const cache = new Map(); cache.set(document.getElementById('btn'), { loading: true });
后果：节点被移除后，cache 仍持有对它的强引用，内存永远不释放

WeakMap.set() 必须传对象，且不能是原始值

WeakMap 的 set() 方法只接受对象作键，DOM 节点天然符合；但若误传字符串 ID、数字索引或 null，会直接抛出 TypeError: Invalid value used as weak map key。

正确：weakMap.set(btn, { count: 0, pending: false });
错误：weakMap.set('btn-1', ...)、weakMap.set(42, ...)、weakMap.set(null, ...)
注意：document.querySelector() 返回 null 时，必须先判空再 set，否则报错

封装成模块级单例并做类型防护

不要每次都在函数内新建 WeakMap，应统一导出一个实例，并在 set 前校验键是否为真实 DOM 节点——避免把普通对象、Window、Array 等误当节点传入。

const nodeState = new WeakMap();

function setNodeState(node, state) {
  if (!(node instanceof Node)) return;
  nodeState.set(node, { ...nodeState.get(node), ...state });
}

function getNodeState(node) {
  return nodeState.get(node) ?? null;
}

// 使用
const btn = document.querySelector('button');
setNodeState(btn, { disabled: true });
console.log(getNodeState(btn)); // { disabled: true }