對象拷貝

前面的話

  對象拷貝分為淺拷貝(shallow)和深拷貝(deep)兩種。淺拷貝只復制一層對象的屬性，並不會進行遞歸復制，而javascript存儲對象都是存地址的，所以淺拷貝會導致對象中的子對象指向同一塊內存地址；而深拷貝則不同，它不僅將原對象的各個屬性逐個復制出去，而且將原對象各個屬性所包含的對象也依次采用深拷貝的方法遞歸復制到新對象上，拷貝了所有層級。本文將詳細介紹對象拷貝

 

淺拷貝

【方法一】簡單拷貝

  新建一個空對象，使用for-in循環，將對象的所有屬性復制到新建的空對象中

function simpleClone1(obj){
    if(typeof obj != 'object'){
        return false;
    }
    var cloneObj = {};
    for(var i in obj){
        cloneObj[i] = obj[i];
    }
    return cloneObj;
}

var obj1={a:1,b:2,c:[1,2,3]};
var obj2=simpleClone1(obj1);
console.log(obj1.c); //[1,2,3]
console.log(obj2.c); //[1,2,3]
obj2.c.push(4);
console.log(obj2.c); //[1,2,3,4]
console.log(obj1.c); //[1,2,3,4]

【方法二】使用屬性描述符

  通過對象的原型，建立一個空的實例對象。通過forEach語句，獲取到對象的所有屬性的屬性描述符，將其作為參數，設置到新建的空實例對象中

function simpleClone2(orig){
    var copy = Object.create(Object.getPrototypeOf(orig));
    Object.getOwnPropertyNames(orig).forEach(function(propKey){
        var desc = Object.getOwnPropertyDescriptor(orig,propKey);
        Object.defineProperty(copy,propKey,desc);
    });
    return copy;
}

var obj1={a:1,b:2,c:[1,2,3]};
var obj2=simpleClone1(obj1);
console.log(obj1.c); //[1,2,3]
console.log(obj2.c); //[1,2,3]
obj2.c.push(4);
console.log(obj2.c); //[1,2,3,4]
console.log(obj1.c); //[1,2,3,4]

【方法三】使用jquery的extend()方法

var obj1={a:1,b:2,c:[1,2,3]};
var obj2=$.extend({},obj1);
console.log(obj1.c); //[1,2,3]
console.log(obj2.c); //[1,2,3]
obj2.c.push(4);
console.log(obj2.c); //[1,2,3,4]
console.log(obj1.c); //[1,2,3,4]

 

深拷貝

【方法一】遍歷復制

  復制對象的屬性時，對其進行判斷，如果是數組或對象，則再次調用拷貝函數；否則，直接復制對象屬性

function deepClone1(obj,cloneObj){
    if(typeof obj != 'object'){
        return false;
    }
    var cloneObj = cloneObj || {};
    for(var i in obj){
        if(typeof obj[i] === 'object'){
            cloneObj[i] = (obj[i] instanceof Array) ? [] : {};
            arguments.callee(obj[i],cloneObj[i]);
        }else{
            cloneObj[i] = obj[i]; 
        }  
    }
    return cloneObj;
}

var obj1={a:1,b:2,c:[1,2,3]};
var obj2=deepClone1(obj1);
console.log(obj1.c); //[1,2,3]
console.log(obj2.c); //[1,2,3]
obj2.c.push(4);
console.log(obj2.c); //[1,2,3,4]
console.log(obj1.c); //[1,2,3]

【方法二】json

  用JSON全局對象的parse和stringify方法來實現深復制算是一個簡單討巧的方法，它能正確處理的對象只有Number、String、Boolean、Array、扁平對象，即那些能夠被json直接表示的數據結構

function jsonClone(obj){
    return JSON.parse(JSON.stringify(obj));
}

var obj1={a:1,b:2,c:[1,2,3]};
var obj2=jsonClone(obj1);
console.log(obj1.c); //[1,2,3]
console.log(obj2.c); //[1,2,3]
obj2.c.push(4);
console.log(obj2.c); //[1,2,3,4]
console.log(obj1.c); //[1,2,3]

【方法三】使用jquery的extend()方法

var obj1={a:1,b:2,c:[1,2,3]};
var obj2=$.extend(true,{},obj1);
console.log(obj1.c); //[1,2,3]
console.log(obj2.c); //[1,2,3]
obj2.c.push(4);
console.log(obj2.c); //[1,2,3,4]
console.log(obj1.c); //[1,2,3]