如何理解WeakMap？ #251
Comments
初识WeakMap
WeakMap的key为什么是弱引用的？弱引用的意义：如果是作为key的对象没有任何地方引用它的话，垃圾收集器(GC)会将其标记为目标并且进行垃圾回收。 WeakMap的key和value可以是哪些类型key：必须是任意object类型（对象、数组、Map、WeakMap等等） WeakMap与Map最大的不同WeakMap的key是不可枚举的，而Map是可枚举的。 设计为不可枚举的原因是因为：如果枚举WeakMap的key，那就需要依赖垃圾回收器(GC)的状态，从而引入不确定性。 |
新增WeakMap类型是为什么？map API在js中可以通过共享4个API（get，set，has，delete）的两个数组来实现：一个存储key，一个存储value。在这个map上设置元素同步推入一个key和一个value到数组尾部。作为结果，key和value的索引会和两个数组绑定起来。从map获取一个值得话，会遍历所有key去找到一个匹配的，然后使用这个匹配到的index从values数组中查询到对应的值。 这样实现的话会有2个主要的弊端：
相比之下，原生的 因为引用是弱的，所以WeakMap的键是不能枚举的。没有方法去获取key的列表。如果枚举WeakMap的key，那就需要依赖垃圾回收器(GC)的状态，从而引入不确定性。如果必须要有key的话，应该去使用 |
WeakMap的基本概念语法new WeakMap()
new WeakMap(iterable)其中iterable是数组或者任意可以迭代的对象，需要拥有key-value对（一般是一个二维数组）。null会被当做undefined。 iterable为二维数组const iterable = [
[{foo:1}, 1],
[[1,2,3], 2],
[window, 3]
]
const iwm = new WeakMap(iterable)
// WeakMap {{…} => 1, Window => 3, Array(3) => 2}实例方法
|
WeakMap最简使用方式const wm1 = new WeakMap(),
wm2 = new WeakMap(),
wm3 = new WeakMap();
const o1 = {},
o2 = function() {},
o3 = window;
wm1.set(o1, 37);
wm1.set(o2, 'azerty');
wm2.set(o1, o2); // WeakMap的值可以是任意类型，包括object和function
wm2.set(o3, undefined);
wm2.set(wm1, wm2); // key和value可以是任意对象。包括WeakMap！
wm1.get(o2); // "azerty"
wm2.get(o2); // undefined, wm2上没有o2这个key
wm2.get(o3); // undefined, 因为这是设置的值
wm1.has(o2); // true
wm2.has(o2); // false
wm2.has(o3); // true (即使value是undefined)
wm3.set(o1, 37);
wm3.get(o1); // 37
wm1.has(o1); // true
wm1.delete(o1);
wm1.has(o1); // false |
WeakMap存储私有数据实例和原型链上的数据和方法是公开的，所以可以通过WeakMap类型的私有变量去隐藏实现细节。 const privates = new WeakMap();
function Public() {
const me = {
// Private data goes here
};
privates.set(this, me);
}
Public.prototype.method = function () {
const me = privates.get(this);
// Do stuff with private data in `me`...
};
module.exports = Public; |
拥有clear方式的WeakMap类class ClearableWeakMap {
constructor(init) {
this._wm = new WeakMap(init);
}
clear() {
this._wm = new WeakMap();
}
delete(k) {
return this._wm.delete(k);
}
get(k) {
return this._wm.get(k);
}
has(k) {
return this._wm.has(k);
}
set(k, v) {
this._wm.set(k, v);
return this;
}
}const key1 = {foo:1};
const key2 = [1,2,3];
const key3 = window;
const cwm = new ClearableWeakMap([
[key1, 1],
[key2, 2],
[key3, 3]
])
cwm.has(key1) // true
console.log(cwm);// ClearableWeakMap {_wm: WeakMap {Window => 3, {…} => 1, Array(3) => 2}}
cwm.clear(); // 垃圾回收当前WeakMap，并且声称新的空WeakMap
cwm.has(key1) // false
console.log(cwm);// ClearableWeakMap {_wm: WeakMap {}} |
WeakMap式自动垃圾回收缓存函数实现缓存函数的方式有很多种，比如单次缓存，Map式全量缓存，LRU最近最少缓存等等。 缓存函数实现function memoizeWeakMap(fn) {
const wm = new WeakMap();
return function (arg) {
if (wm.has(arg)) {
return wm.get(arg);
}
const cachedArg = arg;
const cachedResult = fn(arg);
wm.set(cachedArg, cachedResult)
console.log('weakmap object', wm)
return cachedResult;
};
}
let testFn = (bar) => {return Object.prototype.toString.call(bar)}; // 这里需要改造一下，改造完返回传入对象的类型
let memoizeWeakMapFn = memoizeWeakMap(testFn);
memoizeWeakMapFn(document) // weakmap对document生成缓存
memoizeWeakMapFn([1,2,3]) // weakmap对[1,2,3]生成缓存
memoizeWeakMapFn(function(){}) // weakmap对function(){}生成缓存
memoizeWeakMapFn(new WeakMap()) // weakmap对WeakMap实例生成缓存
memoizeWeakMapFn(new Map()) // weakmap对Map实例生成缓存
memoizeWeakMapFn(new Set()) // weakmap对Set实例生成缓存
WeakMap：
0: {Array(3) => "[object Array]"}
1: {function(){} => "[object Function]"}
2: {WeakMap => "[object WeakMap]"}
3: {Map(0) => "[object Map]"}
4: {#document => "[object HTMLDocument]"}
5: {Set(0) => "[object Set]"}如何体现出WeakMap的垃圾回收特性呢// 忽略部分代码同上
setTimeout(()=>{
memoizeWeakMapFn(document)
},5000)此时有时最后一次weakmap的打印结果如下： 为什么说是“有时”？因为打印时垃圾回收可能并没有执行完成，虽然会带来不确定性，但是可以确定的是，假设对象没有再被引用，WeakMap中的key会被浏览器自动垃圾回收掉。 为什么weakmap中仅保存了document？这是因为[1,2,3], function(){},new WeakMap(),new Map(),new Set()在后面都没有再继续引用了，而且因为它们作为了WeakMap的key，所以会被浏览器自动垃圾回收掉。 如何不让key被垃圾回收掉呢？保持一个变量对它的引用。 let memoizeWeakMapFn = memoizeWeakMap(testFn);
let retainArray = [1,2,3]; // 保持引用避免被垃圾回收
let retainMap = new Map(); // 保持引用避免被垃圾回收
memoizeWeakMapFn(document) // weakmap对document生成缓存
memoizeWeakMapFn(retainArray) // weakmap对[1,2,3]生成缓存
memoizeWeakMapFn(function(){}) // weakmap对function(){}生成缓存
memoizeWeakMapFn(new WeakMap()) // weakmap对WeakMap实例生成缓存
memoizeWeakMapFn(retainMap) // weakmap对Map实例生成缓存
memoizeWeakMapFn(new Set()) // weakmap对Set实例生成缓存
setTimeout(()=>{
memoizeWeakMapFn(document)
},5000)此时打印结果为： WeakMap：
0: {#document => "[object HTMLDocument]"}
1: {Map(0) => "[object Map]"}
2: {Array(3) => "[object Array]"}这是因为[1,2,3], new Map()被变量retainArray和retainMap持续引用着，所以不会被垃圾回收。而function(){},new WeakMap(),new Set()都没有再继续引用了，而且因为它们作为了WeakMap的key，所以会被浏览器自动垃圾回收掉。 如果手动触发垃圾回收呢？可以借助Chrome DevTools的memory面板工具，有一个手动触发垃圾回收的按钮。 // ...
setTimeout(()=>{
memoizeWeakMapFn(document)
},5000)比如在上面的例子中，设置了一个5秒的延时：只要代码运行后的5秒内，去手动触发“垃圾回收按钮”，就可以很精确地看到WeakMap的key被垃圾回收了。 当然5秒这个时间是可以人为调整的，保证自己能在setTimeout内的代码运行前触发对WeakMap的垃圾回收即可，可以适当调大。 |
在学习缓存函数时，最后提到了WeakMap方式缓存（对入参类型为对象做缓存，并且当对象在WeakMap中的key没有引用时方便浏览器垃圾回收）
而且JavaScript既然已经有了Map类型的数据结构，为什么还有一种叫做WeakMap类型的数据结构呢？
WeakMap很早之前就遇到过，但是没有系统学习过，今天就来对它一探究竟。
The text was updated successfully, but these errors were encountered: