在前端开发中，内存泄漏是一种常见的问题。内存泄漏发生时，由于无法释放内存，导致应用程序变慢，甚至崩溃。ES6 中，引入了 WeakMap 和 WeakSet 对象，以帮助开发者更好地处理内存泄漏。ES12 中，又加入了 WeakRef 和 FinalizationRegistry 相关 API，提供更强大的内存管理功能。
WeakRef
WeakRef 引用是弱引用，它在 JavaScript 引擎中并不会阻止垃圾回收器回收对象，因为弱引用并不能阻止对象的销毁。弱引用对应的存储空间是非持久化的，可能会在不可预测的时间被回收。WeakMap、WeakSet 都是基于 WeakRef 实现的。
示例代码：
let person = { name: 'jack' };
let weakRef = new WeakRef(person);
let ref = weakRef.deref();
console.log(ref.name); // 输出 "jack"
person = null;
ref = weakRef.deref();
console.log(ref); // 输出 "undefined"在示例中，我们创建了一个 person 对象，并创建了一个弱引用 weakRef，然后再通过 deref() 方法获取弱引用指向的对象。在 person 变量被赋值为 null 后，再通过 deref() 方法获取对象的值，输出 undefined。
WeakRef 主要的应用场景是缓存数据，为了减少内存占用，我们可以将一些不常用且占用内存较多的对象通过 WeakRef 进行缓存，这些对象能够被垃圾回收器及时回收，从而减少内存占用。
FinalizationRegistry
FinalizationRegistry（最终注册表）是 ES12 中新引入的一种 API，提供了一种在垃圾收集后自动清除对象的机制，它还可以管理 WeakRef 对象的回调函数。所以在使用 FinalizationRegistry 时，我们需要一个回调函数，当要回收的对象被回收时，该回调函数就会被调用。
示例代码：
-- -------------------- ---- ------- --- ---- - --- --- -------- - --- -------------------------------- -- - ---------------------- --- ---------- --------------- --- --- ------- - --- -------------- -------------------------- ----- -------- --- --- - ---------------- --------------- --- ------ -- -- ------ ---- - -----
在示例中，我们创建了一个 FinalizationRegistry 对象，同时定义了一个回调函数。然后我们创建了一个 WeakRef 对象，将其与 registry 对象进行绑定。在 item 变量为 null 后，回调函数会被自动触发，并将 heldValue 参数设置为 'some value'。
FinalizationRegistry 的主要应用场景是，当我们需要在可能出现内存泄漏的情况下，自动清除对象以及执行相关的代码时。比如当我们需要发送网络请求或者定时器任务等操作，这些操作都需要在对应的生命周期内执行，一旦意外情况出现，可能会导致内存泄漏，而 FinalizationRegistry 就可以自动清除已经不再需要的请求或者任务。
结论
ES12 中的 WeakRef 和 FinalizationRegistry 对于前端内存管理来说，提供了很好的帮助和支持。使用这两个 API，可以有效地避免内存泄漏等问题，并减少应用程序的异常情况。尤其是在实际开发场景中，使用这两个 API 可以大大提升代码的质量和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674aaf24a1ce0063549e2665