通过JavaScript垃圾回收机制来理解WeakSet/WeakMap中对象的弱引用

垃圾收集

JavaScript具有自动垃圾收集机制。也就是说开发人员无需关心内存使用问题,执行环境会负责管理代码执行过程中使用的内存,找出不再继续使用的变量,然后释放其占用的内存。

我们创建的原始值、函数、对象等都会占用内存,内存的管理是自动的,无形的。在JavaScript中,内存管理最主要的概念是可达性。

可达性

简单地说,“可达”值是指那些以某种方式可访问或可用的值,它们保证存储在内存中。

比如:

  1. 一些固有的可达值,这些值明显不能被释放
* 当前函数的局部变量和参数
* 嵌套调用时,当前调用链上所有函数的变量和参数
* 全局变量
...

这些值被称为根。

  1. 一个值可以通过引用或者引用链从根值访问到,比如:访问对象或者对象的原型

垃圾回收器

在 JavaScript 引擎中有一个被称作垃圾回收器的东西在后台执行。它监控着所有对象的状态,并删除掉那些已经不可达的。

一、单个引用
let  info = {
  name: 'jack'
}

全局变量info引用了对象{name: 'jack'}

info = null

info被重写,对象的引用就没了,该对象就变成不可达的,无法访问了,垃圾回收器就会认为是垃圾数据,将它的内存释放。

两个引用

let info = {name: 'jack'}
let user = info

有两个变量引用了该对象

info = null // 重写info

虽然info访问不到对象了,但是还可以通过user访问, 对象的值还是可达的,所以内存不会得到释放。

相互关联的引用

function marry(man, woman) {
  woman.husband = man;
  man.wife = woman;

  return {
    father: man,
    mother: woman
  }
}

let family = marry({
  name: "John"
}, {
  name: "Ann"
});

family产生的内存结构:

image

所有对象都是可达的。

然后移除两个引用:

delete family.father;
delete family.mother.husband;
image

只删除其中一个引用,所有对象还是可达的,但是如果两个同时删除,无法访问到{name: 'John'},将会从内存释放。

经过垃圾回收之后,还有一些对象的值是可达的:

image

如果:

family = null

变量family已经不在连着根值,即便{name: 'John'} 和 {name: 'Ann'}还连着,但已经是不可达的,所以整体将从内存移除。

image

所以内存管理最重要的就是可达性,一旦值不可达内存就会被垃圾回收器回收以释放内存。

那么,JavaScript引擎怎么知道哪些变量不在使用并清除它呢?

标记清除

JavaScript垃圾收集方法采用的是标记清除(mark-and-sweep),垃圾执行器会根据固定时间周期性执行一次清除工作。

标记清除算法是现代垃圾回收算法的基础。顾名思义,分两个阶段,标记--清除。

标记阶段:通过根值(根节点),标记出从根值开始的所有可达值;

清除阶段:未被标记的则为垃圾对象,在清除阶段会被清除。

image

关于内存管理和垃圾收集机制的基本原理大致清楚了,下面看WeakSet/WeakMap中对对象是怎么引用的。

Set/WeakSet、Map/WeakMap

Set/Map

Set是值得集合,没有重复值。
Map是键值对的集合,不同于对象的键,Map的键可以是任意类型。

根据上文的垃圾回收机制,当一个值可用(或可能需要)时,JavaScript 引擎将会把值缓存在内存中。

比如:

let obj = {id: 1}
// obj是引用,对象可用

obj = null // 重写引用
// 对象从内存移除

通常情况下,当某数据存在于内存中时,对象的属性或者数组的元素或其他的数据结构将被认为是可以获取并留存于内存的。

let obj = {id: 1}
const arr = [obj]
const user = {info: obj}
const set = new Set([obj])
const map = new Map([[obj, 'info']])

obj = null // 重写obj

重写obj以后,即便对象已经没有指向它的引用,但是对象依然会存在于内存中。因为Set/Map、对象、数组对对象是强引用,所以仍然可以获取到。

arr[0]     // {id: 1}
user.info  // {id: 1}
set.keys()
map.keys() 

WeakMap/WeakSet

WeakSet类似于Set,仅存储对象。
WeakMap类似于Map,键必须是对象。

WeakMap/WeakSet 中对对象是弱引用,垃圾回收机制不会考虑WeakMap对该对象的引用,也就是JavaScript不会阻止将对象从内存移除。

let obj = {id: 1}
const weakMap = new WeakMap([[obj, 'sina']])

obj = null  // 重写obj

{id: 1}     //将会从内存移除

与Map不同,作为WeakMap键的{id: 1},将会被垃圾回收器从内存中移除。

WeakMap实例仅有has()、set()、get()、delete()操作方法,没有size属性以及keys()、values()、entries()方法,所以不能获取其所有键值,也就不能迭代。

WeakSet/WeakMap没有部署Iterator接口,所以不能用for...of遍历。

为什么有这些限制?

完全是出于技术因素。如果一个对象没有任何引用,WeakMap/WeakSet也不会阻止对象从内存移除,但是垃圾回收器并没有指定什么时候移除,可能马上移除,也可能等待更多时批量移除,所以WeakMap元素的个数并不确定。出于该原因,允许访问 WeakMap 整体的方法并不支持。

那么什么情况下会用到这样的数据结构呢?

当我们对对象有个主存储区,当且仅当对象激活(在内存)时才需要保存信息就会用到,不会造成内存泄漏。

比如:记录用户的访问次数、给DOM注册监听事件、部署私有属性等。

  1. 记录访问次数
let jack = { name: "jack" };

const vistedCount = new WeakMap();
vistedCount.set(jack, 123);

// 当 jack 离开,就不需要保存其访问记录
john = null;

// 除了 vistedCount 没有其他引用了
// 所以这个对象会自动的从内存和 vistedCount 中删除,不会造成内存泄漏
  1. 注册监听事件:
const listener = new WeakMap()

listener
  .set(ele1, func1)
  .set(ele2, func2)

ele1.addEventListener('click', listener.get(ele1), false)
ele2.addEventListener('click', listener.get(ele2), false)

监听函数放在WeakMap中,一旦DOM移除,监听函数也随之从内存移除,不会造成内存泄漏。

因为无法观察对象在内存中自动消失,所以WeakMap的例子很难演示。可以通过Node的process.memoryUsage()方法观察内存的占用情况:

命令说明:

  1. node --expose-gc

    • 参数 --expose-gc 表示允许手动执行垃圾回收机制。
  2. global.gc() 手动执行一次垃圾回收

  3. process.memoryUsage() 查看内存占用状态 heapUsed 内存占用

    • process.memoryUsage() 方法返回Node.js进程的内存使用情况的对象,该对象每个属性值的单位为字节。

      heapTotalheapUsed 代表V8的内存使用情况。 external代表V8管理的,绑定到Javascript的C++对象的内存使用情况。 rss, 驻留集大小, 是给这个进程分配了多少物理内存(占总分配内存的一部分) 这些物理内存中包含堆,栈,和代码段。

      对象,字符串,闭包等存于堆内存。 变量存于栈内存。 实际的JavaScript源代码存于代码段内存。

WeakSet关于对象的引用方式和WeakMap一样,所以关于WeakSet的用法就不再赘述,本文主要讲解从JavaScript内存管理、垃圾回收机制来阐述WeakMap/WeakSet中对象的引用方式。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容