普通类型和对象的区别

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

  1. 四个面试题
    第一题:
var a = 1
var b = a
b = 2
请问 a 显示是几?  
普通类型和对象的区别_第1张图片
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 是多少?
普通类型和对象的区别_第2张图片
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 是多少?
普通类型和对象的区别_第3张图片
image.png

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

第四题:

var a = {name: 'a'}
var b = a
b = null
请问现在 a 是什么?
普通类型和对象的区别_第4张图片
image.png

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

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

  1. 深拷贝和浅拷贝
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

你可能感兴趣的:(普通类型和对象的区别)