在 ES11 中，新增了一个功能强大并且十分有用的数据结构，它叫做 WeakRefs，它类似于 Map 和 Set，但同时它又是一种弱引用，不会对被引用的对象形成强引用而导致内存泄漏，这对于前端开发者来说是一个很好的消息。
WeakRefs 的用途
在前端开发中，我们通常需要用到各种数据结构来存储数据，比如数组、对象、Map、Set 等等，但是在这些数据结构中存储的数据都是强引用，也就是说一旦这些数据结构被创建出来，它们所存储的数据就一直占用内存，直到这些数据结构被显式地清除或者页面被关闭。
而 WeakRefs 就不同了，它所存储的数据是弱引用，也就是说当被引用的对象没有其他的引用时，它们就会被 GC 回收，不会导致内存泄漏。
举个例子，比如我们在页面上创建了一个对象，在一些情况下我们需要用到这个对象，但在另一些情况下我们又不需要它了，如果我们一直将这个对象存储在强引用的数据结构中，那么这个对象就一直占用内存，直到我们显式地将其清除，这会导致性能问题。
而如果我们使用 WeakRefs 来存储这个对象的引用，当这个对象不再被引用时，它就会被 GC 回收，避免了内存泄漏的问题。
WeakRefs 的使用
使用 WeakRefs 非常简单，我们可以先创建一个对象，然后使用 WeakRef 构造器来创建一个 WeakRef 实例，将刚刚创建的对象作为参数传入：
const obj = {name: 'test'};
const weakRef = new WeakRef(obj);这里的 weakRef 实际上就是一个 WeakRefs 实例，我们可以通过调用它的 deref 方法来获取被引用的对象：
const obj = {name: 'test'};
const weakRef = new WeakRef(obj);
const derefObj = weakRef.deref();
console.log(derefObj); // {name: 'test'}我们也可以通过判断 derefObj 是否为 null 来判断被引用的对象是否已经被 GC 回收了。
需要注意的是，由于 WeakRefs 弱引用的特性，我们应该在使用 deref 方法之前判断一下 weakRef 是否已经被 GC 回收了，否则 deref 方法会抛出一个 TypeError 异常。
WeakRefs 与对象的绑定
除了使用 WeakRefs 存储对象的引用，我们还可以使用它来绑定对象的属性，这样我们就可以很方便地获取这个属性的值，同时又避免了内存泄漏的问题。
具体的实现方式是在对象上新增一个 WeakMap，然后将属性名作为 key，将属性的值作为 value，最后使用 WeakRefs 存储这个 WeakMap：
-- -------------------- ---- -------
----- --- - ---
----- ------- - --- ----------
----- ------- - --- -----------------
-------- ------------- --------- ------ -
--- --- - -----------------
-- ------ -
--- - --- ----------
---------------- -----
-
----------------- -------
-
-------- ------------ --------- -
--- --- - ----------------
-- ------ ------ ----------
------ ----------------------------
-
------------- ------- --------
------------------------ --------- -- ------在上面的代码中，我们首先创建了一个空对象 obj，并创建了一个 WeakMap weakMap，然后使用 new WeakRef(weakMap) 创建了一个 WeakRefs 实例 weakRef，这样我们就可以通过 weakRef 来访问这个 WeakMap。
接着我们定义了两个函数 bindProp 和 getProp，分别用于绑定属性和获取属性的值，这里的绑定属性实际上是将属性名和属性值存储在 WeakMap 中，然后将这个 WeakMap 存储在 obj 上。
获取属性的时候我们首先通过 deref 方法获取 WeakMap，然后从中取出属性对应的值。需要注意的是，由于我们使用了 WeakRefs 弱引用的特性，所以我们需要在获取 WeakMap 之后判断一下它是否为 null，以避免程序抛出 TypeError 异常。
总结
在本文中，我们介绍了 ES11 中新增的一种数据结构 WeakRefs，它类似于 Map 和 Set，但它又是一种弱引用，不会导致内存泄漏。
我们通过示例代码演示了如何使用 WeakRefs 存储对象的引用和绑定对象的属性，并给出了一些注意事项。
使用 WeakRefs 不仅可以帮助我们避免内存泄漏的问题，也可以提高程序的性能和稳定性，特别是在处理大量数据时，使用 WeakRefs 更是一种有效的优化手段。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ac97548841e98948f6f51