JS深拷貝繼承

2021-07-30 06:37:21 字數 1668 閱讀 8655

所謂深拷貝,就是子物件不緊繼承父物件的非引用屬性,還能繼承父物件的引用屬性(object,array),當子物件對繼承的引用型別屬性做修改時,父物件的引用型別不會被修改。

我們先寫個淺拷貝的封裝函式:

function

extendcopy(parent);

for(var i in

parent)

child.uber=parent;

return

child;

}

接下來寫個深拷貝的封裝函式:

function

deepcopy(p,c);

for(var i in

p);deepcopy(p[i],c[i]);

}else

}

return

c;}

分析兩個函式有何不同,extendcopy方法是將父物件的屬性和方法逐個的拷貝給子物件,當遇到引用型別的屬性時,比如陣列,那麼若對子物件拷貝而來的陣列進行重寫時,父物件對應的陣列也會隨之改變,因為他們指向的是同一位址。

而deepcopy方法:

舉個栗子:

var parent=

var child=deepcopy(parent);

執行deepcopy函式後,當執行到

if(typeof parent[score]==='object')時,

child[score]=;

再執行deepcopy(parent[score],child[score]);

此時typeof p[i]就不是'object'型別了,而是number型別,

所以child[score][1]=parent[score][1]=1;

child[score][2]=parent[score][2]=2;

child[score][3]=parent[score][3]=3;

child[score][4]=parent[score][4]=4;

在return child[score];

這樣就完成了深拷貝,child[score]和parent[score]不是指向同乙個位址了。但此時兩者值相同,只是位址不同,若再對child[score]做修改,parent[score]不會有任何變化。

我們來試驗一下:

var shape=

}

var circle=deepcopy(shape);

var tran=extendcopy(shape);

circle.size.push(5,6);

console.log(circle.size);

//[1,2,3,4,5,6]

console.log(shape.size);//

[1,2,3,4]  深拷貝父物件值沒有變化

tran.size.push(5,6,7,8);

console.log(circle.size);

//[1,2,3,4,5,6]

console.log(tran.size);//

[1,2,3,4,5,6,7,8]

console.log(shape.size); //

[1,2,3,4,5,6,7,8] 淺拷貝隨著tran.size的改變,shape.size也會隨之改變,

js深轉殖深拷貝

不足之處是不能拷貝函式,但是基本夠用 const deepcopy obj json parse json stringify obj 如果涉及拷貝函式 簡單一點 function copy object for const k,v of object.entries object return o...

js淺拷貝深拷貝

js淺拷貝深拷貝 對於想要複製的物件,如果物件裡面對應的值都是基本資料型別的,可以直接複製 也就是通過淺拷貝複製。如果對應的值有物件那麼淺拷貝是行不通的。會造成資料汙染。下面介紹淺拷貝與深拷貝實現方法。1.淺拷貝 let tem let copy for let key in tem 2.通過obj...

淺拷貝,深拷貝 js

堆和棧 基本型別 存放在棧中的簡單資料段,資料大小確定,記憶體空間大小可以分配。6種基本資料型別 undefined null boolean number和string,es6新增屬性symbol.他們是直接按值存放的,所以可以直接訪問。引用型別 存放在堆記憶體中的物件,變數實際儲存的是乙個指標,...