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

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

13
0
0
0
WeakMap
核心数据结构

WeakMap 是 JavaScript 中一种以对象作为键的弱引用键值对集合。与普通 Map 不同,WeakMap 对其键持有弱引用,即如果键对象在外部不再被引用,GC 可以随时回收该键值对,即使 WeakMap 本身仍存在。WeakMap 的键必须是对象,且不可迭代,没有 keys()、values()、entries() 方法,也没有 size 属性。

与工具关系:工具中的 WeakMap 面板实时展示弱引用键的状态变化,当外部引用释放后 GC 可回收对应键值对。
WeakSet

WeakSet 是 JavaScript 中一种弱引用集合,仅存储对象值。与普通 Set 不同,WeakSet 对其元素持有弱引用,外部引用消失后 GC 可随时回收。WeakSet 不可迭代,无 size 属性,也不支持 clear() 方法。

与工具关系:工具中的 WeakSet 面板展示弱引用元素的生命周期,与普通 Set 的强引用行为形成对比。
Map

Map 是 JavaScript 中一种强引用键值对集合,键可以是任意类型(包括原始值)。Map 对键和值都持有强引用,即使键对象在外部不再被引用,只要 Map 存在,对应的键值对就不会被 GC 回收。Map 支持迭代、遍历和 size 属性。

与工具关系:工具中的 Map 面板展示强引用键的行为,即使外部释放引用,集合内仍保留对象。
Set

Set 是 JavaScript 中一种强引用集合,存储唯一值。Set 对其元素持有强引用,外部引用消失后,只要 Set 仍存在,元素就不会被回收。Set 支持迭代、遍历和 size 属性,与 WeakSet 的不可迭代特性形成对比。

与工具关系:工具中的 Set 面板展示强引用值的行为,与 WeakSet 的弱引用值进行并行对比。
垃圾回收(GC)

垃圾回收是 JavaScript 引擎自动管理内存的机制。GC 会定期检查所有对象的引用状态,回收不再被任何变量引用的对象所占用的内存。GC 的触发时机由引擎内部算法决定(如 V8 的分代回收),开发者无法精确控制。对于弱引用对象,GC 会在外部引用消失后将其回收。

与工具关系:工具通过 GC 模拟按钮触发回收过程,展示弱引用对象在 GC 前后的状态变化。
弱引用(Weak Reference)

弱引用是一种特殊的引用类型,它允许引用对象但不阻止 GC 回收该对象。当一个对象仅被弱引用持有时,GC 可以随时回收它。JavaScript 中 WeakMap 和 WeakSet 使用弱引用作为其键或值的引用方式。弱引用的核心价值在于避免内存泄漏,尤其在缓存和关联数据存储场景中。

与工具关系:工具的核心主题就是弱引用可视化,通过三种引用状态的对比帮助理解弱引用的实际行为。
强引用(Strong Reference)

强引用是 JavaScript 中最常见的引用类型,只要强引用存在,GC 就不会回收被引用的对象。普通变量赋值、数组元素、Map/Set 的键值对都属于强引用。强引用是对象存活的保证,但也可能导致内存泄漏(如循环引用、未清理的事件监听器等)。

与工具关系:工具中的强引用对象以高亮色块显示,始终可见不可回收,与弱引用形成直观对比。
FinalizationRegistry

FinalizationRegistry 是 ES2021 引入的 API,用于在对象被 GC 回收时执行清理回调。它允许开发者注册一个回调函数,当注册的目标对象被回收时该回调会被调用。构造函数接收一个回调函数,register() 方法将目标对象与回调绑定。注意:GC 时机不可预测,回调执行不保证及时,且在不同引擎中行为可能有差异。

与工具关系:工具集成了 FinalizationRegistry 监听面板,实时显示 GC 回调的触发情况,帮助理解回调的实际执行时机。
内存泄漏(Memory Leak)

内存泄漏是指程序申请的内存使用完毕后未能正确释放,导致可用内存持续减少。JavaScript 中常见的内存泄漏包括:未清理的全局变量、闭包引用、事件监听器未移除、定时器未清理等。弱引用(WeakMap/WeakSet)是预防内存泄漏的重要手段,因为它允许 GC 在对象不再被需要时自动回收。

与工具关系:工具通过模拟引用管理场景,演示如何使用弱引用来避免内存泄漏,以及强引用可能导致的泄漏风险。
引用类型(Reference Type)
基础概念

在 JavaScript 中,引用类型描述了变量与对象之间的关系。原始值(string、number、boolean 等)按值传递,而对象按引用传递。理解引用类型是理解弱引用的前提:强引用阻止 GC 回收,弱引用不阻止 GC 回收。引用类型的正确管理是编写高性能、无泄漏 JavaScript 应用的基础。

与工具关系:工具通过可视化面板将抽象的引用类型概念具象化,帮助用户直观理解不同引用类型对 GC 行为的影响。