JS裏深拷貝和淺拷貝的釋義

本文解釋javascript中深拷貝和淺拷貝的區別。

淺拷貝/Shallow Copy

淺拷貝指拷貝了引用值。

var original = {"prop1" : "Prop1", "prop2" : "prop2"};
console.log(JSON.stringify(original));
// {"prop1" : "Prop1", "prop2" : "prop2"}

var shallowCopy = original;
console.log(JSON.stringify(shallowCopy));
// {"prop1" : "Prop1", "prop2" : "prop2"}

shallowCopy.prop1 = "ChangedProp1";

console.log(JSON.stringify(original));
// {"prop1" : "ChangedProp1", "prop2" : "prop2"}
console.log(JSON.stringify(shallowCopy));
// {"prop1" : "ChangedProp1", "prop2" : "prop2"}

https://smoothprogramming.com...

注意:

• 淺拷貝中，原始值和副本共享一樣的屬性。
• 淺拷貝只拷貝了對象引用。
• 淺拷貝中若是修改了拷貝對象會影響到原始對象，反之亦然。
• js中，數組和對象的賦值默認爲淺拷貝。

深拷貝/Deep Copy

深拷貝指遞歸的複製對象的屬性給新對象。jquery中咱們使用$.extend去進行深拷貝。

$.extend(deepCopy, target, object1, [objectN] )

第一個參數傳入true，指明此爲深拷貝，target爲目標對象，object1，原對象。

var original = {"prop1" : "Prop1", "prop2" : "prop2"};
console.log(JSON.stringify(original));
// {"prop1" : "Prop1", "prop2" : "prop2"}

var deepCopy = $.extend(true, {}, original);
console.log(JSON.stringify(deepCopy));
// {"prop1" : "Prop1", "prop2" : "prop2"}

deepCopy.prop1 = "ChangedProp1";

console.log(JSON.stringify(original));
// {"prop1" : "Prop1", "prop2" : "prop2"}
console.log(JSON.stringify(deepCopy));
// {"prop1" : "ChangedProp1", "prop2" : "prop2"}

https://smoothprogramming.com...

注意:

• 深拷貝中，副本和原對象不共享屬性
• 深拷貝遞歸的複製屬性
• 深拷貝的副本不會影響到原對象，反之亦然
• js中全部的原始數據類型默認執行深拷貝，好比Boolean, null, Undefined, Number,String等

譯者注：

• 實際工做中，一般所謂clone一個對象通常都是指深拷貝，即拷貝一個對象的副本。
• 有些時候一層的深拷貝被認爲是淺拷貝，好比shallowCopy({a:1,b:{hello:'world}}),b的值是一個對象，淺拷貝出來的新對象直接引用了原對象的value對象，因此也會相互影響的。
• 實際工做中，深拷貝（遞歸的對對象裏每一層值和對象進行拷貝）應用很普遍，我認爲淺拷貝只變成了一種概念，由於每個須要clone的地方都是深拷貝。
• 複製一個副本對象也能夠經過工廠函數，好比vuejs裏的data。