weakmap 适合存储 dom 元素与事件处理器的映射，因其键为弱引用，元素被移除后自动清理，避免内存泄漏；而普通 map 或对象会强引用键，阻碍垃圾回收。
WeakMap 是 JavaScript 中用于建立弱引用映射的内置对象，特别适合将数据与 DOM 元素关联而不阻止元素被垃圾回收。用它来存储 DOM 元素与事件处理句柄的对应关系，能有效避免内存泄漏——尤其在动态添加/移除节点频繁的场景中。
为什么用 WeakMap 而不是普通 Map 或对象？
DOM 元素作为键时，WeakMap 允许键是弱引用：当某个 DOM 元素从文档中被移除且无其他引用时，WeakMap 中对应的条目会自动被清除，不会阻碍垃圾回收。而普通对象或 Map 会持有对键的强引用，容易导致已卸载的 DOM 节点及其绑定的数据长期驻留内存。
基本用法：绑定与查找处理函数
创建一个 WeakMap 实例，以 DOM 元素为键、事件处理函数（或包含 handler 的对象）为值：
const handlerMap = new WeakMap();
function addClickHandler(element, handler) {
// 确保每个元素只存一个 handler（或用数组存多个）
handlerMap.set(element, handler);
}
function handleClick(event) {
const element = event.target;
const handler = handlerMap.get(element);
if (typeof handler === 'function') {
handler.call(element, event);
}
}
// 使用示例
const btn = document.getElementById('myBtn');
addClickHandler(btn, () => console.log('按钮被点击'));
btn.addEventListener('click', handleClick);
进阶：支持多个事件类型和清理逻辑
实际项目中常需为同一元素绑定多种事件，或在元素移除前主动解绑。可封装成更健壮的管理器：
const elementHandlers = new WeakMap();
function on(element, type, handler) {
if (!elementHandlers.has(element)) {
elementHandlers.set(element, new Map());
}
const handlers = elementHandlers.get(element);
if (!handlers.has(type)) {
handlers.set(type, new Set());
}
handlers.get(type).add(handler);
const listener = (e) => handler(e, element);
element.addEventListener(type, listener);
// 可选：监听元素被移除（MutationObserver 或 cleanup 函数）
return () => {
element.removeEventListener(type, listener);
handlers.get(type).delete(handler);
};
}
// 使用
const cleanup = on(document.getElementById('input'), 'input', (e) => {
console.log('输入变化:', e.target.value);
});
// 后续可调用 cleanup() 手动解绑（非必需，WeakMap 自动清理键失效后的内容）
注意事项与常见陷阱
WeakMap 的限制决定了它的使用边界，需注意以下几点：
- WeakMap 的键必须是对象（如 DOM 元素），不能是字符串、数字或 null
- 无法遍历或获取所有键/值，也没有 size 属性，调试时不能直接查看内容
- 不要试图用 WeakMap 替代事件委托；它解决的是“绑定关系持久化”问题，不是事件分发机制
- 若 handler 是箭头函数或匿名函数，每次调用 on 都会生成新函数，导致重复存储——建议复用具名函数或缓存 handler 引用
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
