javascript-浅拷贝和深拷贝

1.js对象浅拷贝

简单的赋值就是浅拷贝。因为对象和数组在赋值的时候都是引用传递。赋值的时候只是传递一个指针。

看下面的实例代码：

var a = [1,2,3];
var b =a ;
var test = {name:'xiaohong', age:15};
var c = test;

console.log(a);
console.log(b);
console.log(test);
console.log('-------------------');
b[0] =5;
c.age = 16;
console.log(a);
console.log(b);
console.log(test);
console.log(c);
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

结果如下： 

浅拷贝很容易，但是很多时候我们需要原样的把数组或者对象复制一份，在修改值的时候，不改变初始对象的值。这个时候就需要使用深拷贝。

2.js对象深拷贝

因为对象相对较为复杂，所以我们先来看对数组的深拷贝的问题。

数组的深拷贝

function deepCopy(arr){
    var newArr=[];
    for(var i=0;i<arr.length;i++){
        if(arr[i] instanceof Array){
            newArr[i]=deepCopy(arr[i]);
        }
        else{
            newArr[i]=arr[i];
        }
    }
    return newArr;
   }

var b = [[1,2,3],4,5];
var c = [[1,[2,3]],4,5];
document.write(deepCopy(b));
document.write(deepCopy(b[0]));

对象的深拷贝

function Test(){
    this.name="Test";
    this.age=18;
    this.run=function(){
        console.log('run');
    }
   }
   function ChildTest(){
    this.name="ChildTest";
    this.age=10;
    this.sing=function(){
        console.log("sing");
    }
   }
   ChildTest.prototype=new Test();
   var children=new ChildTest();
  // children.sing();
   /*for(var key in children){
        console.log(key);
   }*/
   /*当我们使用for …in 遍历一个对象的时候他会向上查询原型链上得属性*/
   for(var key in children){
        if(children.hasOwnProperty(key)){
            console.log(key);
        }
   }

完整的clone一个对象的方法：

var cloneObject ={};
for (var key in children){
    if(children.hasOwnProperty(key)) {
        cloneObject[key] = children[key];
    }
}

jQuery中对数组的clone

使用jQuery进行对象的复制

jQuery.extend( [ deep ], target , object1 [, objectN... ] )
 
 
1
 
 
1

请根据前面语法部分所定义的参数名称查找对应的参数。

参数描述 
deep 可选/Boolean类型指示是否深度合并对象，默认为false。如果该值为true，且多个对象的某个同名属性也都是对象，则该”属性对象”的属性也将进行合并。 
target Object类型目标对象，其他对象的成员属性将被复制到该对象上。 object1 可选/Object类型第一个被合并的对象。 
objectN 可选/Object类型第N个被合并的对象。

 var d = $.extend({}, a)
    console.log(d);
    d.k2 = 3456;
    console.log(d);
    console.log(a);

可以知道,jquery中extend()不是复制引用，而是创建了新的对象

看下面一段代码对数组对象进行拷贝：

    var test = [1,2,34,];
    console.log(test);
    var contest= $.extend([],test);
    console.log(contest);
    contest.push(567);
    console.log(test);
    console.log(contest);
 
 
1
2
3
4
5
6
7
 
 
1
2
3
4
5
6
7

结果为：