ES12 中引入了两个新的概念：WeakRef 和 FinalizationRegistry。它们可以有效地解决 JavaScript 中内存泄漏的问题。本文将深入探讨这两个概念的使用方法和优劣势，并为读者提供实用的示例代码。
弱引用（WeakRef）
在 JavaScript 中，一旦一个对象不再被引用，它的内存就可以被垃圾回收器释放。但是，在一些情况下，我们需要对已经不再被引用的对象进行操作，比如在一个事件监听器中移除已经被销毁的 DOM 元素，避免浪费内存。这时候，JavaScript 中的 WeakRef 就能派上用场了。
WeakRef 是一个对象引用的弱引用。与传统的对象引用不同，WeakRef 只会在所引用的对象存在时才会返回相应的引用。一旦被引用的对象被垃圾回收器回收，WeakRef 就只会返回 undefined。
以下是创建 WeakRef 的示例代码：
const obj = { name: 'Peter' };
const ref = new WeakRef(obj);WeakRef 的调用方法与传统的引用相同，只不过需要使用 deref 方法获取存储对象的引用。以下是示例代码：
if (ref.deref()) {
// 操作已经存在的对象
} else {
// 对象已经被回收了
}终止器（FinalizationRegistry）
在使用 WeakRef 时，我们可以判断一个对象是否已经被回收。但是，一旦发现一个对象已经被回收，我们还需要手动清理所有相关的资源，否则这些资源就会造成内存泄漏。在这种情况下，JavaScript 中的 FinalizationRegistry 可以帮助我们解决这个问题。
FinalizationRegistry 可以在 JavaScript 对象被垃圾回收器回收时触发某些任务，比如清理资源或执行回调函数。它可以为已经被回收的对象设置一个终止器函数，以便在对象被回收时执行相应的操作。
以下是创建 FinalizationRegistry 的示例代码：
const registry = new FinalizationRegistry(obj => {
// 执行某些任务，比如清理资源或执行回调函数
});在创建 FinalizationRegistry 后，我们可以通过 register 方法为一个对象设置终止器：
registry.register(obj, 'some data');
当一个被注册的对象被垃圾回收器回收时，终止器函数会被触发。可以通过 unregister 方法删除已经被注册的对象：
registry.unregister(obj);
优劣势
使用 WeakRef 和 FinalizationRegistry 可以有效地解决内存泄漏的问题，但是它们也有一些限制和缺陷。
优势
避免内存泄漏：使用 WeakRef 和 FinalizationRegistry 可以避免某些对象造成的内存泄漏。
提高性能：使用 WeakRef 和 FinalizationRegistry 可以减少垃圾回收器的工作量，从而提高应用程序的性能。
缺陷
特定场景使用：WeakRef 和 FinalizationRegistry 仅在特定的场景下使用，不是所有应用程序都需要这些特性。
兼容性问题：WeakRef 和 FinalizationRegistry 目前仅在最新的浏览器和 Node.js 版本中可用，不兼容旧版浏览器。
示例代码
以下是一个使用 WeakRef 和 FinalizationRegistry 的示例代码：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
------- -
---------------- -- ---- -- ---------------
-
-
----- -------- - --- --------------------------- -- -
--------------------------- --- ---- ------- -------------
---
-------- ------------------ -
----- ------ - --- -------------
------------------------- ----- -------
------ --- ----------------
-
--- -------- - ----------------------
--- ------- - ---------------------
------------------------- -- --- -- ---- -- -----
------------------------ -- --- -- ---- -- ----
-------- - -----
------- - -----
-- -----------
------------- -- -
---------------------
-- ------在上面的示例代码中，我们创建了一个 Person 类，用于表示一个人。我们使用 WeakRef 和 FinalizationRegistry 来管理创建的人物对象。在创建一个人物对象时，我们将其添加到 FinalizationRegistry 中以便在对象被回收时触发清理操作。在程序执行过程中，我们为两个不同的人物对象创建了一个 WeakRef，用于跟踪这些对象。最后，我们将这些 WeakRef 设为 null，等待垃圾回收器回收这些对象。
总结
本文详细介绍了 JavaScript 中的 WeakRef 和 FinalizationRegistry，分析了它们的使用方法和优劣势，并提供了实用的示例代码。这些新特性可以帮助开发者有效地解决内存泄漏的问题，提高应用程序的性能。但是，它们仅在特定场景下使用，不是所有应用程序都需要这些特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d414648841e98949ffc40