ES6 系列之 WeakMap

前言

咱们先从 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 系列目录地址：github.com/mqyqingfeng…

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

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