对于 weakmap 弱引用机制的验证

问题简述

学习《Vue.js 设计与实现——霍春阳》这本书时，了解到 Vue3 响应式机制的实现使用到了 WeakMap 类型，Map 和 WeakMap 的不同之一是：后者是对原始对象的弱引用，如果原始对象因为没有被其他地方引用，而被垃圾回收了，WeakMap 中自然也就不存在这一属性，做了一点小实验，特此来记录一下。

实验代码

因为 v8 引擎的垃圾回收是自动的，且在占用内存较大时才会开始回收垃圾，所以下面的代码运行到最后并不会看到期待的效果，因此要通过 --expose-gc 参数允许开启垃圾回收

新建 weakmap.js，并在第一行打断点

const map = new Map();
const weakmap = new WeakMap();

let foo = { name: 'foo' }
let bar = { name: 'bar' }

map.set(foo, 'this is foo');
weakmap.set(bar, 'this is bar');

foo = null;
bar = null;

global.gc();

console.log('weakmap test ends.')

打开 VSCode 调试选项卡，选择 “JavaScript” 调试终端，在命令行输入 node --expose-gc weakmap.js

最终结果如下图：

通过调试发现，运行到最后一行代码时，map 中确实仍存在原始对象，而 weakmap 中的原始对象已经消失