任务二十二 普通类型和对象的区别

简单类型:number、string、boolean、undefined、null、symbol
复杂类型(引用类型):object
浏览器的JS引擎在得到内存后会划分为两个区域代码区数据区,在数据区划分为栈内存(Stack)堆内存(Heap)
简单类型的数据之间存在Stack中,复杂类型的Stack存的Heap中的地址。

1.浅拷贝与深拷贝

通过几道题目来理解一下

var a = 1
var b = a
b = 2
//请问 a 显示是几? 
a=1
任务二十二 普通类型和对象的区别_第1张图片

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

可得到b=2
用a赋值b,但是a的值不受影响这就是深拷贝。

var a = {name: 'a'}
var b = a
b = {name: 'b'}
//请问现在 a.name 是多少?
//a
任务二十二 普通类型和对象的区别_第3张图片

由图来理解,a的赋值给b的是对象的地址1,而b = {name: 'b'}执行后,b会重新生成一个对象,b的stack内存中村的是地址2,与a没有了关系,这是深拷贝。

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

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

a和b的指向相同, b.name = 'b'改变了a和b共同的地址1指向的key:name,所以此时a.name='a',这是浅拷贝。

var a = {name: 'a'}
var b = a
b = null
//请问现在 a 是什么?
//a = {name: 'a'}
任务二十二 普通类型和对象的区别_第5张图片

null作为简单类型直接存进了b的stack,没有改变heap中a的内容,这是深拷贝。

2.引用类型

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

图中,a将地址34赋值给b,浏览器会先首先确定语句里的所有值,所以两个a都是确定的,都对应地址34,然后再从右往左依次赋值, a={n:2}新生成对象地址54,a(此时a地址已经先声明是34).x存入地址54。 alert(a.x)中a地址54,没有x属性所以输出undefined。

3.GC垃圾回收

var fn = function(){}
document.body.onclick = fn
fn = null
document.body.onclick = null
任务二十二 普通类型和对象的区别_第7张图片

没有被引用的对象会被回收。

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