JavaScript

Shallow Copy VS Deep Copy (JavaScript)

Shallow Copy VS Deep Copy　

Shallow Copy VS Deep Copy

  • Shallow Copy(淺拷貝): 只複製指向某個物件的指標，而不複製物件本身，新舊物件還是共用同一塊記憶體。
  • Deep Copy(深拷貝): 會另外創造一個一模一樣的物件，新物件跟原物件不共用記憶體，修改新物件不會改到原物件內容。

如何 Deep Copy

  1. 手動複製(建立一個物件，手動把值弄進去)
  2. Object.assign(ES6語法，該語法先建立一個空物件，再把指定值塞進去，限單層，多層需另外處理)
1
2
3
4
5
var obj1 = { a: 1, b: 2, c: 3 };
var obj2 = Object.assign({}, obj1);
obj2.b = 100;
console.log(obj1); // { a: 1, b: 2, c: 3 } <-- 值不變
console.log(obj2); // { a: 1, b: 100, c: 3 }
  1. 轉成 JSON 再轉回來(用JSON.stringify把物件轉成字串，再用JSON.parse把字串轉成新的物件，多層可以，有function情境不可，function沒辦法轉成JSON)
1
2
3
4
5
var obj1 = { fun: function(){ console.log(123) } };
var obj2 = JSON.parse(JSON.stringify(obj1));

console.log(typeof obj1.fun); // 'function'
console.log(typeof obj2.fun); // 'undefined' <-- 會undefined，
  1. 透過library處理，此處用JQuery處理
1
2
3
4
5
6
7
8
var obj1 = {
    a: 1,
    b: { f: { g: 2 } },
    c: [4, 5, 6]
};

var obj2 = $.extend(true, {}, obj1);
console.log(obj1.b.f === obj2.b.f); // false