Javascript系列之淺復(fù)制與深復(fù)制

MonoLog 發(fā)布于2019-08-21 17:17 / 2356人閱讀

摘要：定義淺復(fù)制如果復(fù)制引用，復(fù)制后的引用都是指向同一個(gè)對(duì)象的實(shí)例，彼此之間的操作會(huì)互相影響。淺復(fù)制數(shù)組淺復(fù)制利用數(shù)組方法和返回新數(shù)組特性，進(jìn)行復(fù)制。深復(fù)制對(duì)象深復(fù)制利用對(duì)象的和方法。

定義 淺復(fù)制

如果復(fù)制引用，復(fù)制后的引用都是指向同一個(gè)對(duì)象的實(shí)例，彼此之間的操作會(huì)互相影響。

深復(fù)制

深復(fù)制不是簡(jiǎn)單的復(fù)制引用，而是在堆中重新分配內(nèi)存，并且把源對(duì)象實(shí)例的所有屬性都進(jìn)行新建復(fù)制，以保證深復(fù)制的對(duì)象的引用圖不包含任何原有對(duì)象或?qū)ο髨D上的任何對(duì)象，復(fù)制后的對(duì)象與原來(lái)的對(duì)象是完全隔離的。

淺復(fù)制 數(shù)組淺復(fù)制

利用數(shù)組方法slice和concat返回新數(shù)組特性，進(jìn)行復(fù)制。

var arr = [1,2,3];
var new_arr = arr.concat();
arr[0] = "new";
console.log(new_arr);      //[1, 2, 3]

再來(lái)看一組情況：

var arr = [{name: "haha"}, [1,2,3]];
var new_arr = arr.concat();
arr[0].name = "lily";
console.log(new_arr.name);      //"lily"

可以看出，如果數(shù)組元素是基本數(shù)據(jù)類型，就會(huì)復(fù)制一份，互不影響，而如果是對(duì)象或者數(shù)組，就會(huì)只復(fù)制對(duì)象和數(shù)組的引用。

擴(kuò)展運(yùn)算符

var obj = { name: "jack" };
var a = [1, 2];
var b = [3, obj];
a.push(...b);
a   // [1, 2, 3, {name: "jack"}]
a[3].name = "rose";
b   // [3, {name: "rose"}]

Object.assign

var obj = { name: "jack" };
var copyObj = Object.assign({}, obj);
obj.name = "rose";
copyObj   // {name: "rose"}

自定義淺復(fù)制

function shallowCopy(obj) {
    if (typeof obj !== "object") return;
    var new_obj = obj instanceof Array ? [] : {};

    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            new_obj[key] = obj[key];
        }
    }
    return new_obj;
}
var source = {
    name: "source",
    child: {
        name:"child"
    },
    arr: [1,2,34],
    setName: function() { 
        this.name = "haha"; 
    }
};
var target = shallowCopy(source);
console.log(target);              //Object {name: "source", child:{ name:"child"}, arr: [1,2,34], setName: function }
source.child.name = "lily";
console.log(target.child.name);              //"lily"
source.name = "sam";
console.log(target.name);                   //"source"
source.arr[0] = 5;
console.log(target.arr);                   //"5,2,34"
source.setName = function() { console.log(this.name); };
console.log(target.setName );            //function(){ this.name = "haha";  }

由此可以看出，此方法確實(shí)可以復(fù)制object和array對(duì)象，但無(wú)法進(jìn)行深復(fù)制；但是可以復(fù)制function。

深復(fù)制 對(duì)象深復(fù)制

利用JSON對(duì)象的parse和stringify方法。

var source = {
    name: "source",
    child: {
        name:"child"
    },
    arr: [1,2,34],
    setName: function() { 
        this.name = "haha"; 
    }
};
var target = JSON.parse(JSON.stringify(source));
console.log(target);              //Object {name: "source", child:{ name:"child"}, arr:[1,2,34] }
source.child.name = "lily";
console.log(target.name);              //"child"
source.arr[0] = 5;
console.log(target.arr);              //"1,2,34"

由此可以看出，雖然此方法確實(shí)可以復(fù)制object和array對(duì)象，并且進(jìn)行了深復(fù)制，卻無(wú)法復(fù)制function。

自定義深復(fù)制

function deepCopy(obj) {
    if (typeof obj !== "object") return;
    var new_obj = obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            new_obj[key] = typeof obj[key] === "object" ? deepCopy(obj[key]) : obj[key];
        }
    }
    return new_obj;
}
var source = {
    name: "source",
    child: {
        name:"child"
    },
    arr: [1,2,34],
    setName: function() { 
        this.name = "haha"; 
    }
};
var target = deepCopy(source);
console.log(target);              //Object {name: "source", child:{ name:"child"}, arr: [1,2,34], setName: function }
source.child.name = "lily";
console.log(target.child.name);              //"child"
source.name = "sam";
console.log(target.name);                   //"source"
source.arr[0] = 5;
console.log(target.arr);                   //"1,2,34"
source.setName = function() { console.log(this.name); };
console.log(target.setName );            //function(){ this.name = "haha";  }