理论 | JavaScript的深克隆和浅克隆

作者 | 二璇妹妹

链接 | http://www.jianshu.com/p/5d3a9f910440、

最近在复习，发现前端好多知识点牵一发动全身。 比如我想看一下JQuery的extend源码，就不得不再好好看看深克隆浅克隆的问题。 😢😢😢

什么是深克隆？

我们都知道，JavaScript有六种基本的数据类型。 五种基本的数据类型：string，number，undefined，boolean，null （在内存中表现为一个值，保存在栈中） 一种复杂的数据类型（引用类型）：object 【function，array，object】 （在内存中表现为一个指针，保存在堆中）

将一个对象的所有属性均复制，并将该对象与原对象放在内存中不同的位置，此时，改变新对象的属性不会对原对象造成影响，这种行为叫做深克隆。

我们还是先看浅克隆吧。。。

看他们的爱好：

浅克隆只是简单的复制对象，若对象其中一个属性是引用值，由于引用型变量保存的是内存的一个地址，所以后来的hobby属性，都指向内存中的同一块地址，最后输出的结果同样相同。 从上面的例子也可以看出，name等原始值的改变，并不会影响原对象中的原始值。

解决克隆引用值问题，还是需要深度克隆的！

for-in循环遍历对象上的所有属性，判断是否为引用值，若是，进行递归，直到所有属性都为原始值为止。 拷贝出来后，就是一个全新对像，就和之前没什么关系了，以前的改变也不能对新的产生影响！！

看他们的爱好：

一些扩展

• js里的concat函数 concat函数对数组进行了深度克隆 var a = [1,2,3]; console.log(a.concat(4,5)); //[1, 2, 3, 4, 5]console.log(a);// [1, 2, 3]
• jQuery.extend( [deep ], target, object1 [, objectN ] ) deep 类型: Boolean 如果是true，合并成为递归（又叫做深拷贝）默认值为false，表示浅拷贝。 target 类型: Object 对象扩展。这将接收新的属性。 object1 类型: Object 一个对象，它包含额外的属性合并到第一个参数. objectN 类型: Object 包含额外的属性合并到第一个参数

1.合并两个对象，并修改第一个对象

b覆盖了a的原有属性：

2.当继承的对象属性中有引用类型的时候，两个对象同时指向一个对象，改变一个另一个也随之改变。如果有相同属性，后边的会覆盖前边的

b的新属性添加到了a上：

扫码下方二维码，

随时关注更多前端干货文章！

▼

微信：IMWebTech