深复制和浅复制

JS的数据类型

在js中，变量的类型可以大致分成两种：基本数据类型和引用数据类型，其中基本数据类型指的是简单的数据段，包括：

Underfied
Null
Boolean
Number
String(字符串在一些其他语言中是被当做对象使用的，属于引用类型，但在js里是基本类型)

而引用类型的值指的是可能包含多个值的对象。可能上面这种描述大家都看过不少，但是有没有思考过为什么要把数据类型这样分呢？本质上，是因为基本数据类型保存在栈内存,而引用类型保存在堆内存中。那再进一步问：为什么要分两种保存方式呢？ 根本原因在于保存在栈内存的必须是大小固定的数据，引用类型的大小不固定，只能保存在堆内存中，但是我们可以把它的地址写在占内存中以供我们访问。举个例子:

var a = 1;//定义了一个number类型
var obj1 = {//定义了一个objr类型
    name:'obj'
};

在执行这段代码后，内存空间里是这样的：

2956107676-58d7ac8c7956d_articlex.png

因为这种保存方式的存在，所以我们在操作变量的时候，如果是基本数据类型，则按值访问，操作的就是变量保存的值；如果是引用类型的值，我们只是通过保存在变量中的引用类型的地址类操作实际对象。从而也引出了所谓的深浅复制问题。

深复制和浅复制

不同的复制方式

紧接着上文的内容，假设有以下代码：

//例子1
var a = 1;
var b = a;//复制
console.log(b)//1
a = 2;//改变a的值
console.log(b)//1

可以看到，我们复制完b以后，即使改变a的值，b也不会改变，因为a和b是相互独立的，按照上面的图，也就是在栈内存中创建了一个变量b 保存的值也是2；

//例子2
var color1 = ['red','green'];
var color2 = color1;//复制
console.log(color2)//['red','green'];
color1.push('black') ;//改变color1的值
console.log(color2)//['red','green','black']

在例子2中，我们按照完全相同的步骤，操作了一个数组，但是返回的结果却完全不一样，因为此时的复制，实际上是这样：

2956107676-58d7ac8c7956d_articlex.png

我们只是复制了一次引用类型的地址而已，所以，不管接下来我们是操作color1还是color2，本质上都是操作同一个数组对象。