之前写了一篇文章浏览器是怎么看闭包的,发现有些读者对js内存分配与回收懵懵懂懂,理解文章的配图有些困难,我想主要是因为配图省略了一些细节。今天专门写一篇关于js内存分配回收的文章,帮助大家理解js代码的内存表示。原文备份在这里
数据类型
先唠叨些基本知识:
- javascript的数据类型分为基本类型和引用类型(对象)。基本类型分为如下几种:
- 数字字面量
- 字符串字面量
- 布尔字面量
- undefined
- null
- 引用类型分为如下几种
- 通过new的方式生成的对象
- new Object()
- new Array()
- new RegExp()
- new String()
- new Number()
- new Bollean()
- new 自定义对象()
- {},[],正则字面量,函数。
- 通过new的方式生成的对象
简单对象的内存表示
我们都知道的是,javascript中值类型是在变量所在的内存单元中存放的,而对于引用类型的对象,变量所在的内存单元存放的是堆空间中对象的内存地址。我们还应该知道的是,函数在执行时,局部变量是在栈空间中创建,引用对象是在堆空间中创建的。
我们还是从代码入手:
var a = 'abc'
var b = 123
var c = true
var d = undefined
var e = null
var f = {
n: 'test'
}
这段代码我们定义了六个全局变量,每个变量赋予不同类型的值,我们发现,a、b、c、d、e基本类型的值占据一个内存单元,而变量f内存储的是堆中对象的地址。如下图表示:
![](http://www.mk2048.com/web_upload/blog_imgs/9/https___user-gold-cdn-xitu-io_2017_7_29_3feab2d4115d8e7fbfb7d89200af409d.gif)
变量f中存储的0x00012345是堆中对象的内存地址。
一切都很容易理解。细心的同学也许会指出,null也是对象,通过typeof null 表达式得到的结果是'object'。关于这个,我想说的是typeof null = 'object' 这个现象是历史遗留bug。事实上null是空值,并不是对象。
js的类型值有1-3位是表示类型,其它位表示真实值。
000: object. The data is a reference to an object.
也就是说,000开头的被认为是指向对象引用。由于js中的null是空指针,在大多数平台上空指针的前两位是0x00,再加上null的数值表示是0,所以null的前三位是0x000,js引擎会认为它是指向对象的引用,这是一个历史遗留bug。但事实上,null是空值。详细解释参见这里。
说到null,我们还要用图形表示一下null所起到的作用。对于上面的代码,我们将引用类型f置为null,该变量将不再指向堆中对象。图形表示如下:
![](http://www.mk2048.com/web_upload/blog_imgs/9/https___user-gold-cdn-xitu-io_2017_7_29_bdb8648544c81e204d9109877906a601.gif)
你会发现,原本f指向堆对象的线消失了,堆中对应的对象不再被f引用。
看到这里,你也许会问:咦,那没有任何对象指向那个堆对象了,它还占据内存吗?如果还占据的话,岂不是占着茅坑不那啥吗?我想,如果能想到这一点,说明你是一个有追求的js开发者。
是的,原本堆空间中的那个对象确实没有引用了,js引擎会在下一个垃圾回收节点将它回收掉。
为了帮助大家更好的理解内存的分配与释放,建议大家在看配图的时候,一定要谨记箭头的走向,认真看箭头从哪个对象出发,又是指向哪个对象的。因为箭头指向代表变量引用,而引用是垃圾回收器辨别内存垃圾的依据。什么是垃圾呢?按照垃圾回收器的理解是,从根对象触发,沿着箭头指向,能够找到的对象,都不应该判定为垃圾。相反,从根对象触发,沿着箭头指向,不能够找到的对象,被判定为垃圾,将在下一个垃圾回收节点回收掉。
那么,与之相伴的是内存泄漏,什么叫内存泄漏呢?通俗一点讲,就是某个对象已经不会再被我们用到,但是垃圾回收器却发现从根对象仍然能够找到它,所以不认为它是垃圾,因此不会回收它,但是它确实对我们没有用处。这样就造成了内存的浪费,这种现象称作内存泄漏。
理解了判定内存垃圾的方式以及内存泄漏,我们就可以通过画图的方式来检验代码是否存在内存泄漏,代码是否健壮。
复杂对象的内存表示
上面代码中,f指向的对象是一个简单对象,只包含一个属性,如果堆中的是一个复杂对象,又该如何表示呢?让我们继续看代码
var a = {
b: 123,
c: 'abc',
d: true,
e: null,
f: {
h: 'test',
j: {
k: 567
}
}
}
我们定义了一个全局变量a,指向堆内存中的一个复杂对象。如下图:
![](http://www.mk2048.com/web_upload/blog_imgs/9/https___user-gold-cdn-xitu-io_2017_7_29_88221b8c6c27567bfaf797b5e5788559.gif)
全局定义的变量是常驻内存的,为什么常驻内存?我们从垃圾回收的角度分析一下:
- 从根对象window沿着箭头寻找,首先找到a。
- 通过a能找到堆中最左侧的大对象。
- 通过最左侧的对象中的变量f,能找到右侧下方的对象。
- 通过右侧下方对象的变量j,能找到右侧上方对象。
所以,全局定义的变量a所关联的对象是常驻内存的。
再次思考一下,我们如何让垃圾回收器回收堆空间右侧的那两个对象呢?聪明的你也许想到了
a.f = null
是的,将a.f的指针置为null就可以了。我们从垃圾回收的角度分析一下,a.f = null这段代码执行以后,f变量中存储的值变成了null,不再指向右侧的两个对象,按照我们之前的方法,从根对象window开始,沿着箭头寻找,找不到右侧对象,所以右侧两个对象成为内存垃圾,将被GC(垃圾回收器)回收掉。这就是当我们为一个变量赋值null之后,变量在内存中的变化。如下图所示:
![](http://www.mk2048.com/web_upload/blog_imgs/9/https___user-gold-cdn-xitu-io_2017_7_29_9ae21db4773f9bc59550ac0bf48f62bf.gif)
当然,我们也可以为变量赋予其他基础类型的值,断开和堆中对象的联系。
函数定义的内存表示
对于再复杂的对象,大家可以举一反三。接下来,我们看一下函数的定义:
function say() {
var a = '测试'
var b = {
c: 123
}
}
![](http://www.mk2048.com/web_upload/blog_imgs/9/https___user-gold-cdn-xitu-io_2017_7_30_b47f4cde95de32034568103aab494376.gif)
可以看到函数对象指针在全局变量区,函数本身在堆中存放,函数我只画了了几个常见的属性。细心的你也许发现有个[[Socpes]]的属性,以后讲闭包的时候再对它作详细介绍,这里只大概介绍一下。
[[Scopes]]属性是在函数创建的时候附加的属性,代表该函数的作用域链。
函数运行时的内存表示
继续看一段代码:
function say() {
var a = '测试'
var b = {
c: 123
}
}
say()
很简单,我们定义一个函数,并执行它,变量的内存图如下:
![](http://www.mk2048.com/web_upload/blog_imgs/9/https___user-gold-cdn-xitu-io_2017_7_29_86e2eca682e98bc08add150961997c78.gif)
函数运行时,局部变量分配在栈空间,此时,外部window对象与栈空间中的变量没有引用关系。局部变量a是值类型,在栈中存放,局部变量b是引用类型,栈中存放对象在堆中的内存地址。
函数运行结束后的图示如下:
![](http://www.mk2048.com/web_upload/blog_imgs/9/https___user-gold-cdn-xitu-io_2017_7_29_699ce22db439c2f5e89fb41afa9546e3.gif)
函数运行结束,局部变量由于没有外部引用,所以全部释放,同时堆中的对象也失去了引用,成为内存垃圾,被GC回收掉。
结语
至此,关于js代码的内存表示就先告一段落,通过画图的方式,希望大家能对程序的执行有感性的理解,也希望能帮助大家通过画图的方式去判定内存垃圾。另外,大家在看下一篇文章浏览器是怎么看闭包的的时候,会发现有一些细节没有表示,大家不要太过于纠结,只需注意箭头走向即可。
更多专业前端知识,请上 【猿2048】www.mk2048.com