JavaScript深度克隆(递归)

时间:2021-09-14 10:36:13

今天在深度理解JQuery源码时,剖析extend时:

jQuery.extend = jQuery.fn.extend = function() {
//...
}

感觉该方法的一部分功能与深度克隆类似,恰好深度克隆的代码还没整理上传;

借此机会先上传一份深度克隆的代码;

代码若有不足之处,希望各位看官评论提示,一起学习进步。

// 遍历对象 for(var prop in obj)
// 1.判断是不是原始值 typeOf() object
// 2.判断是数组还是对象 instanceof toString constructor
// 3.建立相应的数组或对象
//递归
function deepClone(origin, target){
var target = target || {},
toStr = Object.prototype.toString,
arrStr = "[object Array]";
objStr = "[object Object]";
for(var prop in origin){ //object.hasOwnProperty(attribute)判断attribute是不是自己本身的属性(即不拷贝原型链上的属性)
if(origin.hasOwnProperty(prop)){
if(origin[prop] !== null && typeof(origin[prop]) == 'object'){
//origin[prop]调用toString方法的返回值是[object Array],target则赋值[],即为数组
if(toStr.call(origin[prop]) == arrStr){
target[prop] = toStr.call(target[prop]) == arrStr ? target[prop] : [] ;
}else{
target[prop] = toStr.call(target[prop]) == objStr ? target[prop] : {};
}
//遇到引用值,应用递归实现深度克隆
deepClone(origin[prop],target[prop]);
}else{
target[prop] = origin[prop];
}
}
}
return target;
}

简单的内容,测试代码很糙,有强迫症小哥哥小姐姐自己写一份吧,嘻嘻

var obj = {
name : "abc",
age : 123,
card : ['visa','master'],
wife : {
name : "bcd",
son : {
name : "aaa"
}
}
}
var obj1 = {}
deepClone(obj,obj1);