WeakMap 能解决 DOM 节点元数据绑定的内存泄漏问题：它弱引用节点，节点被移除后元数据自动清理，避免强引用导致的无法回收。
WeakMap 能解决 DOM 节点元数据绑定的什么问题
直接在 DOM 节点上挂属性（比如 node.__myData = {...}）看似简单，但会干扰节点自身属性、污染原型、且无法随节点回收自动清理——尤其在第三方库或长生命周期页面中容易引发内存泄漏。WeakMap 是唯一能安全关联 DOM 节点并避免强引用的原生方案：它只接受对象作为键，且不阻止垃圾回收，节点被移除后对应条目自动失效。
为什么必须用 WeakMap 而不是 Map 或普通对象
Map 和普通对象都会对键（即 DOM 节点）保持强引用，即使节点已从 DOM 树中移除、也无 JS 代码再持有它，Map 里的条目仍存在，导致内存无法释放。WeakMap 的键是「弱持有」的，只要节点没其他引用，GC 就能回收它，同时 WeakMap 内部条目也随之消失。
- WeakMap 的键只能是对象，DOM 节点天然符合
- WeakMap 不支持遍历（
keys()、values()、entries()都不可用），这是设计使然——防止意外延长对象生命周期 - 不能用字符串、数字、null 等做键，否则会报
TypeError: Invalid value used as weak map key
典型使用模式：封装一个可复用的元数据管理器
不要每次都在全局新建 WeakMap，应封装成模块级单例，并提供 get/set/delete 接口，避免多个 WeakMap 实例造成混乱：
const elementMeta = new WeakMap();
export function setMeta(node, key, value) {
if (!elementMeta.has(node)) {
elementMeta.set(node, Object.create(null));
}
elementMeta.get(node)[key] = value;
}
export function getMeta(node, key) {
return elementMeta.has(node) ? elementMeta.get(node)[key] : undefined;
}
export function deleteMeta(node, key) {
if (elementMeta.has(node)) {
delete elementMeta.get(node)[key];
}
}
这样做的好处是：语义清晰、类型安全（node 必须是真实 DOM 节点）、避免重复初始化空对象；注意不要把 setMeta(node, 'data', {...}) 中的值设为大对象而不清理，虽然 WeakMap 不阻止节点回收，但值本身若被其他地方闭包持有，仍可能泄漏。
常见陷阱和调试建议
WeakMap 的「不可见性」让它难调试：控制台里看不到内容，console.log(weakMap) 只显示空对象。出问题时容易误判为没存进去。
- 检查是否传入了合法节点：
node instanceof Node，document.createElement('div')可以，'div'字符串不行 - 动态创建的节点（如
innerHTML插入）需在插入后立即调用setMeta，不能依赖事件委托前的缓存 - 框架（如 React）中慎用：React 可能复用或替换 DOM 节点，旧节点被丢弃后元数据自动消失，但你可能误以为还能读到
- 想验证是否生效？临时加个
setTimeout(() => console.log(elementMeta), 0)并强制 GC（Chrome DevTools → Memory → Collect garbage），再看是否清空
WeakMap 不是万能胶水，它只解决「绑定—释放」的生命周期对齐问题；如果你需要按 key 全局查找所有绑定了某类元数据的节点，WeakMap 本身做不到——得配合额外的 Set 或 Map 做索引，但那就得自己管理引用了。
