ES6 系列之 WeakMap的使用示例


Posted in Javascript onAugust 06, 2018

前言

我们先从 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;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
通过Kettle自定义jar包供javascript使用
Jan 29 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 #Javascript
ES6 中可以提升幸福度的小功能
Aug 06 #Javascript
原生JS实现的轮播图功能详解
Aug 06 #Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 #Javascript
animate.css在vue项目中的使用教程
Aug 05 #Javascript
iconfont的三种使用方式详解
Aug 05 #Javascript
vue-content-loader内容加载器的使用方法
Aug 05 #Javascript
You might like
swfupload 多文件上传实现代码
2008/08/27 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
JS版网站风格切换实例代码
2008/10/06 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
vue.js 获取select中的value实例
2018/03/01 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
python通过线程实现定时器timer的方法
2015/03/16 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
python基础教程之while循环
2019/08/14 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
刘胡兰的英雄事迹材料
2014/02/11 职场文书
人事文员岗位职责
2014/02/16 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
闭幕式主持词
2014/04/02 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
python中的装饰器该如何使用
2021/06/18 Python
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
Python学习之异常中的finally使用详解
2022/03/16 Python
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers