JavaScript 复制对象

在JavaScript这门语言中，数据类型分为两大类：基本数据类型和复杂数据类型。基本数据类型包括Number、Boolean、String、Null、String、Symbol（ES6 新增），而复杂数据类型包括Object，而所有其他引用类型（Array、Date、RegExp、Function、基本包装类型（Boolean、String、Number）、Math等）都是Object类型的实例对象，因此都可以继承Object原型对象的一些属性和方法。

而对于基本数据类型来说，复制一个变量值，本质上就是copy了这个变量。一个变量值的修改，不会影响到另外一个变量。看一个简单的例子。

而对于复杂数据类型来说，同基本数据类型实现的不太相同。对于复杂数据类型的复制，要注意的是，变量名只是指向这个对象的指针。当我们将保存对象的一个变量赋值给另一个变量时，实际上复制的是这个指针，而两个变量都指向都一个对象。因此，一个对象的修改，会影响到另外一个对象。

有一副很形象的图描述了复杂数据类型复制的原理

同理，在复制一个数组时，变量名只是指向这个数组对象的指针；在复制一个函数时，函数名只是指向这个函数对象的指针

因此，我们应该如何实现对象的深浅复制?

在JavaScript中，复制对象分为两种方式，浅复制和深复制。

浅复制没有办法去真正的去复制一个对象，而只是保存了对该对象的引用；而深复制可以实现真正的复制一个对象。

在ES6中，Object对象新增了一个assign方法，可以实现对象的浅复制。这里谈谈Object.assign方法的具体用法，因为稍后会分析jQuery的extend方法，实现的原理同Object.assign方法差不多

Object.assign的第一个参数是目标对象，可以跟一或多个源对象作为参数，将源对象的所有可枚举（`emuerable` === true）复制到目标对象。这种复制属于浅复制，复制对象时只是包含对该对象的引用。<code>Object.assign(target, [source1, source2, ...])</code>

如果目标对象与源对象有同名属性，则后面的属性会覆盖前面的属性

如果只有一个参数，则直接返回该参数。即<code>Object.assign(obj) === obj</code>

如果第一个参数不是对象，而是基本数据类型（Null、Undefined除外），则会调用对应的基本包装类型

如果第一个参数是Null和Undefined，则会报错；如果Null和Undefined不是位于第一个参数，则会略过该参数的复制

要实现对象的浅复制，可以使用Object.assign方法

不过对于深复制来说，Object.assign方法无法实现

从上面代码中可以看出，source2对象中e属性的改变，仍然会影响到obj对象

在实际的开发项目中，前后端进行数据传输，主要是通过JSON实现的。JSON全称：JavaScript Object Notation，JavaScript对象表示法。

JSON对象下有两个方法，一是将JS对象转换成字符串对象的JSON.stringify方法；一个是将字符串对象转换成JS对象的JSON.parse方法。

这两个方法结合使用可以实现对象的深复制。也就是说，当我们需要复制一个obj对象时，可以先调用JSON.stringify(obj)，将其转换为字符串对象，然后再调用JSON.parse方法，将其转换为JS对象。就可以轻松的实现对象的深复制

当然，使用这种方式实现深复制有一个缺点就是必须给JSON.parse方法传入的字符串必须是合法的JSON，否则会抛出错误

jQuery.extend对象，对使用jQuery超过一定时间的朋友来说并不默认。这个$.extend方法可以用来扩展jQuery的全局对象，而$.fn.extend方法可以用来扩展实例对象。fn实际上是prototype对象的别名，所以，扩展实例对象的方法实际上就是在jQuery原型对象上添加一些方法。

$.extend方法不仅可以用来写jQuery插件，同样的，它可以用来实现对象的深浅复制。（使用$.extend与$.fn.extend实现深浅复制都可以，唯一的差别就是this的指向性不同）

在具体分析源代码之前，我在源码中看到的$.extend方法的一些特点

当不接受任何参数时，直接返回一个空对象

当只有一个参数时（这个参数可以任何数据类型（Null、Undefined、Boolean、String、Number、Object）），会返回this对象，这里会分为两种情况。如果用$.extend，会返回jQuery对象；如果用$.fn.extend，会返回jQuery的原型对象。

当接收两个参数时，并且第一个参数是Boolean值时，也会返回一个空对象。如果第一个参数不是Boolean值，那么会将源对象复制到目标对象

当接收三个参数以上时，可以分为两种情况。如果第一个参数是Boolean值表示深浅复制，那么目标对象会移动到第二个参数，源对象会移动到第三个参数。（目标对象、源对象和Object.assign方法中的相同）。如果第一个参数不是Boolean值，那么用法与Object.assign方法常规的复制相同。

在循环源对象的过程中，任何数据类型为Null、Undefined或者源对象是一个空对象时，在复制的过程中都会被忽略。

如果源对象和目标对象具有同名的属性，则源对象的属性会覆盖掉目标对象中的属性。如果同名属性是一个对象的话，则会在deep=true等其他条件下向目标对象的该同名对象添加属性

下面贴出jQuery-2.1.4中jQuery.extend实现方式的源代码

因此，可以针对分析过后的源码，给出一些例子

因此，可以根据$.extend方法，写出一个通用的实现对象深浅复制的函数，copyObject函数唯一的不同就是当i === arguments.length属性时，copyObject函数直接返回了target对象

}

本文转自帅气的头头博客51CTO博客，原文链接http://blog.51cto.com/12902932/1925711如需转载请自行联系原作者

sshpp