WeakMap 适合绑定 DOM 元素因其键为弱引用，DOM 元素被移除且无其他引用时可被垃圾回收，对应条目自动消失，避免内存泄漏。
WeakMap 是 JavaScript 中专门用于“弱引用键”的集合类型，特别适合将数据与 DOM 元素绑定——既避免内存泄漏，又无需手动清理。
为什么 WeakMap 适合绑定 DOM 元素
DOM 元素是对象，可作为 WeakMap 的键；WeakMap 的键是弱引用，当 DOM 元素从文档中移除且无其他引用时，它能被垃圾回收，同时对应条目自动消失。这解决了用普通 Map 或对象做键时常见的内存泄漏问题。
基础用法：创建 WeakMap 并绑定状态
只需声明一个 WeakMap 实例，用 DOM 元素作键、任意值（如对象）作值：
const elementState = new WeakMap();
<p>// 绑定状态
const button = document.querySelector('#myBtn');
elementState.set(button, { clicked: 0, disabled: false });</p><p>// 读取状态
const state = elementState.get(button);
console.log(state.clicked); // 0</p><p>// 更新状态（需先 get 再修改）
if (state) {
state.clicked++;
}
封装成可复用的工具函数
为提升可维护性，可封装成带默认初始化和类型安全的状态管理器：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 用闭包保存 WeakMap，避免全局污染
- getOrInit 方法确保每次获取都返回结构一致的对象
- 不依赖元素 ID 或 class，完全基于引用，天然支持动态插入/删除的元素
function createStateStore(defaults = {}) {
const store = new WeakMap();
return {
get(el) {
if (!store.has(el)) {
store.set(el, { ...defaults });
}
return store.get(el);
},
set(el, partial) {
const state = this.get(el);
Object.assign(state, partial);
},
has(el) {
return store.has(el);
}
};
}
<p>// 使用示例
const uiState = createStateStore({ visible: true, lastUpdate: 0 });</p><p>uiState.set(button, { visible: false });
console.log(uiState.get(button).visible); // false
实际场景：防抖按钮点击计数
结合事件监听，用 WeakMap 管理每个按钮的点击时间和计数，即使按钮被频繁增删也不用担心残留状态：
- 监听 click 时读取/更新 WeakMap 中的状态
- 利用时间戳实现简单防抖（例如 300ms 内只算一次）
- 元素被 remove() 后，其状态自动失效，无需调用 delete
const clickTracker = new WeakMap();
<p>document.addEventListener('click', (e) => {
const el = e.target;
if (el.matches('button[data-track]')) {
let state = clickTracker.get(el) || { count: 0, lastTime: 0 };
const now = Date.now();
if (now - state.lastTime > 300) {
state.count++;
state.lastTime = now;
clickTracker.set(el, state);
console.log(<code>按钮已点击 ${state.count} 次</code>);
}
}
});
WeakMap 不提供遍历方法（keys/values/entries），这反而是优势——它明确表达了“状态仅属于该元素，不需全局枚举”，也进一步防止误用导致的引用滞留。只要坚持用 DOM 元素本身作键，就基本规避了常见内存陷阱。
