在 ECMAScript 2021 (ES12) 中，WeakRefs 是一个新的特性，它可以很好地处理 JavaScript 中的内存泄漏问题。WeakRefs 很重要的一点就是能够将对象的引用标记成“弱引用”，当没有强引用指向该对象时，就会被垃圾回收器回收掉。
WeakRefs 是什么
在探讨 WeakRefs 的具体用法之前，我们先来了解一下它到底是什么。WeakRefs 是一种特殊的引用类型，它允许我们在不保留引用的情况下，监控对象是否已经被回收。
一般我们使用引用时，会产生一个对象到引用的映射，如下所示：
let obj = {name: 'Tom'}; // 创建一个对象
let ref = obj; // 引用该对象
...
obj = null; // 取消对该对象的引用在这个例子中，如果我们取消了对 obj 的引用，那么该对象依然保存在 ref 中。但是如果我们要销毁这个对象，需要手动地将 ref 的值设置为 null。这个过程很容易被忽略掉，从而导致内存泄漏问题。
有了 WeakRefs 就能避免这种情况的发生。WeakRefs 充当的是引用对象的一个“外部监视器”，当引用对象被垃圾回收时，WeakRefs 也会自动释放。我们可以通过 WeakRef 构造函数来创建一个 WeakRefs 对象，如下所示：
let obj = {name: 'Tom'}; // 创建一个对象
let ref = new WeakRef(obj); // 创建一个 WeakRefs 对象
...
obj = null; // 取消对该对象的引用在这个例子中，我们不需要手动地将 ref 的值设置为 null，因为当 obj 被回收时，ref 也会自动释放。
WeakRefs 的使用场景
在 Web 开发中，WeakRefs 可以用于以下场景：
监测 DOM 元素的回收
let ele = document.getElementById('my-ele');
let ref = new WeakRef(ele);
// 当创建的 DOM 元素被移除时，ref 也会被自动释放
document.body.removeChild(ele);缓存
-- -------------------- ---- -------
--- --------- - --- ----------
-------- ---------- ----- ------ -
------------------ --- ----------------
-
-------- -------- ----- -
-- -------------------- -
--- --- - -------------------
------ ------------
- ---- -
------ -----
-
-优化框架
-- -------------------- ---- -------
----- ------ -
----------- -- -
------------ - ------------------------------
-------- - --- ----------------------
-
------- -- -
-- ----------------- --- ----- -
------- -- ----------
-
----------------------------------------
-
-使用示例
下面是一个使用 WeakRefs 进行缓存的例子：
-- -------------------- ---- -------
--- ----- - --- ---------------
-------- ------- --- -
-- -------------- - -- ---------------
------------------ ------
------ -------------
- ---- -
------------------ -------
--- ------ - - - --
------------ --------
------ -------
-
-
----- ------------ -
----------- -- -
---------- - --- ----------
-
--- ----- -
------ --------------------
-
--- ----- -
--- --- - --------------------
-- ----- -
------ ------------
- ---- -
------ ----------
-
-
--- ----- ------ -
------------------- --- ----------------
-
-
--- - - ------------ -- ----- ----
--- - - ------------ -- ----- ---在上面的例子中，我们使用了一个 WeakMap 来存储对象的缓存。由于 WeakMap 中存储的是 WeakRefs 弱引用，因此当被引用的对象被垃圾回收时，WeakMap 也会自动删除对应的缓存项。
总结
使用 WeakRefs 可以提高 JavaScript 代码的可读性和可维护性，避免内存泄漏问题的发生，尤其是在处理缓存和 DOM 元素等场景中，能够帮助我们更好地管理内存。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fae2d4f6b2d6eab31acd5a