JavaScript深度复制（deep clone）的实现方法(用js实现一个复杂对象深拷贝的算法)

编辑：rootadmin

推荐整理分享JavaScript深度复制（deep clone）的实现方法(用js实现一个复杂对象深拷贝的算法)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js数组深度复制,js深复制,js深复制函数,js数组深度复制,js深复制,js深浅复制,js深浅复制,js深复制和浅复制,内容如对您有帮助，希望把文章链接给更多的朋友！

在代码复用模式里面有一种叫做“复制属性模式”（copying properties pattern）。谈到代码复用的时候，很有可能想到的是代码的继承性（inheritance）,但重要的是要记住其最终目标——我们要复用代码。继承性只是实现代码复用的一种手段，而不是唯一的方法。复制属性也是一种复用模式，它跟继承性是有所不同的。这种模式中，对象将从另外一个在对象中获取成员，其方法是仅需将其复制即可。用过jQuery的都知道，它有一个$.extend()方法，它的用途除了扩展第三方插件之外，还可以用来复制属性的。下面我们来看一个extend()函数的实现代码（注意这里的并不是jQuery的源码，只是一个简单的示例）：

上面的代码是一个简单的实现，它仅遍历父对象的成员并将其复制到子对象中去。下面我们用上面的extend()方法来测试一下：

我们发现，extend()方法已经可以正常工作了。但是有一个问题，上面给出的是一种所谓的浅复制（shallow clone）。在使用浅复制的时候，如果改变了子对象的属性，并且该属性恰好又是一个对象，那么这种操作也会修改父对象，单是很多情况这不是我们想要的结果。考虑下列情况：

通过上面的例子，我们会发现，修改了kid.counts属性以后（把元素4追加进去了），dad.counts也会受到影响。这是因为在使用浅复制的时候，由于对象是通过引用传递的，即kid.counts和dad.counts指向的是同一个数组（或者说在内存上他们指向同一个堆的地址）。

下面，让我们修改extend()函数以实现深度复制。我们需要做的事情就是检查父对象的每一个属性，如果该属性恰好是对象的话，那么就递归复制出该对象的属性。另外，还需要检测该对象是否为一个数组，这是因为数组的字面量创建方式和对象的字面量创建方式不一样，前者是[]，后者是{}。检测数组可以使用Object.prototype.toString()方法进行检测，如果是数组的话，他会返回"[object Array]"。下面我们来看一下深度复制版本的extend()函数：

好了，深度复制的函数已经写好了，下面来测试一下看是否能够预期那样子工作，即是否可以实现深度复制：

通过上面例子，我们可以发现，即使修改了子对象的kid.counts和kid.reads，父对象的dad.counts和kid.reads并没有改变，因此我们的目的实现了。