解析js物件的淺複製與深複製原理

2021-09-17 02:29:38 字數 1111 閱讀 6105

試想這樣一種場景，自己編寫了乙個js外掛程式，呼叫外掛程式時引數是以物件的形式傳入的，外掛程式也有自己的預設值，當執行的時候就涉及到傳入引數和預設值的合併，即用到物件的深複製和淺複製。

假設有兩個物件

var obja = ;


var objb = {};
現在想把物件a的值複製給b，由於物件a的兩個值都是原始型別，用淺複製即可。

function copy(sub, sup) 


}copy(objb, obja);
但是，假如物件a的其中乙個值是引用型別。

var obja = 


}};var objb = {};


copy(objb, obja);


objb.b.c() // 結果為c
執行複製的函式時也可以複製成功，但是存在著乙個潛在的風險，即當修改物件a的b.c的值時，物件b也跟著改變了。

copy(objb, obja);


objb.b.c() // 結果為c


obja.b.c = function () 


objb.b.c() // 結果為d
雖然我們修改的是obja的b.c的值，但是objb中的值也跟著改變了。要是在多人協同的大專案中，其中乙個人修改了乙個物件的值會導致其他人的值全部改變，這顯然不是我們想要的結果，於是需要進行深複製。

簡單來說深複製就是當遇到值是物件型別的時候就再執行一遍複製。

function deepcopy (sub, sup) ;


deepcopy (sub[key], sup[key]);


} else 


}}
執行深複製後，即使改變obja中b.c的值，也不會影響objb的值。

deepcopy(objb, obja);


objb.b.c() // 結果為c


obja.b.c = function () 


objb.b.c() // 結果仍舊為c
這就是深複製與淺複製的區別，其實在本質上是一樣的，感興趣的可以研究jquery的$.extend()的原始碼。

js深複製淺複製

深淺複製主要是針對於js的引用資料型別的，因為他們不只一層，並且修改乙個變數是不希望修改到另外乙個變數。淺複製 只複製指向某個物件的指標，新舊物件共享一塊記憶體，修改新物件會改到原物件上。深複製 不共享記憶體，修改新物件不會改到原物件上。淺複製實現 js 簡單的賦值操作一般實現的都是淺複製。深複製實...

淺複製與深複製

舉個複製 的例子 function clone p,s for var prop in p return s var a var b clone a,b b.hobby 1 reading b.hobby 1 reading c.hobby 1 reading 由上面的例子可以看出，當執行淺複製時，...

深複製與淺複製

2者主要區別 是否為成員變數分配新記憶體空間 複製建構函式有2種 深複製與淺複製 當將乙個物件a複製給另乙個物件b時，系統會呼叫複製建構函式 編譯器預設的複製建構函式是淺拷貝，它將原物件的每乙個成員變數複製到新物件的成員變數中去。因而最後兩個物件的變數均指向相同的資料成員的記憶體位址。當資料成員中沒...