普通类型和对象的区别

简单类型:number、string、boolean、undefined、null、symbol
复杂类型(引用类型):object
要了解这个问题,我们首先要知道内存。
当我们打开浏览器的时候,浏览器会占用一些内存,浏览器会把这些内存分布给网页,网页再讲内存分配给页面渲染器、网络模块、浏览器外壳和 JS 引擎(V8引擎)等。我们学习JS主要研究JS引擎部分。
JS引擎将得到的内存分成代码区和数据区。我们要了解普通类型和对象的区别,所以我们只研究数据区。
在数据区分为栈内存Stack)和堆内存Heap)。简单类型的数据直接存在 Stack 里。复杂类型的数据是把 Heap 地址存在 Stack 里。

下面我们通过几个面试题来更加深入了解栈和堆

为了更方便的解题,我们引入内存图的概念。

  • 第一题
var a = 1
var b = a
b = 2
请问 a 显示是几?  

当执行到var b=a时,内存中可以表示为:

普通类型和对象的区别_第1张图片

此时执行b=2直接将 2 的值放在 b 的stack中,如:

普通类型和对象的区别_第2张图片

所以b的改变并没有影响到aa的结果还是1

  • 第二题
var a = {name: 'a'}
var b = a
b = {name: 'b'}
请问现在 a.name 是多少?

普通类型和对象的区别_第3张图片

从上图可知对于复杂类型,在栈(Stack)上存储的是一个地址,在堆(Heap)上存储的是数据。按照地址有指向关系。运行到var b = a时,是将a中的addr1地址复制一份放到bstack中。当运行b = {name: 'b'}时是在heap中重新开出一块放置{name: 'b'}且地址为2,并且b的地址更改为addr2。这个时候b指向addr1的作废,重新指向2。所以这个时候a还是原来的。即a.name的结果是a

  • 第三题
var a = {name: 'a'}
var b = a
b.name = 'b'
请问现在 a.name 是多少?

普通类型和对象的区别_第4张图片

当运行至var b = aab的指向相同,此时运行b.name = 'b',更改了heap中地址1中的信息,如图所示。所以这个时候a.name的结果是{name: 'b'}

  • 第四题
var a = {name: 'a'}
var b = a
b = null
请问现在 a 是什么?

普通类型和对象的区别_第5张图片

当运行至var b = aab的指向相同,这个时候运行b = null(这是一个普通类型,直接将null的值在stack中给向b),所以导致bheap中的指向消失并没有改变heap内存中数据。所以a的结果还是本身,即{name: 'a'}

小结

JS在数据区分为栈内存(Stack)和堆内存(Heap)。普通类型只是在栈内存中运行,而对象的是堆内存中存储数据在栈内存中存储heap地址,同过引用(指向)简历关系。
值类型之间传递的是值,引用类型之间传递的是地址(引用)。
值类型作为函数的参数传递的是值,引用类型作为函数的参数传递的是地址(引用)。

深拷贝和浅拷贝

var a = 1
var b = a
b = 2 

上边的代码中当对b改变a完全不受影响,即为深拷贝。
对于简单类型中,赋值就是深拷贝。
对于复杂类型(对象),就有深拷贝和浅拷贝一说。因为复杂类型存在引用关系,所以在更改其中一个对象时,两者的指向还是相同的,即存在一个发生变化,另个也一起变化。

GC 垃圾回收机制

如果一个对象没有被引用,就是垃圾,将被回收。

普通类型和对象的区别_第6张图片

普通类型和对象的区别_第7张图片
普通类型和对象的区别_第8张图片

图中例1中被圈起来的就是垃圾,会被回收。
例2中function(){}不是垃圾,因为它被其它所引用。

附:易踩坑面试题
普通类型和对象的区别_第9张图片

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