JS引用類(lèi)型數(shù)據(jù)的淺拷貝與深拷貝

MangoGoing 發(fā)布于2019-08-21 16:53 / 1677人閱讀

摘要：拷貝到，屬性均順利拷貝。大輝小輝，小輝，大輝小輝，小輝，大輝但是，若修改的屬性變?yōu)閷?duì)象或數(shù)組時(shí)，那么對(duì)象之間就會(huì)發(fā)生關(guān)聯(lián)。深拷貝不希望對(duì)象之間產(chǎn)生關(guān)聯(lián)，那么這時(shí)候可以用到深拷貝。

淺拷貝

之前文章提到，在定義一個(gè)對(duì)象或數(shù)組時(shí)，變量存放的往往只是一個(gè)地址。當(dāng)我們對(duì)堆內(nèi)存中的對(duì)象復(fù)制時(shí)，如果屬性是對(duì)象或數(shù)組時(shí)，這時(shí)候我們拷貝的只是一個(gè)棧內(nèi)存的指針。因此b對(duì)象在訪(fǎng)問(wèn)該屬性時(shí)，會(huì)根據(jù)指針尋找到a對(duì)象指向的堆內(nèi)存對(duì)象，兩者的屬性值會(huì)指向同一內(nèi)存空間。

var a = {
    key1:"11111"
}
function Copy(p) {
    var c = {};
    for (var i in p) { 
    　　c[i] = p[i];
    }
    return c;
}
a.key2 = ["小輝","小輝"];
var b = Copy(a);
b.key3 = "33333";
alert(b.key1);     //1111111
alert(b.key3);    //33333
alert(a.key3);    //undefined
//對(duì)象中key1屬性是字符串，key2屬性是數(shù)組。a拷貝到b，12屬性均順利拷貝。給b對(duì)象新增一個(gè)字符串類(lèi)型的屬性key3時(shí)，b能正常修改，而a中無(wú)定義。說(shuō)明子對(duì)象的key3（基本類(lèi)型）并沒(méi)有關(guān)聯(lián)到父對(duì)象中，所以u(píng)ndefined。

b.key2.push("大輝");
alert(b.key2);    //小輝，小輝，大輝
alert(a.key2);    //小輝，小輝，大輝

但是，若修改的屬性變?yōu)閷?duì)象或數(shù)組時(shí)，那么對(duì)象之間就會(huì)發(fā)生關(guān)聯(lián)。從以上彈出結(jié)果可知，對(duì)b對(duì)象進(jìn)行修改，a、b的key2屬性值（數(shù)組）均發(fā)生了改變。其在內(nèi)存的狀態(tài)，可以用下圖來(lái)表示。

深拷貝

不希望對(duì)象之間產(chǎn)生關(guān)聯(lián)，那么這時(shí)候可以用到深拷貝。既然屬性值類(lèi)型是數(shù)組和或?qū)ο髸r(shí)只會(huì)傳址，那么我們就用遞歸來(lái)解決這個(gè)問(wèn)題，把要復(fù)制的對(duì)象中所有屬于對(duì)象的屬性類(lèi)型都遍歷賦給新對(duì)象即可。

function Copy(p, c) {
    var c = c || {};
    for (var i in p) {
    　　if (typeof p[i] === "object") {
    　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
    　　　　　Copy(p[i], c[i]);
    　　} else {
    　　　　　c[i] = p[i];
    　　}
    }
    return c;
    }    
a.key2 = ["小輝","小輝"];
var b={};
b = Copy(a,b);        
b.key2.push("大輝");
alert(b.key2);    //小輝，小輝，大輝
alert(a.key2);    //小輝，小輝

過(guò)程如下圖