随着前端技术的不断发展，网页应用越来越复杂，内存管理也成为了前端开发中的一个重要问题。JavaScript 中的垃圾回收机制可以自动回收不再使用的对象，但是对于一些长期存在的对象，如缓存、事件监听器等，可能会占用大量的内存空间，导致页面性能下降。在 ES11 中，新增了 WeakRefs 和 FinalizationRegistry 两个特性，可以帮助我们更好地管理内存，本文将对其进行详细介绍。
WeakRefs
WeakRefs 是一种弱引用，它不会阻止被引用对象的垃圾回收。通常我们使用的引用都是强引用，即使没有被引用的对象，它们也不会被回收。但是 WeakRefs 与之不同，如果被引用的对象没有被其他地方强引用，就会被垃圾回收。
WeakRefs 可以用来解决一些内存泄漏的问题，如缓存、事件监听器等。在使用 WeakRefs 时，我们需要先创建一个 WeakRef 对象，将需要引用的对象作为参数传入：
const obj = { name: 'Tom' };
const weakRef = new WeakRef(obj);可以看到，创建 WeakRef 对象时，我们并没有强引用 obj，而是使用了一个弱引用来引用它。如果 obj 没有被其他地方强引用，它将会被垃圾回收。此时我们可以通过 WeakRef 对象来获取 obj：
const obj = { name: 'Tom' };
const weakRef = new WeakRef(obj);
const objCopy = weakRef.deref();deref() 方法可以获取被引用对象的引用，但是需要注意的是，如果被引用对象已经被回收，deref() 方法会返回 undefined。
FinalizationRegistry
FinalizationRegistry 是一个回调函数注册表，它可以用来在对象被垃圾回收时执行一些操作。与 WeakRefs 类似，FinalizationRegistry 也不会阻止被引用对象的垃圾回收。
FinalizationRegistry 的使用需要先创建一个注册表对象，然后向其中注册需要回调的对象和回调函数：
const registry = new FinalizationRegistry((heldValue) => {
console.log(`${heldValue} has been collected.`);
});
const obj = { name: 'Tom' };
registry.register(obj, 'myObj');可以看到，创建 FinalizationRegistry 对象时，我们需要传入一个回调函数，它会在被注册对象被垃圾回收时执行。同时，我们使用 register() 方法向注册表中注册需要回调的对象和回调函数。当被注册对象被垃圾回收时，回调函数会被执行。
需要注意的是，回调函数中的 heldValue 参数并不是被注册的对象本身，而是一个包含被注册对象的引用的对象。因此，如果需要访问被注册对象本身，需要使用 heldValue 属性访问。
示例代码
下面是一个使用 WeakRefs 和 FinalizationRegistry 的示例代码，用来管理一个简单的缓存：
-- -------------------- ---- -------
----- ----- -
------------- -
---------- - --- ------
------------- - --- -------------------------- -- -
--------------------- --- ---- -------------
-----------------------
---
-
-------- ------ -
------------------- --- ----------------
--------------------------- -----
-
-------- -
----- ------- - --------------------
-- --------- -
------ ----------------
-
------ ----------
-
-
----- ----- - --- --------
----- ---- - - ----- ----- --
----- ---- - - ----- ------- --
----------------- ------
----------------- ------
------------------------------- -- - ----- ----- -
------------------------------- -- - ----- ------- -
---- - ----------
----- -- --------
------------------------------- -- ---------在这个示例中，我们创建了一个 Cache 类，它使用 WeakRefs 和 FinalizationRegistry 来管理缓存。在 set() 方法中，我们使用 WeakRefs 来引用需要缓存的对象，并使用 FinalizationRegistry 来注册需要回调的对象和回调函数。在 get() 方法中，我们通过 WeakRefs 对象来获取缓存的对象，如果对象已经被回收，会返回 undefined。
在最后一行代码中，我们手动触发了垃圾回收。通过观察控制台输出，可以看到被回收的对象的信息，以及被回收后缓存中的数据被正确地删除了。
总结
本文介绍了 ES11 中的 WeakRefs 和 FinalizationRegistry 两个特性，并给出了一个使用示例，用来管理一个简单的缓存。使用 WeakRefs 和 FinalizationRegistry 可以帮助我们更好地管理内存，避免内存泄漏，提高页面性能。在实际开发中，我们可以根据具体情况选择合适的内存管理方式，提高我们的代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6516a12095b1f8cacdef61d3