一次“诡异”的内存泄漏
程序员小王最近接手了一个前端项目，页面中有一个动态表格，每次切换数据时都会新增大量DOM元素。然而，用户反馈页面越用越卡，甚至频繁崩溃。小王检查代码后发现，虽然每次切换时都移除了旧的DOM节点，但内存却未被释放。他百思不得其解，直到同事提醒：“试试用 WeakMap 管理节点数据。”一周后，内存泄漏问题奇迹般消失了……
这个故事背后，正是今天的主角——WeakMap，一个能帮你优雅解决内存问题的JavaScript工具。
一、WeakMap是什么？
WeakMap 是ES6引入的一种特殊数据结构，它与普通的 Map 类似，但有一个关键区别：它的键（Key）必须是对象，且这些键是“弱引用”的。
- 弱引用：如果键对象没有其他引用，垃圾回收机制（GC）会自动回收该对象，并连带删除
WeakMap中对应的键值对。 - 不可枚举：无法直接遍历
WeakMap中的键或值，也没有size属性。
const weakMap = new WeakMap();
const obj = { id: 1 };
weakMap.set(obj, "私有数据"); // 键必须是对象
console.log(weakMap.get(obj)); // 输出：私有数据
二、WeakMap与Map的核心区别
| 特性 | WeakMap | Map |
|---|---|---|
| 键类型 | 仅对象 | 任意类型（包括基本类型） |
| 垃圾回收 | 自动回收无引用的键和值 | 需手动删除 |
| 可枚举性 | 不支持遍历、无size属性 | 支持遍历、可获取大小 |
| 适用场景 | 内存敏感、临时数据管理 | 通用键值存储 |
我们来看看下面这个示例：
// 场景：Map可能导致内存泄漏
let map = new Map();
let obj = { data: "重要数据" };
map.set(obj, "元数据");
// 即使obj被置空，Map仍保留键值对，内存未被释放
obj = null;
// WeakMap自动回收
let weakMap = new WeakMap();
let obj = { data: "重要数据" };
weakMap.set(obj, "元数据");
// 对象被回收后，WeakMap中的键值对自动消失
obj = null;
三、WeakMap的四大应用场景
1. 管理DOM元素的私有数据
将DOM节点作为键，存储与之关联的临时数据（如事件监听器、状态），当节点被移除时，数据自动清理
const domData = new WeakMap();
const button = document.querySelector("#submit");
domData.set(button, { clicks: 0 });
button.addEventListener("click", () => {
const data = domData.get(button);
data.clicks++;
console.log(`按钮点击次数：${data.clicks}`);
});
2. 实现类的私有属性
通过 WeakMap 模拟类的私有变量，避免外部直接访问
const privateData = new WeakMap();
class User {
constructor(name) {
privateData.set(this, { name });
}
getName() {
return privateData.get(this).name;
}
}
3. 缓存计算结果
为对象缓存耗时计算结果，当对象不再使用时，缓存自动失效
const cache = new WeakMap();
function heavyCompute(obj) {
if (cache.has(obj)) return cache.get(obj);
const result = /* 复杂计算 */;
cache.set(obj, result);
return result;
}
4. 解决循环引用问题
在深拷贝或序列化对象时，使用 WeakMap 记录已处理对象，避免无限循环。
function deepClone(obj, map = new WeakMap()) {
if (map.has(obj)) return map.get(obj);
const clone = { ...obj };
map.set(obj, clone);
for (let key in obj) {
clone[key] = deepClone(obj[key], map);
}
return clone;
}
四、使用WeakMap的注意事项
- 键必须为对象：基本类型（如字符串、数字）无法作为键。
- 避免长期引用：若键对象被其他强引用持有，
WeakMap的回收机制会失效。 - 兼容性：IE11及以下浏览器不支持，可通过Babel等工具转译。
何时选择WeakMap？
WeakMap 是内存管理的“隐形守护者”，尤其适合以下场景：
- 需要关联对象与数据，但不想干扰垃圾回收。
- 数据生命周期与对象绑定，对象销毁时数据应自动清除。
- 避免内存泄漏，提升应用性能。
下次当你面对“幽灵般”的内存问题时，不妨试试 WeakMap，或许它就是那把解决问题的金钥匙。
🔥 关注我的公众号「哈希茶馆」一起交流更多开发技巧
