在 ES2021 中，引入了两个新的特性：WeakRef 和 Finalizers。这两个特性的引入，为前端开发带来了更多的便利性和灵活性。本篇文章将详细介绍这两个特性的概念、使用方法和注意事项，希望能够对读者有所帮助。
WeakRef
WeakRef 是一个新的构造函数，可以用来创建一个弱引用对象。弱引用对象是指，当被引用的对象没有被其他强引用对象引用时，它会被自动回收。
创建 WeakRef 对象的方法如下：
const obj = { name: '张三' };
const weakRef = new WeakRef(obj);这里，我们创建了一个名为 obj 的对象，并将它传入了 WeakRef 构造函数中，生成了一个 WeakRef 对象 weakRef。当 obj 没有被其他强引用对象引用时，它会被自动回收，weakRef 也会变成 null。
我们可以通过 WeakRef 对象的 deref 方法获取被引用的对象：
const obj = { name: '张三' };
const weakRef = new WeakRef(obj);
const derefObj = weakRef.deref();如果 obj 被回收，derefObj 就会变成 undefined。
需要注意的是，WeakRef 只能引用对象，不能引用原始类型的值。如果要引用原始类型的值，需要将它们包装成对象。
const str = 'hello'; const weakRef = new WeakRef(new String(str));
Finalizers
Finalizers 是一个新的 API，可以用来注册一个函数，该函数会在对象被回收时自动执行。Finalizers 的使用方法如下：
const obj = { name: '张三' };
const finalizer = () => console.log(`对象 ${obj.name} 已被回收`);
new FinalizationRegistry(key => finalizer(key)).register(obj, 'key');这里，我们创建了一个名为 obj 的对象，并将它注册到 FinalizationRegistry 中，当 obj 被回收时，finalizer 函数会被自动执行。
需要注意的是，Finalizers 只能用来监听对象的回收，不能用来控制对象的回收。
示例代码
下面是一个使用 WeakRef 和 Finalizers 的示例代码：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
-
----- --------- - --- -- --------------- ----------- -------
-------- ------ -
----- ------ - --- -------------
----- ------- - --- ----------------
--- ------------------------------------------------ --------
-----------------------------
-
-------这里，我们定义了一个 Person 类，用来创建一个人物对象，并将它传入 WeakRef 构造函数中，生成 WeakRef 对象。然后，我们将 person 对象注册到 FinalizationRegistry 中，当 person 被回收时，finalizer 函数会被自动执行。最后，我们通过 deref 方法获取被引用的 person 对象，输出它的名字。
运行上面的代码，输出如下：
Person { name: '张三' }
对象 张三 已被回收可以看到，我们成功地使用了 WeakRef 和 Finalizers 来引用和监听一个对象的回收。这个例子也说明了 WeakRef 和 Finalizers 的使用方法和注意事项。
总结
本文详细介绍了 ES2021 中的 WeakRef 和 Finalizers，包括它们的概念、使用方法和注意事项。WeakRef 可以用来创建一个弱引用对象，当被引用的对象没有被其他强引用对象引用时，它会被自动回收。Finalizers 可以用来注册一个函数，该函数会在对象被回收时自动执行。这两个特性的引入，为前端开发带来了更多的便利性和灵活性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/667fe8d6dc1ed1a61beb0eaf