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();   //或 return former.concat();
    }
    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

 

3. AngularJS:

   AngularJS 中也封装了深度克隆方法,该方法为

   angular.copy(source, [destination]);

   使用起来同 jQuery 一样方便,下面将 obj1 对象克隆到 obj5 对象:

var obj5 = {};
//方法一
obj5 = angular.copy(obj1);
//方法二
angular.copy(obj1, obj5);

   完。

   

补充:

   jQuery API可参考如下链接:

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

   AngularJS API可参考如下链接:

   http://docs.angularjs.cn/api