通过【垃圾回收机制】的角度认识【Map与WeakMap】的区别

Bertha 。 2022-11-05 05:19 63阅读 0赞

![42822bf5b06d205f6bd6cbe816b286d5.gif][]

> 原文链接: https://www.zhihu.com/people/yiqun-a-qia

> 前言：前段时间刚接触WeakMap时概念很模糊，查了很多文章大部分是简单掠过，后来通过学习了垃圾回收机制后有感而发。

## 简单介绍JavaScript中的垃圾回收 ##

> JavaScript是使用垃圾回收的语言，也就是说执行环境负责在代码执行时管理内存。

众所周知，我们一般使用 javascript 进行开始都很少关注垃圾回收是如何进行的，

对于开发者来说，JavaScript 的内存管理是自动的、无形的。

于是乎对于学习`WeakMap`这个概念需要用到`垃圾回收`相关知识，

先简单描述下垃圾回收是如何进行。

### 例子：“我有一个朋友” ###

没有什么是用例子解决不了的

// 从前，我有一个朋友。
    let myFriend = {
      info: "I have a friend",
      attr: "Lsp"
    }

![34b303e971f5cd6ee1df1660afc0ff44.png][]

这里我们在全局空间声明了一位“朋友” `myFriend`

![07b62cadfc3d7a8b25307b3bae62c0e7.png][]

他的引用地址指向了`{ info: "I have a friend", attr: "Lsp" }`

myFriend = null;
    // 此时我们已经没有这位朋友了

![820e62d14ec26257159aad9bebdcd1a6.png][]

由于我们与这位“朋友”断了联系，

从 根（window/global） 开始 查询 找不到 其引用，此时垃圾回收机制会把它当作垃圾进行自动回收，并释放内存。

### 多个引用 ###

现在我们再举一个例子，声明多个变量指向同一个引用

// 大家好，我是...
    let me = null;
    
    // 然后，我有一个朋友他...
    let myFriend = {
      info: "I have a friend",
      attr: "Lsp"
    }
    // (....?)
    me = myFriend;

> 你说的这个朋友是不是你.jpg

![3f85654dd6abdb9b11da40b05b35311d.png][]

由此可见目前有两个变量引用地址指向了同一块地方 `{ info: "I have a friend", attr: "Lsp" }`。

我们现在将其中一个变量进行断开。

// 我说的那位朋友真的不是我！
    me = null;

![6fba7a965644975a0c7ca439865c467e.png][]

即使将其中一个变量的引用地址断开

另外一个 "朋友"变量 任然继续引用

（也就是说对象还是可以通过根查找到）

所以垃圾回收机制不会将它进行回收。

### 回收策略 ###

JavaScript最常用垃圾回收策略是"标记清理（mark-and-sweep）"

策略的大意即为：

*  遍历空间下所有的对象，并标记活着的，有被引用的并且最终可以到达根（window/global）的对象。
 *  在垃圾回收阶段的时候，将没有标记进行清除。

> 这里回收策略不是本章重点，具体策略在底层代码上还会再细分，以及内存分代对应具体算法，暂时不展开讲，有兴趣可以查阅朴灵《深入浅出Node.js》以及V8垃圾回收机制相关文章。

## JavaScript中Map与WeakMap ##

上面赘述那么多终于来讲本文关键了，

提前讲上文原因在于`WeakMap` 的特点与`垃圾回收机制`有关。

我们引用一下《JavaScript高级程序设计（第四版）》的原话。

> ECMAScript6新增的”弱映射“（WeakMap）是一种新的集合类型，为这门语言带来了增强的键值对存储机制。WeakMap是Map的”兄弟“类型，其API也是Map的子集。WeakMap中的”weak“（弱），描述的是JavaScript垃圾回收程序对待的”弱映射“中键的方式。---- 《JavaScript高级程序设计（第四版）》6.5

嗯，说得好棒很详细的样子！

可是我完全不懂呢（ 嗯嗯嗯我完全理解了呢.jpg

## Map与WeakMap简单区别 ##

*  Map的键值可以是原始数据类型和引用类型，WeakMap的键值只能说引用类型（object）
 *  Map可以迭代遍历键，WeakMap不可迭代遍历键

`WeakMap`中的”weak“表示弱映射的键是”弱弱地拿着“的，意思就是，这些键不属于正式的引用。

换言之，`WeakMap`所构建的实例中，

其`key`键所对应引用地址的引用断开或不属于指向同一个内存地址的时候，

其对应`value`值就会被加入垃圾回收队伍。

（粗暴理解为：因为key必须是个引用类型，当key引用断了或变了，这个键值对就可以进垃圾桶了）

### 观察内存空间理解WeakMap ###

因为通常条件下很难察觉`WeakMap`里面`keyValue`什么时候消失

但是通过某一个引用类型的值大到足够占据一定内存时候

我们可以通过观察内存的变化来观察`WeakMap`的特性

> 示例使用的Node.js的进程Api  `process.memoryUsage()`配合手动垃圾回收 `global.gc()`在终端观察，  
> 也可以使用Chrome浏览器Performance功能录制内存变化，  
> 但是为了方便用代码展示就依次展开了，0 .0 本质观察到内存变化即可，手段可以有多种。  
> glabal.gc()  
> 手动调用一次垃圾回收。需要在运行js文件时候增加命令 --expose-gc，一般环境下不推荐使用，这里做学习用。  
> process.memoryUsage()  
> 查看Node进程的内存占用情况。  
> 返回值为对象其中包含五个属性 rss， heapTotal， heapUsed，external，arrayBuffers；  
> 其中主要属性是  heapTotal和 heapUsed对应的是V8的堆内存信息。  
> heapTotal是堆中总共申请的内存量， heapUsed表示目前堆中使用的内存量。单位都为 字节。

现在我们通过代码来展示

// index.js
    // 第一次手动清理垃圾以确保为最新状态，观察内存情况
    global.gc();
    console.log(`第一次垃圾回收，当前内存使用情况：${(process.memoryUsage().heapUsed / 1024 / 1024).toFixed(2)}MB`);
    const wm = new WeakMap();
    
    let key = {};
    // 给 WeakMap实例 赋值一个 占领内存足够大的 键值对
    wm.set(key, new Array(114514 * 19));
    // 手动清理一下垃圾 观察内存占用情况
    global.gc();
    console.log(`第二次垃圾回收，当前内存使用情况：${(process.memoryUsage().heapUsed / 1024 / 1024).toFixed(2)}MB`);
    
    // 此时把 key键 的引用进行断开，并观察内存占用情况
    key = null;
    // key = new Array();  
    // 这种改变引用地址写法也可以引起 弱映射，因为引用地址不再是同块内存地址 WeakMap内对应的value也会被垃圾回收
    
    global.gc();
    console.log(`第三次垃圾回收，当前内存使用情况：${(process.memoryUsage().heapUsed / 1024 / 1024).toFixed(2)}MB`);
    $ node --expose-gc index.js
    第一次垃圾回收，当前内存使用情况：1.66MB
    第二次垃圾回收，当前内存使用情况：18.45MB
    第三次垃圾回收，当前内存使用情况：1.84MB

那么我们来看看`Map`的情况，

与上方`index.js`的代码一致，把`new WeakMap()`换成`new Map()`。

看看终端输出效果

$ node --expose-gc index.js
    第一次垃圾回收，当前内存使用情况：1.66MB
    第二次垃圾回收，当前内存使用情况：18.45MB
    第三次垃圾回收，当前内存使用情况：18.44MB

很明显我们将`key = null`的引用地址断开后 ，

`value` 仍然存在`Map`所构建的实例里面，一如既往还在内存里面。

现在我们将代码场景改成`Map`的样子

// index.js
    // 第一次手动清理垃圾以确保为最新状态，观察内存情况
    global.gc();
    console.log(
      `第一次垃圾回收，当前内存使用情况：${(process.memoryUsage().heapUsed / 1024 / 1024).toFixed(2)}MB`
    );
    const m = new Map();
    
    let key = {};
    m.set(key, new Array(114514 * 19));
    // 手动清理一下垃圾 观察内存占用情况
    global.gc();
    console.log(
      `第二次垃圾回收，当前内存使用情况：${(process.memoryUsage().heapUsed / 1024 / 1024).toFixed(2)}MB，
      当前Map的长度: ${m.size}`
    );
    
    // 此时把 key键 的引用进行断开，并观察内存占用情况
    key = null;
    global.gc();
    console.log(
      `第三次垃圾回收，当前内存使用情况：${(process.memoryUsage().heapUsed / 1024 / 1024).toFixed(2)}MB，
      当前Map的长度: ${m.size}`
    );
    
    // 清除Map所有键值对
    m.clear();
    
    global.gc();
    console.log(
      `第四次垃圾回收，当前内存使用情况：${(process.memoryUsage().heapUsed / 1024 / 1024).toFixed(2)}MB，
      当前Map的长度: ${m.size}`
    );
    $ node --expose-gc index.js
    第一次垃圾回收，当前内存使用情况：1.66MB
    第二次垃圾回收，当前内存使用情况：18.45MB，当前Map的长度: 1
    第三次垃圾回收，当前内存使用情况：18.45MB，当前Map的长度: 1
    第四次垃圾回收，当前内存使用情况：1.85MB，当前Map的长度: 0

由此可见`Map`所构建的实例是需要手动清理，才能被垃圾回收清除，

而`WeakMap`只要外部的引用消失，所对应的键值对就会自动被垃圾回收清除。

## 总结 ##

通过堆内存分析后重新认识`Map`和`WeakMap`，

由于一开始接触这个API的时候有点陌生，

查阅很多网上很多文章后描述的样子非常表层一笔带过

> 因为弱引用反正他就会被自动回收就是了不会占用内存balabala，总之就是一两句话带过

这让我很头疼，下定决定翻了很多的书结合理解才搞懂`WeakMap`存在的意义。

前期是在在《现代JavaScript教程》受到启发，

通过翻查《深入浅出Node.js》找到了验证方法，

最后看到新版《JavaScript高级程序设计（第四版）》对WeakMap描述也是简单带过，

于是下定决心来写这一篇文章。

第一次产出文章，有表达描述不到位，或者代码逻辑错误的地方欢迎指出。

我是阿卡，一名普通搬砖的前端工程师。

最后

*  欢迎加我微信(winty230)，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![a323dda202954b02c6952afda06804e4.png][]

![f7cd2171bf5d67ef05323971b1a897d2.png][]

点个**在看**支持我吧

![ac2f5fefa386a9054cb427484fca0a47.gif][]

[42822bf5b06d205f6bd6cbe816b286d5.gif]: /images/20221023/0842ce072c444dcf8d7995d04c9e9efe.png
[34b303e971f5cd6ee1df1660afc0ff44.png]: /images/20221023/94d42321e83147afa959836bdf8ea4d2.png
[07b62cadfc3d7a8b25307b3bae62c0e7.png]: /images/20221023/f53b384ae38248e0b3d2b123d7de2941.png
[820e62d14ec26257159aad9bebdcd1a6.png]: /images/20221023/ea18cfd152da4087b006abec8d118e3f.png
[3f85654dd6abdb9b11da40b05b35311d.png]: /images/20221023/90e1490fd8e04cbdaacb570e8c400f1a.png
[6fba7a965644975a0c7ca439865c467e.png]: /images/20221023/10f86f882a964827b8b43d692cfb8397.png
[a323dda202954b02c6952afda06804e4.png]: /images/20221023/07daffc1baed446ea22dda31fc0d0219.png
[f7cd2171bf5d67ef05323971b1a897d2.png]: /images/20221023/57f6e08e9c724374a28c86dfad9b646e.png
[ac2f5fefa386a9054cb427484fca0a47.gif]: /images/20221023/0db362cdef214b48b0f6782871d0218a.png