在 ECMAScript 2021 中，新增了两个重要的特性，那就是 WeakRef 和 FinalizationRegistry。
WeakRef 是一种类型，允许您创建一个对对象的弱引用。这意味着，如果对象没有其他 强引用，则它可能被垃圾回收。
FinalizationRegistry 与 WeakRef 类似，但它允许您注册对目标对象的回调。当对目标对象的所有强引用都消失时，这些回调将被调用，允许您执行必要的清理操作。
在本文中，我们将重点介绍如何在前端应用中使用这两个新特性，以及如何正确地管理内存。
创建 WeakRef
要使用 WeakRef，您需要调用其构造函数，并传入要保持弱引用的对象。例如：
const target = {
name: 'Alex',
age: 30
};
const targetWeakRef = new WeakRef(target);在这个示例中，我们创建了一个名为 target 的对象，并将其传递给 WeakRef 的构造函数。此后，我们可以使用 targetWeakRef 变量来访问此弱引用。
请注意，如果一个对象正在这样被保留，那么这个对象占用的内存不会被计算在 JavaScript 进程的内存使用量中。这是因为 JavaScript 引擎知道，如果它需要释放更多内存，它可以安全地回收这个对象。
检查 WeakRef 是否存在
在某些情况下，您可能需要确定一个对象是否存在于 WeakRef 中。要执行此操作，请调用 WeakRef 的 deref() 方法。例如：
-- -------------------- ---- ------- ----- ------ - - ----- ------- ---- -- -- ----- ------------- - --- ---------------- -------------------------- ------------------- ----- ---------- - ---- - ------------------- --- ---- ------- ------------- -
在这个示例中，我们使用 deref() 方法检查对象是否存在于 WeakRef 中。如果对象存在，我们将在控制台上打印 "Target still exists!"，否则我们将打印 "Target has been garbage collected."。
创建 FinalizationRegistry
FinalizationRegistry 是一种类型，允许您注册回调，以便在目标对象的所有强引用都消失时执行清理操作。要使用 FinalizationRegistry，请调用其构造函数，并传递一个名为 cleanupCallback 的回调函数。
-- -------------------- ---- ------- ----- ------ - - ----- ------- ---- -- -- ----- -------- - --- --------------------------- -- - ------------------- --------- --- ---- ------- ------------- --- ------------------------- -------
在这里，我们创建了一个 FinalizationRegistry，并注册了一个回调函数，该回调函数在目标对象被垃圾回收时被调用。此后，我们使用 register() 方法将目标对象注册到 registry 中。
请注意，我们在 register() 方法的第二个参数中传递了一个字符串 "foo"，这是一个标识符。这个标识符将在调用回调函数时作为参数传递。
检查 FinalizationRegistry 是否存在
在某些情况下，您可能需要确定一个对象是否存在于 FinalizationRegistry 中。要执行此操作，请调用 FinalizationRegistry 的 has() 方法。例如：
-- -------------------- ---- ------- ----- ------ - - ----- ------- ---- -- -- ----- -------- - --- --------------------------- -- - ------------------- --------- --- ---- ------- ------------- --- ------------------------- ------- ------------------------- ------------------- -- ----- -------------- - ---- - ------------------- --- ---- ---------------- -
在这个示例中，我们使用 has() 方法检查对象是否存在于 FinalizationRegistry 中。如果对象存在，我们将在控制台上打印 "Target is still registered!"，否则我们将打印 "Target has been unregistered."。
总结
本文介绍了如何在前端应用程序中使用 ECMAScript 2021 中的 WeakRef 和 FinalizationRegistry。通过使用 WeakRef，您可以创建一个对对象的弱引用，允许 JavaScript 引擎在需要更多内存时安全地回收该对象。通过使用 FinalizationRegistry，您可以注册一个回调函数，以便在目标对象的所有强引用都消失时执行清理操作。
在编写使用 WeakRef 和 FinalizationRegistry 的代码时，请务必小心管理内存。如果使用不当，这些技术可能会导致内存泄漏或其他问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66560dd8d3423812e4ab7193