深拷贝与浅拷贝的实现（一）| AlloyTeam

深拷贝与浅拷贝的实现（一）

In 未分类 on 2017年08月08日 by TAT.yana view: 22,787

最近的学习中，仔细研究了下深拷贝和浅拷贝，下面就来简单的总结下。

数据类型

首先我们了解下两种数据类型：
1、基本类型：像 Number、String、Boolean 等这种为基本类型
2、复杂类型：Object 和 Array

浅拷贝与深拷贝的概念

接着我们分别来了解下浅拷贝和深拷贝，深拷贝和浅拷贝是只针对 Object 和 Array 这样的复杂类型的。
浅拷贝：

var a = {

myname: 'yana'

};

var b = a;

b.myname = '小雅';

console.log(b.myname); // 小雅

console.log(a.myname); // 小雅

var a = ['myname', 'yana'];

var b = a;

b[1] = '小雅';

console.log(a); // ["myname", "小雅"]

console.log(b); // ["myname", "小雅"]

可以看出，对于对象或数组类型，当我们将 a 赋值给 b，然后更改 b 中的属性，a 也会随着变化。
也就是说 a 和 b 指向了同一块内存，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝。

深拷贝：
刚刚我们了解了什么是浅拷贝，那么相应的，如果给 b 放到新的内存中，将 a 的各个属性都复制到新内存里，就是深拷贝。
也就是说，当 b 中的属性有变化的时候，a 内的属性不会发生变化。

浅拷贝

那么除了上面简单的赋值引用，还有哪些方法使用了浅拷贝呢？
Object.assign()
在 MDN 上介绍 Object.assign()："Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。"
复制一个对象

var target = {a: 1, b: 1};

var copy1 = {a: 2, b: 2, c: {ca: 21, cb: 22, cc: 23}};

var copy2 = {c: {ca: 31, cb: 32, cd: 34}};

var result = Object.assign(target, copy1, copy2);

console.log(target); // {a: 2, b: 2, c: {ca: 31, cb: 32, cc: 33}}

console.log(target === result); // true

可以看到，Object.assign() 拷贝的只是属性值，假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值。所以 Object.assign() 只能用于浅拷贝或是合并对象。这是 Object.assign() 值得注意的地方。

深拷贝

那么下面我们就来说说复杂的深拷贝。

jQuery.extend()
说到深拷贝，第一想到的就是 jQuery.extend()方法，下面我们简单看下 jQuery.extend() 的使用。
jQuery.extend( [deep ], target, object1 [, objectN ] )，其中 deep 为 Boolean 类型，如果是 true，则进行深拷贝。
我们还是用上面的数据来看下 extend() 方法。

var target = {a: 1, b: 1};

var copy1 = {a: 2, b: 2, c: {ca: 21,