WeakMap 能避免内存泄漏，因其键对 DOM 元素持弱引用，元素被移除后可被 GC 回收；而 Map 等强引用会阻止回收。应以元素为 key、全局 WeakMap 管理状态，避免反向引用和原始值作 key。
WeakMap 是解决 DOM 元素私有状态存储与内存泄漏问题的理想工具——它允许你把状态绑定到元素上，又不阻止元素被垃圾回收。
为什么 WeakMap 能避免内存泄漏
WeakMap 的键必须是对象（如 DOM 元素），且对键持有弱引用：当 DOM 元素从文档中移除、且无其他强引用时，即使 WeakMap 中还存着它，该元素仍能被 GC 回收。而 Map、普通对象属性或闭包缓存都会形成强引用，导致元素及其关联数据长期驻留内存。
用 WeakMap 存储私有状态的正确姿势
核心原则：只用 DOM 元素作 key，值可以是任意数据（对象、函数、原始值包装等）。不要反向引用 DOM 元素，也不要让状态对象意外持有对元素的引用。
- 创建一个全局（模块级）WeakMap 实例，用于统一管理
- 每次需要读写某个元素的状态时，直接用该元素作为 key 操作 WeakMap
- 避免在状态对象中保存 this、element 或事件处理器中的 element 引用
- 不依赖 WeakMap 的遍历能力（它不可枚举），状态访问必须基于已知元素实例
实际例子：为按钮添加防抖点击状态
你想记录每个按钮是否处于“点击后禁用中”，且不干扰其生命周期：
const buttonState = new WeakMap();
function disableAfterClick(button, ms = 1000) {
// 读取当前状态（安全，元素不存在则返回 undefined）
const state = buttonState.get(button) || { disabled: false };
if (state.disabled) return;
// 设置禁用状态
Object.assign(state, { disabled: true });
buttonState.set(button, state);
button.disabled = true;
setTimeout(() => {
// 元素可能已被移除，先检查是否存在
if (button.ownerDocument && button.isConnected) {
button.disabled = false;
// 可选：清理已过期的状态（非必需，WeakMap 会自动清理）
buttonState.delete(button);
}
}, ms);
}
// 使用
document.querySelectorAll('button[data-debounce]').forEach(btn => {
btn.addEventListener('click', () => disableAfterClick(btn));
});
注意事项与常见陷阱
- 不能用字符串、数字等原始值作 key：WeakMap 只接受对象，DOM 元素天然符合
- 避免跨作用域意外保留元素引用：比如在定时器、fetch 回调里保存 element，会导致无法回收
- WeakMap 不是“自动清理状态”的银弹：它只解决引用问题，逻辑层面仍需合理设计（如及时 delete 或复用状态）
- 调试时看不到内容：WeakMap 无法遍历，可用 console.log(buttonState.get(el)) 单点查看，或开发时临时换用 Map 辅助调试
