WeakMap

含义

WeakMap结构与Map结构类似,也是用于生成键值对的集合。

  1. // WeakMap 可以使用 set 方法添加成员
  2. const wm1 = new WeakMap();
  3. const key = {foo: 1};
  4. wm1.set(key, 2);
  5. wm1.get(key) // 2
  6. // WeakMap 也可以接受一个数组,
  7. // 作为构造函数的参数
  8. const k1 = [1, 2, 3];
  9. const k2 = [4, 5, 6];
  10. const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]);
  11. wm2.get(k2) // "bar"

WeakMapMap的区别有两点。

首先,WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名。

  1. const map = new WeakMap();
  2. map.set(1, 2)
  3. // TypeError: 1 is not an object!
  4. map.set(Symbol(), 2)
  5. // TypeError: Invalid value used as weak map key
  6. map.set(null, 2)
  7. // TypeError: Invalid value used as weak map key

上面代码中,如果将数值1Symbol值作为 WeakMap 的键名,都会报错。

其次,WeakMap的键名所指向的对象,不计入垃圾回收机制。

WeakMap的设计目的在于,有时我们想在某个对象上面存放一些数据,但是这会形成对于这个对象的引用。请看下面的例子。

  1. const e1 = document.getElementById('foo');
  2. const e2 = document.getElementById('bar');
  3. const arr = [
  4. [e1, 'foo 元素'],
  5. [e2, 'bar 元素'],
  6. ];

上面代码中,e1e2是两个对象,我们通过arr数组对这两个对象添加一些文字说明。这就形成了arre1e2的引用。

一旦不再需要这两个对象,我们就必须手动删除这个引用,否则垃圾回收机制就不会释放e1e2占用的内存。

  1. // 不需要 e1 和 e2 的时候
  2. // 必须手动删除引用
  3. arr [0] = null;
  4. arr [1] = null;

上面这样的写法显然很不方便。一旦忘了写,就会造成内存泄露。

WeakMap 就是为了解决这个问题而诞生的,它的键名所引用的对象都是弱引用,即垃圾回收机制不将该引用考虑在内。因此,只要所引用的对象的其他引用都被清除,垃圾回收机制就会释放该对象所占用的内存。也就是说,一旦不再需要,WeakMap 里面的键名对象和所对应的键值对会自动消失,不用手动删除引用。

基本上,如果你要往对象上添加数据,又不想干扰垃圾回收机制,就可以使用 WeakMap。一个典型应用场景是,在网页的 DOM 元素上添加数据,就可以使用WeakMap结构。当该 DOM 元素被清除,其所对应的WeakMap记录就会自动被移除。

  1. const wm = new WeakMap();
  2. const element = document.getElementById('example');
  3. wm.set(element, 'some information');
  4. wm.get(element) // "some information"

上面代码中,先新建一个 Weakmap 实例。然后,将一个 DOM 节点作为键名存入该实例,并将一些附加信息作为键值,一起存放在 WeakMap 里面。这时,WeakMap 里面对element的引用就是弱引用,不会被计入垃圾回收机制。

也就是说,上面的 DOM 节点对象的引用计数是1,而不是2。这时,一旦消除对该节点的引用,它占用的内存就会被垃圾回收机制释放。Weakmap 保存的这个键值对,也会自动消失。

总之,WeakMap的专用场合就是,它的键所对应的对象,可能会在将来消失。WeakMap结构有助于防止内存泄漏。

注意,WeakMap 弱引用的只是键名,而不是键值。键值依然是正常引用。

  1. const wm = new WeakMap();
  2. let key = {};
  3. let obj = {foo: 1};
  4. wm.set(key, obj);
  5. obj = null;
  6. wm.get(key)
  7. // Object {foo: 1}

上面代码中,键值obj是正常引用。所以,即使在 WeakMap 外部消除了obj的引用,WeakMap 内部的引用依然存在。

WeakMap 的语法

WeakMap 与 Map 在 API 上的区别主要是两个,一是没有遍历操作(即没有keys()values()entries()方法),也没有size属性。因为没有办法列出所有键名,某个键名是否存在完全不可预测,跟垃圾回收机制是否运行相关。这一刻可以取到键名,下一刻垃圾回收机制突然运行了,这个键名就没了,为了防止出现不确定性,就统一规定不能取到键名。二是无法清空,即不支持clear方法。因此,WeakMap只有四个方法可用:get()set()has()delete()

  1. const wm = new WeakMap();
  2. // size、forEach、clear 方法都不存在
  3. wm.size // undefined
  4. wm.forEach // undefined
  5. wm.clear // undefined

WeakMap 的示例

WeakMap 的例子很难演示,因为无法观察它里面的引用会自动消失。此时,其他引用都解除了,已经没有引用指向 WeakMap 的键名了,导致无法证实那个键名是不是存在。

贺师俊老师提示,如果引用所指向的值占用特别多的内存,就可以通过 Node 的process.memoryUsage方法看出来。根据这个思路,网友vtxf补充了下面的例子。

首先,打开 Node 命令行。

  1. $ node --expose-gc

上面代码中,--expose-gc参数表示允许手动执行垃圾回收机制。

然后,执行下面的代码。

  1. // 手动执行一次垃圾回收,保证获取的内存使用状态准确
  2. > global.gc();
  3. undefined
  4. // 查看内存占用的初始状态,heapUsed 为 4M 左右
  5. > process.memoryUsage();
  6. { rss: 21106688,
  7. heapTotal: 7376896,
  8. heapUsed: 4153936,
  9. external: 9059 }
  10. > let wm = new WeakMap();
  11. undefined
  12. // 新建一个变量 key,指向一个 5*1024*1024 的数组
  13. > let key = new Array(5 * 1024 * 1024);
  14. undefined
  15. // 设置 WeakMap 实例的键名,也指向 key 数组
  16. // 这时,key 数组实际被引用了两次,
  17. // 变量 key 引用一次,WeakMap 的键名引用了第二次
  18. // 但是,WeakMap 是弱引用,对于引擎来说,引用计数还是1
  19. > wm.set(key, 1);
  20. WeakMap {}
  21. > global.gc();
  22. undefined
  23. // 这时内存占用 heapUsed 增加到 45M 了
  24. > process.memoryUsage();
  25. { rss: 67538944,
  26. heapTotal: 7376896,
  27. heapUsed: 45782816,
  28. external: 8945 }
  29. // 清除变量 key 对数组的引用,
  30. // 但没有手动清除 WeakMap 实例的键名对数组的引用
  31. > key = null;
  32. null
  33. // 再次执行垃圾回收
  34. > global.gc();
  35. undefined
  36. // 内存占用 heapUsed 变回 4M 左右,
  37. // 可以看到 WeakMap 的键名引用没有阻止 gc 对内存的回收
  38. > process.memoryUsage();
  39. { rss: 20639744,
  40. heapTotal: 8425472,
  41. heapUsed: 3979792,
  42. external: 8956 }

上面代码中,只要外部的引用消失,WeakMap 内部的引用,就会自动被垃圾回收清除。由此可见,有了 WeakMap 的帮助,解决内存泄漏就会简单很多。

WeakMap 的用途

前文说过,WeakMap 应用的典型场合就是 DOM 节点作为键名。下面是一个例子。

  1. let myWeakmap = new WeakMap();
  2. myWeakmap.set(
  3. document.getElementById('logo'),
  4. {timesClicked: 0})
  5. ;
  6. document.getElementById('logo').addEventListener('click', function() {
  7. let logoData = myWeakmap.get(document.getElementById('logo'));
  8. logoData.timesClicked++;
  9. }, false);

上面代码中,document.getElementById('logo')是一个 DOM 节点,每当发生click事件,就更新一下状态。我们将这个状态作为键值放在 WeakMap 里,对应的键名就是这个节点对象。一旦这个 DOM 节点删除,该状态就会自动消失,不存在内存泄漏风险。

WeakMap 的另一个用处是部署私有属性。

  1. const _counter = new WeakMap();
  2. const _action = new WeakMap();
  3. class Countdown {
  4. constructor(counter, action) {
  5. _counter.set(this, counter);
  6. _action.set(this, action);
  7. }
  8. dec() {
  9. let counter = _counter.get(this);
  10. if (counter < 1) return;
  11. counter--;
  12. _counter.set(this, counter);
  13. if (counter === 0) {
  14. _action.get(this)();
  15. }
  16. }
  17. }
  18. const c = new Countdown(2, () => console.log('DONE'));
  19. c.dec()
  20. c.dec()
  21. // DONE

上面代码中,Countdown类的两个内部属性_counter_action,是实例的弱引用,所以如果删除实例,它们也就随之消失,不会造成内存泄漏。