深度克隆---js对象引用

时间:2022-11-05 08:33:44

首先,我们要知道,javascript中除了基本类型(number,string,boolean,null,undefined)之外就是引用类型了,也可以说就是js对象了。

引用类型的赋值其实是对象保存在栈区地址指针的赋值,因此两个变量指向同一个对象,任何的操作都会相互影响。

在探讨到深度克隆之前,我们先来看一下下面的例子:

example01:

     var a = [1,2,3];
var b = a; // a b共用一个引用
b.push(4);
alert(b); // [1,2,3,4]
alert(a); // [1,2,3,4]

example02:

     var a = [1,2,3];
var b = a;
b = [1,2,3,4]; // b新开了一个引用
alert(b); // [1,2,3,4]
alert(a); // [1,2,3]

example03:

     var obj = {
a: 10
};
var obj2 = obj;
obj2.a = 20;
alert(obj.a); //

example04:

     var obj = {
a: 10
};
function copy(obj){ // 浅拷贝, 只拷贝的一层
var newObj = {};
for(var attr in obj){
newObj[attr] = obj[attr];
}
return newObj;
}
var obj2 = copy(obj);
obj2.a = 20;
alert(obj.a); //

example05:

     var obj = {
a: {
b: 10
}
}
function copy(obj){ //浅拷贝, 只拷贝了一层
var newObj = {};
for(var attr in obj){
newObj[attr] = obj[attr];
}
return newObj;
}
var obj2 = copy(obj);
obj2.a.b = 20;
alert(obj.a.b); //

看完上面几个例子之后,想必对js对象引用有了一定的认识。接下来,我们来看js里面另外一个重要的应用---递归。

递归定义可以分为两点:(1).函数调用函数自身,执行递的动作;(2).最后一次判断一个终止条件,可以执行归的动作。

example06:

     //求nX(n-1)X(n-2)X...X2X1

      function test(n){
if(n == 1){
return 1;
}
return n*test(n-1);
}
alert(test(5)); //

所以,深拷贝也用到了递归。

对象的子对象也是引用,所以遍历赋值的时候要判断,子元素是否是对象,如果子元素是对象,则继续对子元素进行遍历赋值

example07:

     //深拷贝
function deepClone(obj){
var newObj = {};
if(typeof obj != 'object'){
return obj;
}
for(var attr in obj){
newObj[attr] = deepClone(obj[attr]);
}
return newObj;
}
var obj = {
a: {
b: 10
}
};
var obj2 = deepClone(obj);
obj2.a.b = 20;
alert(obj.a.b); //