WeakMap 是 JavaScript 中唯一支持弱引用的内置结构，以 DOM 节点为键时不影响垃圾回收，避免内存泄漏；其键必须为对象、不可遍历，适合托管私有状态。
WeakMap 是 JavaScript 中唯一能实现“弱引用”的内置数据结构，它让 DOM 节点作为键时不会阻止垃圾回收——只要节点从 DOM 中移除且无其他强引用，其对应 WeakMap 条目会自动消失。这正是为 DOM 绑定私有业务状态、避免内存泄漏的理想方案。
为什么不用普通对象或 Map？
普通对象或 Map 会持有对 DOM 节点的强引用，即使节点已被 remove() 或页面导航离开，只要 Map 里还存着它，它就无法被 GC 回收，导致内存持续占用。而 WeakMap 的键是“弱持有”的：它不计入引用计数，节点一旦失去所有强引用（如从 DOM 移除、变量被覆盖），就会被自动清理，连带其在 WeakMap 中的值也一同释放。
标准用法：用节点作键，存私有状态对象
只需一个全局 WeakMap 实例，把 DOM 节点作为 key，任意 JS 值（推荐对象）作为 value：
const nodeState = new WeakMap();
function initButton(node) {
// 确保只初始化一次
if (!nodeState.has(node)) {
nodeState.set(node, {
clickedCount: 0,
lastActiveAt: Date.now(),
isProcessing: false
});
}
}
function handleClick(node) {
const state = nodeState.get(node);
if (state) {
state.clickedCount++;
state.lastActiveAt = Date.now();
}
}
注意：WeakMap 的键必须是对象（如 Element），不能是字符串或数字；且无法遍历、无法获取键列表——这反而是优点：保障了状态的私有性和不可枚举性。
配合事件监听器，彻底解耦生命周期
常有人把事件监听器和状态混在一起，手动 removeEventListener，容易遗漏。用 WeakMap 可以让状态与监听器“共生共灭”：
- 监听器函数保持匿名或通过闭包捕获节点，但不把节点存在外部变量中
- 状态全托管给 WeakMap，无需手动清理
- 节点被移除后，WeakMap 条目自动失效，后续
get(node)返回undefined，可安全跳过逻辑
例如：
button.addEventListener('click', () => {
const state = nodeState.get(button);
if (!state) return; // 节点可能已销毁
if (state.isProcessing) return;
state.isProcessing = true;
apiCall().finally(() => state.isProcessing = false);
});
进阶技巧：封装成可复用的 State Manager
为避免每个模块都创建 WeakMap，可抽象一层：
class NodeState {
#map = new WeakMap();
get(node) {
return this.#map.get(node) ?? (this.#map.set(node, {}).get(node));
}
set(node, partial) {
let state = this.#map.get(node);
if (!state) {
state = {};
this.#map.set(node, state);
}
Object.assign(state, partial);
}
}
const uiState = new NodeState();
uiState.set(myInput, { isValid: true, error: null });
console.log(uiState.get(myInput).isValid); // true
这样既保持 WeakMap 的自动回收能力，又提供更友好的 API，且多个模块可共享同一实例而不冲突。
