談談深拷貝與淺拷貝

前言

關於深拷貝和淺拷貝實際上是兩個比較基礎的概念，可是我仍是想整理一下，由於裏面有不少小細節仍是頗有意思的。

深拷貝和淺拷貝的區別

深拷貝和淺拷貝是你們常常聽到的兩個名詞，二者到底有什麼不一樣呢？

先看看什麼是淺拷貝。

var obj1 = { a: 1, b: 2 };
var obj2 = obj1;
obj2.a = 3;

console.log(obj1); // { a: 3, b: 2 }
console.log(obj2); // { a: 3, b: 2 }

這是一個最簡單的淺拷貝的例子，我把obj1賦值給obj2，改變了obj2中的一個屬性值，obj1中的相應屬性值也跟着變化了，這是爲何呢？

由於淺拷貝其實只是引用的拷貝，二者仍是指向內存中的同一個地址。簡而言之，就是obj1和obj2其實指向的是同一個對象。打個比方，就像一個房間把門牌號1換成了門牌號2，可是這個房間仍是這個房間。

那深拷貝就是二者指向不一樣的內存地址，是真正意義上的拷貝。拿上面的房間舉例子，就是你真的從新開了一間房，並非只是換門牌號。

談談Object.assign()

Object.assign()是咱們常常用到的方法，其實這個方法就是淺拷貝。可是它又有一點特殊的地方，就是能夠處理第一層的深拷貝。

var obj1 = { a: 1, b: { c: 2 } };
var obj2 = Object.assign({}, obj1);
obj2.a = 3;
obj2.b.c = 3;
console.log(obj1); // { a: 1, b: { c: 3 } }
console.log(obj2); // { a: 3, b: { c: 3 } }

看上面的例子，屬性a的值並無跟着變，可是屬性b中的c的值跟着變了。

經常使用的實現深拷貝的方式

JSON

這是最經常使用的實現深拷貝的方式，直接看例子：

var obj1 = { a: { b: 1 } };
var obj2 = JSON.parse(JSON.stringify(obj1));

這種方法很簡單並且好用，可是有一點點瑕疵，它會拋棄對象的constructor。也就是深拷貝以後，無論這個對象原來的構造函數是什麼，在深拷貝以後都會變成Object。

並且這種方法能正確處理的對象只有 Number, String, Boolean, Array，即那些可以被JSON直接表示的數據結構。RegExp對象或者function是沒法經過這種方式深拷貝。

lodash

這是我我的目前使用的方法，只須要一行var obj2 = _.cloneDeep(obj1)就能實現。並且lodash是一個功能很強大的庫，提供的方法可靠又簡單，真的是懶人必備，點擊這裏去了解它吧！