问题由来
Javascript中对一个对象赋值,会存在以下问题
var obj1 = {
a: '1',
b: '2',
c:{
d:'3',
e:'4'
}
}
var obj2 = obj1;
console.log(obj2.c.d ); //3
console.log(obj2.c.d === '3'); //true
obj1.c.d = '33'
console.log(obj2.c.d ); //33
console.log(obj2.c.d === '3');//false
当你对一个对象进行赋值操作,其实并没有将这个对象在内存中重新拷贝一份出来,而是将原来内存的指针赋值,也就是说,obj1和obj2 在内存中指向的是同一个地方,那么如果一个发生修改,另一个也会发生变化。这就是浅复制。
那么如果可以复制一个obj 并不和原来的对象相关联那么就叫做深复制
··· 是我自己的理解
怎么进行深复制
我们平时的赋值都是浅复制,那怎么进行深复制呢?
方法一:jquery $.extend() 可以用参数来进行深复制
jQuery.extend第一个参数可以是布尔值,用来设置是否深度拷贝的:
jQuery.extend(true, { a : { a : "a" } }, { a : { b : "b" } } ); //深复制
jQuery.extend( { a : { a : "a" } }, { a : { b : "b" } } ); //浅复制
方法二:通过递归的方法
var obj1 = {
a: '1',
b: '2',
c:{
d:'3',
e:'4'
}
}
//深复制,要想达到深复制就需要用递归
function deepCopy(o,c){
var c = c || {}
for(var i in o){
if(typeof o[i] === 'object'){
//要考虑深复制问题了
if(o[i].constructor === Array){
//这是数组
c[i] =[]
}else{
//这是对象
c[i] = {}
}
deepCopy(o[i],c[i])
}else{
c[i] = o[i]
}
}
return c
}
var obj2 = {}
obj2 = deepCopy(obj1,obj2)
console.dir(obj2)
obj1.a = '111';
console.dir(obj1)
console.dir(obj2)
方法三:
var obj2 = JSON.parse(JSON.stringify(obj1))
深复制函数
var cloneObj = function(obj){
var str, newobj = obj.constructor === Array ? [] : {};
if(typeof obj !== 'object'){
return;
} else if(window.JSON){
str = JSON.stringify(obj),
newobj = JSON.parse(str);
} else {
for(var i in obj){
newobj[i] = typeof obj[i] === 'object' ?
cloneObj(obj[i]) : obj[i];
}
}
return newobj;
};