如何利用 JavaScript 的 WeakMap 和 WeakSet 实现弱引用以避免内存泄漏？-js教程-PHP中文网

如何利用 JavaScript 的 WeakMap 和 WeakSet 实现弱引用以避免内存泄漏？

紅蓮之龍

发布： 2025-09-24 21:47:01

原创

641人浏览过

WeakMap和WeakSet提供弱引用机制，其键或值对象在无其他强引用时可被垃圾回收，避免内存泄漏。普通对象或Map/Set会强引用键值，导致长期缓存临时对象引发内存泄漏；而WeakMap仅接受对象键，用于存储私有数据如DOM元素元信息，WeakSet适合标记对象状态如初始化标识，二者均不阻止垃圾回收。例如用WeakMap关联DOM元素与状态，元素被移除后数据自动清理；用WeakSet确保对象只初始化一次，对象销毁后标记不影响回收。但WeakMap/WeakSet有限制：键必须是对象，不支持遍历、size、clear等操作，因内容可能随时变化。故适用于内部缓存、状态标记等场景，不适合通用集合使用。合理利用弱引用特性可有效防止意外延长对象生命周期。

如何利用 javascript 的 weakmap 和 weakset 实现弱引用以避免内存泄漏？

JavaScript 的 WeakMap 和 WeakSet 提供了弱引用机制，能有效避免内存泄漏。它们的关键特点是：不会阻止垃圾回收器回收其键或值对象。这意味着当你不再从其他地方引用这些对象时，即使它们还在 WeakMap 或 WeakSet 中，也能被自动清除。

理解弱引用与内存泄漏的关系

在普通对象或 Map/Set 中，只要一个对象作为键或值存在，它就不会被垃圾回收，这可能导致内存泄漏，尤其在长期存活的对象中缓存了大量临时对象时。

而 WeakMap 和 WeakSet 的键必须是对象，且是“弱”持有的——如果这个对象被回收，对应的条目也会自动消失，无需手动清理。

使用 WeakMap 存储私有数据或元信息

WeakMap 常用于关联对象与其私有数据，而不影响该对象的生命周期。

例如：

你想为某个 DOM 元素添加一些额外状态，但又不希望这个状态阻止元素被移除后释放内存。

立即学习“Java免费学习笔记（深入）”；

const elementData = new WeakMap();

function setMetadata(element, data) {
  elementData.set(element, data);
}

function getMetadata(element) {
  return elementData.get(element);
}

// 使用
const div = document.createElement('div');
setMetadata(div, { clicked: false, timestamp: Date.now() });

// 当 div 被移除并失去引用时，WeakMap 中的数据也会被自动清理
div = null; // 可被回收

登录后复制

这里，DOM 元素作为键，即使页面卸载或元素被删除，只要没有其他引用，它就能被回收，WeakMap 不会阻止这一点。

使用 WeakSet 管理对象状态标记

WeakSet 适合用来标记某些对象是否处于特定状态，比如是否已被初始化、是否正在处理等。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

例如：

你有一个函数只允许对对象初始化一次，可以用 WeakSet 避免重复操作。

const processedObjects = new WeakSet();

function initialize(obj) {
  if (processedObjects.has(obj)) {
    return;
  }
  // 执行初始化逻辑
  obj.initialized = true;
  processedObjects.add(obj);
}

const user = {};
initialize(user); // 执行
initialize(user); // 忽略

// 当 user 不再被引用时，WeakSet 不会阻止其回收

登录后复制

WeakSet 中的引用是弱的，所以当 user 被设为 null 并无其他引用时，它仍可被垃圾回收。