工作积累（四）——JavaScript深度克隆的实现

标签：javascript   克隆对象   

JavaScript 中的数据有两种大类，即基本类型和引用类型。因为引用类型使用指针，所以在简单赋值时不能实现克隆，下面介绍两种方法来实现 JavaScript 深度克隆。

1. 原生JavaScript：

function clone(former) {
if(!(former instanceof Object) ||former === null || (former instanceof RegExp) || (former instanceof Function)) return former;
        if(former instanceof Array) {
            return former.slice();
        }
        var latter = {};
        for(var attr in former) {
            latter[attr] = clone(former[attr]);
        }
        return latter;
}

其中，former 为传入的参数， latter 为克隆后返回的参数，假如我们现在有如下 obj1 对象：

var obj1 = {"name":"Lucy", "boyfriend": null, "measurements": [100,80,90], "sayHi": function() {console.log("HI~")}};

现在将 obj1 深度克隆为 obj2 ，检测一下两个对象是否相同：

var obj2 =clone(obj1);
obj1 === obj2  // false

如果我们简单的赋值，再检测一下两个对象是否相同：

var obj3 = obj1;
obj1 ===obj3  // true

2.jQuery API：

jQuery 中已经为我们封装了方法，可以实现深度克隆，该方法为jQuery.extend([deep],target, object1, [objectN]) 。当然该方法根据接收到的参数有很多不同的用处，这里我们不深究，单纯来看一下如何用它实现深度克隆。还是之前的 obj1 对象，像将其克隆到 obj4 ：

var obj4 = {};
jQuery.extend(true, obj4, obj1);
obj1 === obj4 // false

   完。

   jQuery API可参考如下链接：

   http://www.php100.com/manual/jquery/

本文出自 “细桶假狗屎” 博客，请务必保留此出处http://xitongjiagoushi.blog.51cto.com/9975742/1658932

工作积累（四）——JavaScript深度克隆的实现

标签：javascript   克隆对象   

原文地址：http://xitongjiagoushi.blog.51cto.com/9975742/1658932