WeakMap 能自动回收 DOM 节点关联状态，因其键为弱引用，节点被移除且无其他强引用时，对应键值对自动消失；而 Map 会阻止垃圾回收，易致内存泄漏。
WeakMap 为什么能自动回收 DOM 节点关联的状态
因为 WeakMap 的键是弱引用，当 DOM 节点被移除且无其他强引用时，整个键值对会自动从 WeakMap 中消失，不需要手动清理。这和 Map 不同：Map 会阻止垃圾回收，哪怕节点早已从 DOM 中 detach。
典型误用场景：用 Map + node.id 或 node.dataset.id 当 key，结果节点删了状态还留着，内存持续增长。
关键前提：WeakMap 的 key 必须是对象（DOM 节点符合），value 可以是任意类型；但不能用字符串、数字或 null 当 key，否则会直接报错 TypeError: Invalid value used as weak map key。
如何正确初始化并绑定状态到单个节点
WeakMap 实例必须在闭包或模块作用域中创建一次，避免全局污染或重复实例导致状态隔离失效：
const nodeState = new WeakMap(); // ✅ 在模块顶层定义
function attachStatus(node, data) {
if (!(node instanceof Node)) return;
nodeState.set(node, { ...data, createdAt: Date.now() });
}
function getStatus(node) {
return nodeState.get(node) ?? null;
}
// 使用示例
const btn = document.querySelector('#submit');
attachStatus(btn, { disabledUntil: Date.now() + 5000 });
console.log(getStatus(btn)); // { disabledUntil: ..., createdAt: ... }
- 不要在每次调用函数时
new WeakMap()，否则旧状态永远无法访问 - 确保传入的是真实 DOM 节点（
Element、Document等），document.getElementById()返回null时要提前判断 - 不建议用
node.cloneNode()后的状态继承——克隆节点是新对象，WeakMap不会自动复制关联数据
批量绑定与事件监听中的常见陷阱
给多个节点绑定状态时，容易在事件回调中意外保留对节点的强引用，从而阻碍回收。例如：
// ❌ 危险：箭头函数捕获了 node，形成强引用链
nodes.forEach(node => {
node.addEventListener('click', () => {
const state = nodeState.get(node); // node 被闭包持有
doSomething(state);
});
});
更安全的做法是只在事件处理中通过 this 或 event.target 动态获取节点：
// ✅ 安全：事件触发时才取节点，无长期持有
function handleClick(event) {
const node = event.currentTarget;
const state = nodeState.get(node);
if (state) doSomething(state);
}
nodes.forEach(node => node.addEventListener('click', handleClick));
- 避免在
setTimeout、Promise.then等异步回调中直接引用节点变量 - 如果必须延迟操作，改用
WeakRef（较新 API，注意兼容性）或显式检查节点是否仍存在于 DOM：node.isConnected - 框架组件（如 React）中需注意：JSX 中的内联函数也会隐式捕获 props/state，应优先用 useCallback 缓存 handler
调试与验证 WeakMap 是否真正在回收
WeakMap 本身不可遍历，也不能直接查看内容，所以不能靠 console.log(nodeState) 检查。验证是否生效，得靠间接方式：
- 打开 Chrome DevTools → Memory 面板 → “Take heap snapshot”，筛选
WeakMap条目数量变化 - 强制触发 GC：在 console 执行
gc()（仅限开启 --js-flags="--expose-gc" 的 Chromium 浏览器） - 写一个可销毁的测试节点：
const el = document.createElement('div'); nodeState.set(el, { x: 1 }); el = null;，稍后 snapshot 中应看不到该条目 - 若发现状态残留，大概率是某处还有强引用 —— 比如事件监听器没卸载、闭包未释放、或用了
Map替代WeakMap
真正难排查的是跨模块共享 WeakMap 实例时的耦合：A 模块设了状态，B 模块忘了清空就重用节点，结果读到旧数据。这种问题不会导致内存泄漏，但会引发逻辑错误 —— WeakMap 解决不了业务语义一致性。
