WeakMap 能防止 DOM 内存泄漏，因其对键使用弱引用，当 DOM 节点被移除且无其他强引用时，对应条目自动被垃圾回收，无需手动清理。
WeakMap 是 JavaScript 中专门用于解决 DOM 节点关联数据时内存泄漏问题的理想工具。它对键（key）使用弱引用，当 DOM 节点被移除且无其他引用时，WeakMap 中对应的条目会自动被垃圾回收器清理，无需手动解绑。
为什么 WeakMap 能防止 DOM 内存泄漏
传统方式（如用普通 Object 或 Map 存储 DOM 数据）会让 DOM 节点被强引用，即使节点已从文档中移除、也未被 JS 其他地方引用，只要 Object/Map 还持有它，它就无法被回收——这就是典型的内存泄漏。
WeakMap 的键必须是对象（如 DOM 节点），且对键是弱引用：只要该节点在全局或作用域中没有其他强引用，即便 WeakMap 里还“存着”，它也能被 GC 回收。WeakMap 自身不会阻止节点销毁。
典型使用场景：为动态 DOM 节点添加私有元数据
比如给每个按钮添加点击计数、状态标记、配置对象等，又不想污染 DOM 属性（如 dataset）或暴露到全局：
立即学习“Java免费学习笔记（深入）”；
- 创建一个模块级 WeakMap 实例，作为“私有存储”
- 以 DOM 节点为 key，任意数据（对象、数字、函数）为 value
- 节点被 remove() 或父元素 innerHTML 重写后，若无其他引用，其对应 entry 自动失效
示例：
const buttonData = new WeakMap();
function initButton(btn) {
// 为每个按钮存私有数据
buttonData.set(btn, { clicks: 0, disabledUntil: null });
btn.addEventListener('click', () => {
const data = buttonData.get(btn);
data.clicks++;
console.log(`已点击 ${data.clicks} 次`);
});
}
// 后续插入按钮
document.body.append(Object.assign(document.createElement('button'), { textContent: '点我' }));
initButton(document.querySelector('button'));
// 即使按钮 later 被 document.body.removeChild(btn)，buttonData 中的记录也会被自动清理
注意 WeakMap 的限制与替代方案对比
WeakMap 不支持遍历（无 keys()、values()、entries()）、不能传入非对象作 key、不能获取 size —— 这些“缺点”恰恰是它实现弱引用和自动清理的前提。
- 别用 WeakMap 做需要枚举或长期持久化数据的场景（此时应选 Map + 手动清理）
- 如果需兼容老旧环境（IE），可用 Symbol + 数据对象模拟，但需自行管理生命周期
- dataset 和自定义属性适合简单字符串数据；WeakMap 更适合复杂对象、闭包、私有状态
配合框架或现代实践的小建议
在 React/Vue 等框架中，组件卸载时通常会清理事件监听器，但若你在副作用中额外维护了 DOM 元数据，仍推荐用 WeakMap 封装，避免意外强引用。
构建可复用的 DOM 工具库（如 tooltip、modal 插件）时，把实例状态存在 WeakMap 中，能天然保证节点销毁即状态释放，大幅降低使用者出错概率。
