内存图

大白话理解内存

1. 你买一个 8G 的内存条
2. 操作系统开机即占用 512MB
3. Chrome 打开即占用 1G 内存
4. Chrome 各每个网页分配一定数量的内存
5. 这些内存要分给页面渲染器、网络模块、浏览器外壳和 JS 引擎（V8引擎）
6. JS 引擎将内存分为代码区和数据区
7. 我们只研究数据区
8. 数据区分为 Stack（栈内存） 和 Heap（堆内存）
9. 简单类型的数据直接存在 Stack 里
10. 复杂类型的数据是把 Heap 地址存在 Stack 里

学习内存图的好处

1. 最基本的引用数据类型和引用传递到底是怎么回事儿？
2. 垃圾回收机制是怎么一回事？
3. 比如浅复制与深复制有什么不同？
4. 什么是闭包
5. 什么是原型

面试题

1.引用数据类型和引用传递

var a = 1
var b = a
b = 2
请问 a 显示是几？  

image.png

var a = {name: 'a'}
var b = a
b = {name: 'b'}
请问现在 a.name 是多少？

image.png

var a = {name: 'a'}
var b = a
b.name = 'b'
请问现在 a.name 是多少？

image.png

var a = {name: 'a'}
var b = a
b = null
请问现在 a 是什么？

image.png

2.引用自身

正确写法：

var a={}
a.self=a

image.png

错误写法

var a={self:a}


等价于

var a
a={self:a}
赋值时要先确定右边

image.png

var a={n:1}
var b=a
a.x=a={n:2}
alert(a.x)  //undefined
alert(b.x) //[object Object]

image.png

当浏览器看到 a.x=a={n:2} 这句话的时候，是先看左边, 所以a.x地址为中的a为34，再看右边，只不过看到右边，把右边的值算完后再回到左边

3.垃圾回收

垃圾：如果一个对象没有被引用，它就是垃圾，将被回收，还给浏览器，操作系统
举例1：

image.png
举例2：
问这个函数是不是垃圾（不是垃圾）

var fn=function(){}
document.body.onclick=fn
fn=null

image.png
如果将这个页面关掉，fn是否为垃圾？ （不是垃圾）
image.png
但是IE6有bug，认为上面那个不是垃圾，所以页面关掉时就会一直占着内存，像这样的情况就是内存泄漏。那如何解决？

window.onunload=function(){
  document.body.onclick=null
}

image.png

4.浅拷贝与深拷贝

image.png

改变其中一个值的同时并不改变另一个值，基本类型的赋值都是深拷贝

image.png