ES6 系列之 WeakMap

Question

ES6 系列之 WeakMap

mqyqingfeng opened this issue 6 years ago · comments

冴羽 commented 6 years ago

前言

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

特性

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

const map = new WeakMap();
map.set(1, 2);
// TypeError: Invalid value used as weak map key
map.set(null, 2);
// TypeError: Invalid value used as weak map key

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

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

WeakMaps hold "weak" references to key objects,

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

我们先聊聊弱引用：

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

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

var obj = new Object();

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

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

// 假设可以这样创建一个
var obj = new WeakObject();

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

我们再来看看这句：

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

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

const key = new Array(5 * 1024 * 1024);
const arr = [
  [key, 1]
];

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

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

Map 类型也是类似：

let map = new Map();
let key = new Array(5 * 1024 * 1024);

// 建立了 map 对 key 所引用对象的强引用
map.set(key, 1);
// key = null 不会导致 key 的原引用对象被回收
key = null;

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

// 允许手动执行垃圾回收机制
node --expose-gc

global.gc();
// 返回 Nodejs 的内存占用情况，单位是 bytes
process.memoryUsage(); // heapUsed: 4640360 ≈ 4.4M

let map = new Map();
let key = new Array(5 * 1024 * 1024);
map.set(key, 1);
global.gc();
process.memoryUsage(); // heapUsed: 46751472 注意这里大约是 44.6M

key = null;
global.gc();
process.memoryUsage(); // heapUsed: 46754648 ≈ 44.6M

// 这句话其实是无用的，因为 key 已经是 null 了
map.delete(key);
global.gc();
process.memoryUsage(); // heapUsed: 46755856 ≈ 44.6M

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

let map = new Map();
let key = new Array(5 * 1024 * 1024);
map.set(key, 1);
map.delete(key);
key = null;

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

node --expose-gc

global.gc();
process.memoryUsage(); // heapUsed: 4638376 ≈ 4.4M

let map = new Map();
let key = new Array(5 * 1024 * 1024);
map.set(key, 1);
global.gc();
process.memoryUsage(); // heapUsed: 46727816 ≈ 44.6M

map.delete(key);
global.gc();
process.memoryUsage(); // heapUsed: 46748352 ≈ 44.6M

key = null;
global.gc();
process.memoryUsage(); // heapUsed: 4808064 ≈ 4.6M

这个时候就要说到 WeakMap 了：

const wm = new WeakMap();
let key = new Array(5 * 1024 * 1024);
wm.set(key, 1);
key = null;

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

我们用 Node 证明一下：

node --expose-gc

global.gc();
process.memoryUsage(); // heapUsed: 4638992 ≈ 4.4M

const wm = new WeakMap();
let key = new Array(5 * 1024 * 1024);
wm.set(key, 1);
global.gc();
process.memoryUsage(); // heapUsed: 46776176 ≈ 44.6M

key = null;
global.gc();
process.memoryUsage(); // heapUsed: 4800792 ≈ 4.6M

所以 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 就可以简化这一操作：

let wm = new WeakMap(), element = document.querySelector(".element");
wm.set(element, "data");

let value = wm.get(elemet);
console.log(value); // data

element.parentNode.removeChild(element);
element = null;

2. 数据缓存

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

const cache = new WeakMap();
function countOwnKeys(obj) {
    if (cache.has(obj)) {
        console.log('Cached');
        return cache.get(obj);
    } else {
        console.log('Computed');
        const count = Object.keys(obj).length;
        cache.set(obj, count);
        return count;
    }
}

3. 私有属性

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

const privateData = new WeakMap();

class Person {
    constructor(name, age) {
        privateData.set(this, { name: name, age: age });
    }

    getName() {
        return privateData.get(this).name;
    }

    getAge() {
        return privateData.get(this).age;
    }
}

export default Person;

ES6 系列

ES6 系列目录地址：https://github.com/mqyqingfeng/Blog

ES6 系列预计写二十篇左右，旨在加深 ES6 部分知识点的理解，重点讲解块级作用域、标签模板、箭头函数、Symbol、Set、Map 以及 Promise 的模拟实现、模块加载方案、异步处理等内容。

如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。

曾浩 · Answer 1 · Thu Jul 26 2018 13:57:32 GMT+0800 (China Standard Time)

感谢，写的很清晰明了

Eric Deng · Answer 2 · Tue Aug 07 2018 16:22:55 GMT+0800 (China Standard Time)

感谢冴羽老师的分享

Yingtao Mo · Answer 3 · Mon Dec 10 2018 16:36:43 GMT+0800 (China Standard Time)

以前看阮一峰老师的ES6教程硬是没看懂，不知道是自己变强了还是老师写得太好了，茅塞顿开！嘿嘿

Sphinm · Answer 4 · Tue Jun 11 2019 15:33:17 GMT+0800 (China Standard Time)

WeakMap 中四个方法好实现么

( ゜- ゜)つロ · Answer 5 · Thu Aug 01 2019 15:08:53 GMT+0800 (China Standard Time)

例子举的太好了！

Andy · Answer 6 · Tue Aug 20 2019 15:38:35 GMT+0800 (China Standard Time)

var t;
const privateData = new WeakMap();
class Person {
constructor(name, age) {
t=this;
console.log(this);
privateData.set(t, { name: name, age: age });
}

getName() {
    return privateData.get(this).name;
}

getAge() {
    return privateData.get(this).age;
}

}

let a=new Person('andy',18)
console.log(a,privateData,t===a,privateData.get(a));
t=a=null;
setInterval(v=>{
console.log(privateData);
},600)

t=a=null; 发现还是去除不了

Dark Chan · Answer 7 · Wed Apr 29 2020 16:40:48 GMT+0800 (China Standard Time)

emm，小白表示基础差看不大明白，知其然不知其所以然。希望不就之后再来会有茅厕顿开的感觉，先给老师32个赞

A-cabbage · Answer 8 · Wed Nov 25 2020 09:36:50 GMT+0800 (China Standard Time)

冴羽老师有一点我不太明白，阮一峰老师在ES6当中提到WeakSet以及WeakMap解决了 "引用计数" 这种垃圾回收机制存在的问题，但是在JavaScript高级程序设计一书当中表示现在的各大浏览器的垃圾回收机制已经全部使用的是 "标记清除" ，既然浏览器都已经替我们解决了这个问题，使用WeakSet和WeakMap还有什么作用吗？还请老师指点一二

测不准 · Answer 9 · Wed Nov 25 2020 12:14:11 GMT+0800 (China Standard Time)

是不可以简单理解，weakmap系统可以自动清除，map需要手动

g8up · Answer 10 · Wed Nov 25 2020 13:22:47 GMT+0800 (China Standard Time)

应该这么翻译：WeakMap 对键名的引用属于弱引用。
不必强调”保持“

yliu · Answer 11 · Thu Dec 31 2020 14:48:31 GMT+0800 (China Standard Time)

以前看阮一峰老师的ES6教程硬是没看懂，不知道是自己变强了还是老师写得太好了，茅塞顿开！嘿嘿

经典没看懂

xsfxtsxxr · Answer 12 · Tue Jan 05 2021 11:47:44 GMT+0800 (China Standard Time)

终于明白了弱引用，感谢

Kain · Answer 13 · Wed Feb 24 2021 18:06:13 GMT+0800 (China Standard Time)

垃圾回收机制回收了弱引用，那么相当于删除了那个引用的数据吗？为什么执行代码一段时间后再输出 wm，设置的 wm.set([3,4], 6) 这一项数据为什么也没有了？wm 变成空的了，代码是在浏览器中执行的

onewkl · Answer 14 · Thu Feb 25 2021 15:58:38 GMT+0800 (China Standard Time)

垃圾回收机制回收了弱引用，那么相当于删除了那个引用的数据吗？为什么执行代码一段时间后再输出 wm，设置的 wm.set([3,4], 6) 这一项数据为什么也没有了？wm 变成空的了，代码是在浏览器中执行的

因为vm.set([3,4],6) 中的[3,4] 没有其他地方引用，垃圾回收时会直接回收，而
let key = [3,5];
vm.set(key,1);
[3,5]被key引用，把key置为null之后[3,5]才会被回收

zhangxiaofan · Answer 15 · Sun May 09 2021 14:24:12 GMT+0800 (China Standard Time)

Node.js版本v14.15.1

process.memoryUsage(); // heapUsed: 3MB左右
const vm = new WeakMap();

let key = new Array(5 * 1024 * 1024);
process.memoryUsage(); // heapUsed: 44MB左右
vm.set(key, 1);
global.gc();
process.memoryUsage(); // heapUsed: 44MB左右

// 这里把key设置为null了之后，我在测了一下memory
key = null;
process.memoryUsage(); // heapUsed: 88MB左右

global.gc();
process.memoryUsage(); // heapUsed: 3MB左右

@mqyqingfeng 大佬，为啥我调用key = null后, 内存奇怪的使用更多了是什么原因。

zhangxiaofan · Answer 16 · Sun May 09 2021 15:00:29 GMT+0800 (China Standard Time)

var t;
const privateData = new WeakMap();
class Person {
constructor(name, age) {
t=this;
console.log(this);
privateData.set(t, { name: name, age: age });
}
getName() {
    return privateData.get(this).name;
}

getAge() {
    return privateData.get(this).age;
}
}

let a=new Person('andy',18)
console.log(a,privateData,t===a,privateData.get(a));
t=a=null;
setInterval(v=>{
console.log(privateData);
},600)

t=a=null; 发现还是去除不了

我测了下是可以的，一些建议

先用node命令行
将name和age改成长数组，可以明显的看到内存变化。

銀桑 · Answer 17 · Wed Jan 05 2022 11:24:13 GMT+0800 (China Standard Time)

WeakMap 中四个方法好实现么
一般我们讲JS实现，其实是重复造个语法糖（async await）、高级对象（Set）、高级函数（Promise.all）的轮子。
WeakMap不做实现的原因主要是Weak特性不好实现，因为弱引用就需要用弱引用来实现。
https://www.infoq.cn/article/lksmb2tlgh1ehg0*bbyg 这篇文章看到有用WeakRef实现WeakMap，这样的底层相互实现就没有必要了。