ES6 系列之 WeakMap的使用示例

Myth丶恋晨 2023-07-20 05:35 13阅读 0赞

# ES6 系列之 WeakMap的使用示例 #

> 这篇文章主要介绍了ES6 系列之 WeakMap的使用示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

### **前言** ###

我们先从 WeakMap 的特性说起，然后聊聊 WeakMap 的一些应用场景。

### **特性** ###

**1. WeakMap 只接受对象作为键名**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>const map = </code><code>new</code> <code>WeakMap();</code> <code>map.set(1, 2);</code> <code>// TypeError: Invalid value used as weak map key</code> <code>map.set(</code><code>null</code><code>, 2);</code> <code>// TypeError: Invalid value used as weak map key</code> </td> 
 </tr> 
 </tbody> 
</table>

**2. WeakMap 的键名所引用的对象是弱引用**

这句话其实让我非常费解，我个人觉得这句话真正想表达的意思应该是：

> WeakMaps hold "weak" references to key objects,

翻译过来应该是 WeakMaps 保持了对键名所引用的对象的弱引用。

我们先聊聊弱引用：

> 在计算机程序设计中，弱引用与强引用相对，是指不能确保其引用的对象不会被垃圾回收器回收的引用。 一个对象若只被弱引用所引用，则被认为是不可访问（或弱可访问）的，并因此可能在任何时刻被回收。

在 JavaScript 中，一般我们创建一个对象，都是建立一个强引用：

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>var</code> <code>obj = </code><code>new</code> <code>Object();</code> </td> 
 </tr> 
 </tbody> 
</table>

只有当我们手动设置 obj = null 的时候，才有可能回收 obj 所引用的对象。

而如果我们能创建一个弱引用的对象：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>// 假设可以这样创建一个</code> <code>var</code> <code>obj = </code><code>new</code> <code>WeakObject();</code> </td> 
 </tr> 
 </tbody> 
</table>

我们什么都不用做，只用静静的等待垃圾回收机制执行，obj 所引用的对象就会被回收。

我们再来看看这句：

> WeakMaps 保持了对键名所引用的对象的弱引用

正常情况下，我们举个例子：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>const key = </code><code>new</code> <code>Array(5 * 1024 * 1024);</code> <code>const arr = [</code> <code>&nbsp;</code><code>[key, 1]</code> <code>];</code> </td> 
 </tr> 
 </tbody> 
</table>

使用这种方式，我们其实建立了 arr 对 key 所引用的对象(我们假设这个真正的对象叫 Obj)的强引用。

所以当你设置` key = null `时，只是去掉了 key 对 Obj 的强引用，并没有去除 arr 对 Obj 的强引用，所以 Obj 还是不会被回收掉。

Map 类型也是类似：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>let map = </code><code>new</code> <code>Map();</code> <code>let key = </code><code>new</code> <code>Array(5 * 1024 * 1024);</code> &nbsp; <code>// 建立了 map 对 key 所引用对象的强引用</code> <code>map.set(key, 1);</code> <code>// key = null 不会导致 key 的原引用对象被回收</code> <code>key = </code><code>null</code><code>;</code> </td> 
 </tr> 
 </tbody> 
</table>

我们可以通过 Node 来证明一下这个问题：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 </td> 
 <td> <code>// 允许手动执行垃圾回收机制</code> <code>node --expose-gc</code> &nbsp; <code>global.gc();</code> <code>// 返回 Nodejs 的内存占用情况，单位是 bytes</code> <code>process.memoryUsage(); </code><code>// heapUsed: 4640360 ≈ 4.4M</code> &nbsp; <code>let map = </code><code>new</code> <code>Map();</code> <code>let key = </code><code>new</code> <code>Array(5 * 1024 * 1024);</code> <code>map.set(key, 1);</code> <code>global.gc();</code> <code>process.memoryUsage(); </code><code>// heapUsed: 46751472 注意这里大约是 44.6M</code> &nbsp; <code>key = </code><code>null</code><code>;</code> <code>global.gc();</code> <code>process.memoryUsage(); </code><code>// heapUsed: 46754648 ≈ 44.6M</code> &nbsp; <code>// 这句话其实是无用的，因为 key 已经是 null 了</code> <code>map.</code><code>delete</code><code>(key);</code> <code>global.gc();</code> <code>process.memoryUsage(); </code><code>// heapUsed: 46755856 ≈ 44.6M</code> </td> 
 </tr> 
 </tbody> 
</table>

如果你想要让 Obj 被回收掉，你需要先` delete(key)` 然后再` key = null:`

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>let map = </code><code>new</code> <code>Map();</code> <code>let key = </code><code>new</code> <code>Array(5 * 1024 * 1024);</code> <code>map.set(key, 1);</code> <code>map.</code><code>delete</code><code>(key);</code> <code>key = </code><code>null</code><code>;</code> </td> 
 </tr> 
 </tbody> 
</table>

我们依然通过 Node 证明一下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </td> 
 <td> <code>node --expose-gc</code> &nbsp; <code>global.gc();</code> <code>process.memoryUsage(); </code><code>// heapUsed: 4638376 ≈ 4.4M</code> &nbsp; <code>let map = </code><code>new</code> <code>Map();</code> <code>let key = </code><code>new</code> <code>Array(5 * 1024 * 1024);</code> <code>map.set(key, 1);</code> <code>global.gc();</code> <code>process.memoryUsage(); </code><code>// heapUsed: 46727816 ≈ 44.6M</code> &nbsp; <code>map.</code><code>delete</code><code>(key);</code> <code>global.gc();</code> <code>process.memoryUsage(); </code><code>// heapUsed: 46748352 ≈ 44.6M</code> &nbsp; <code>key = </code><code>null</code><code>;</code> <code>global.gc();</code> <code>process.memoryUsage(); </code><code>// heapUsed: 4808064 ≈ 4.6M</code> </td> 
 </tr> 
 </tbody> 
</table>

这个时候就要说到 WeakMap 了：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>const wm = </code><code>new</code> <code>WeakMap();</code> <code>let key = </code><code>new</code> <code>Array(5 * 1024 * 1024);</code> <code>wm.set(key, 1);</code> <code>key = </code><code>null</code><code>;</code> </td> 
 </tr> 
 </tbody> 
</table>

当我们设置 wm.set(key, 1) 时，其实建立了 wm 对 key 所引用的对象的弱引用，但因为` let key = new Array(5 * 1024 * 1024) `建立了 key 对所引用对象的强引用，被引用的对象并不会被回收，但是当我们设置 `key = null `的时候，就只有 wm 对所引用对象的弱引用，下次垃圾回收机制执行的时候，该引用对象就会被回收掉。

我们用 Node 证明一下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>node --expose-gc</code> &nbsp; <code>global.gc();</code> <code>process.memoryUsage(); </code><code>// heapUsed: 4638992 ≈ 4.4M</code> &nbsp; <code>const wm = </code><code>new</code> <code>WeakMap();</code> <code>let key = </code><code>new</code> <code>Array(5 * 1024 * 1024);</code> <code>wm.set(key, 1);</code> <code>global.gc();</code> <code>process.memoryUsage(); </code><code>// heapUsed: 46776176 ≈ 44.6M</code> &nbsp; <code>key = </code><code>null</code><code>;</code> <code>global.gc();</code> <code>process.memoryUsage(); </code><code>// heapUsed: 4800792 ≈ 4.6M</code> </td> 
 </tr> 
 </tbody> 
</table>

所以 WeakMap 可以帮你省掉手动删除对象关联数据的步骤，所以当你不能或者不想控制关联数据的生命周期时就可以考虑使用 WeakMap。

总结这个弱引用的特性，就是 WeakMaps 保持了对键名所引用的对象的弱引用，即垃圾回收机制不将该引用考虑在内。只要所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存。也就是说，一旦不再需要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。

也正是因为这样的特性，WeakMap 内部有多少个成员，取决于垃圾回收机制有没有运行，运行前后很可能成员个数是不一样的，而垃圾回收机制何时运行是不可预测的，因此 ES6 规定 WeakMap 不可遍历。

所以 WeakMap 不像 Map，一是没有遍历操作（即没有keys()、values()和entries()方法），也没有 size 属性，也不支持 clear 方法，所以 WeakMap只有四个方法可用：get()、set()、has()、delete()。

### **应用** ###

**1. 在 DOM 对象上保存相关数据**

传统使用 jQuery 的时候，我们会通过 $.data() 方法在 DOM 对象上储存相关信息(就比如在删除按钮元素上储存帖子的 ID 信息)，jQuery 内部会使用一个对象管理 DOM 和对应的数据，当你将 DOM 元素删除，DOM 对象置为空的时候，相关联的数据并不会被删除，你必须手动执行 $.removeData() 方法才能删除掉相关联的数据，WeakMap 就可以简化这一操作：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>let wm = </code><code>new</code> <code>WeakMap(), element = document.querySelector(</code><code>".element"</code><code>);</code> <code>wm.set(element, </code><code>"data"</code><code>);</code> &nbsp; <code>let value = wm.get(elemet);</code> <code>console.log(value); </code><code>// data</code> &nbsp; <code>element.parentNode.removeChild(element);</code> <code>element = </code><code>null</code><code>;</code> </td> 
 </tr> 
 </tbody> 
</table>

**2. 数据缓存**

从上一个例子，我们也可以看出，当我们需要关联对象和数据，比如在不修改原有对象的情况下储存某些属性或者根据对象储存一些计算的值等，而又不想管理这些数据的死活时非常适合考虑使用 WeakMap。数据缓存就是一个非常好的例子：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>const cache = </code><code>new</code> <code>WeakMap();</code> <code>function</code> <code>countOwnKeys(obj) { </code> <code>&nbsp;&nbsp;</code><code>if</code> <code>(cache.has(obj)) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'Cached'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>cache.get(obj);</code> <code>&nbsp;&nbsp;</code><code>} </code><code>else</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'Computed'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const count = Object.keys(obj).length;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>cache.set(obj, count);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>count;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**3. 私有属性**

WeakMap 也可以被用于实现私有变量，不过在 ES6 中实现私有变量的方式有很多种，这只是其中一种：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 </td> 
 <td> <code>const privateData = </code><code>new</code> <code>WeakMap();</code> &nbsp; <code>class Person { </code> <code>&nbsp;&nbsp;</code><code>constructor(name, age) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>privateData.set(</code><code>this</code><code>, { name: name, age: age });</code> <code>&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;</code><code>getName() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>privateData.get(</code><code>this</code><code>).name;</code> <code>&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;</code><code>getAge() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>privateData.get(</code><code>this</code><code>).age;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> &nbsp; <code>export </code><code>default</code> <code>Person;</code> </td> 
 </tr> 
 </tbody> 
</table>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。