普通类型和对象的区别

1.Chrome 打开即占用 1G 内存
2.Chrome 各每个网页分配一定数量的内存
3.这些内存要分给页面渲染器、网络模块、浏览器外壳和 JS 引擎（V8引擎）
4.JS 引擎将内存分为代码区和数据区
5.我们只研究数据区
6.数据区分为 Stack（栈内存）和 Heap（堆内存）
7.简单类型的数据直接存在 Stack 里
8.复杂类型的数据是把 Heap 地址存在 Stack 里
接下来我们用四个典型的面试题来剖析一波：

四个面试题
第一题：

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

image.png

b=a就是把a在stack中的东西放到b在stack中的位置,然后b=2，就是把b在stack中的值改为2，不影响a在stack里面的值。

第二题：

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

image.png

第一句：申明一个变量a，将一个{name: 'a'}这个对象赋值给a，{name: 'a'}存在heap中，在stack中只存{name: 'a'}的地址（此处假设为address：110）。
第二句：b=a就是把a在stack中的地址复制一份放在b在stack中的位置。
第三句：在heap中创建一个新对象{name: 'b'}，将这个新对象赋值给b，则是把这个对象的地址放在b对应在stack中的位置。则b在stack中的值由原先的address:110，变为address:120.

第三题：

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

image.png

前两句如上分析，第三句b.name = 'b',直接修改了在heap中的{name: 'a'}，那么a.name也是修改后的对象，即输出‘b’。

第四题：

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

image.png

前两句还是如上分析，但是第三句b=null, 就是直接把b在stack中的值改为null，不影响a。

总结：简单数据类型在stack中直接存值，而复杂数据类型则是把对象的地址存在stack中，对象存在heap中，通过这个地址来对对象进行‘引用’。

深拷贝和浅拷贝

var a = 1
var b = a
b = 2 //这个时候改变 b
a 完全不受 b 的影响
那么我们就说这是一个深复制

对于简单类型的数据来说，赋值就是深拷贝。
对于复杂类型的数据（对象）来说，才要区分浅拷贝和深拷贝。

这是一个浅拷贝的例子:

var a = {name: 'frank'}
var b = a
b.name = 'b'
a.name === 'b' // true

因为我们对 b 操作后，a 也变了。

深拷贝就是对 Heap 内存进行完全的拷贝：

var a = {name: 'frank'}
var b = deepClone(a) // deepClone 暂时还不知道怎么实现
b.name = 'b'
a.name === 'a' // true

最后编辑于：2018.09.15 20:58:03