无需登录 数据私有 本地保存

WeakMap/WeakSet 内存回收演示 - 弱引用可视化

12
0
0
0

WeakMap / WeakSet 弱引用可视化

直观理解弱引用与垃圾回收机制 — 对比 Map/Set 的强引用行为

强引用 弱引用 已回收 ━ 实线:强引用 ┅ 虚线:弱引用
|
📦 对象列表: 尚未创建对象,点击"创建对象"开始
🗺️Map 0
强引用键 → 强引用值
阻止GC
👻WeakMap 0
弱引用键 → 值
不阻止GC
📋Set 0
强引用值
阻止GC
👻WeakSet 0
弱引用值
不阻止GC
操作日志
🟢 工具就绪 — 创建对象开始演示弱引用与GC机制
常见问题 & 知识点
WeakMap 和 Map 的核心区别是什么?

Map 对键和值都是强引用。只要 Map 存在,其中的键对象就不会被垃圾回收(GC),即使没有其他代码引用该对象。

WeakMap 对键是弱引用。如果键对象失去了所有强引用,GC 会回收它,WeakMap 中对应的条目也会自动消失。WeakMap 的值是强引用,但键被回收后值也会被释放。

这导致 WeakMap 不可迭代(无法遍历所有键),因为键可能随时被 GC 回收。

WeakSet 和 Set 的区别?为什么需要 WeakSet?

Set 对每个值持有强引用,会阻止 GC 回收其中的对象。

WeakSet 对值持有弱引用,不阻止 GC。WeakSet 中的值必须是对象(不能是原始类型)。

典型应用场景:标记对象是否被处理过(如防止循环引用),而不影响对象的生命周期。WeakSet 同样不可迭代

WeakMap/WeakSet 的典型使用场景有哪些?
  • 缓存数据:使用 WeakMap 缓存计算结果,当源对象被销毁时缓存自动清除,避免内存泄漏。
  • 私有属性:使用 WeakMap 存储对象的私有数据,外部无法枚举或访问。
  • DOM 节点元数据:为 DOM 节点关联额外数据,节点移除后数据自动清理。
  • 标记追踪:使用 WeakSet 标记已访问的对象(如深拷贝时防止循环引用)。
为什么 WeakMap 的键必须是对象?

弱引用的概念只对对象有意义。原始值(字符串、数字等)在 JS 中按值传递,没有引用概念,也无法被 GC 回收。只有对象是通过引用管理的,GC 通过追踪对象引用来判断是否回收。因此 WeakMap 的键和 WeakSet 的值都必须是对象。

FinalizationRegistry 是什么?如何用它检测 GC?

FinalizationRegistry 是 ES2021 引入的 API,允许在对象被 GC 回收后执行回调。本工具使用它来实际检测对象是否已被回收。

注意:GC 时机由 JS 引擎决定,不可预测。FinalizationRegistry 的回调可能延迟触发,不应依赖它执行关键逻辑。它最适合用于调试、监控和教学演示。

垃圾回收(GC)何时触发?我能手动触发吗?

JS 引擎的 GC 时机是自动且不可预测的,通常在内存压力增大时触发。普通 JavaScript 代码无法强制触发 GC(除非使用 Chrome 的 --expose-gc 标志并调用 window.gc())。

本工具中,"释放强引用"后对象进入可回收状态,等待 GC 实际执行。FinalizationRegistry 会在 GC 发生后通知我们。