這篇的內容可能跟 Vue 沒甚麼主要關係，只是會透過 Lodash.js 來解決深拷貝的問題。

會寫這篇是因為，最近在公司做的專案需要用到深拷貝，且需要深拷貝的物件比較大，進而研究做深拷貝效能方面的問題。

在用 lodash.js 的深拷貝前，先理解甚麼是深拷貝(Deep copy)？

Javascript 中的「原始型別」和「非原始型別」

補充：JavaScript 的資料型別與資料結構

原始型別 Primitive data types

如上面表格可以看到，原始型別有五個(Boolean、Number、String、Null、Undefined)。這五個是 Call by value：

這邊以 String 為例：

let myName = 'Hunter';
let myMentor = myName;

myMentor = 'Summer';

console.log(myName); // Hunter
console.log(myMentor); // Summer

當修改 myMentor 時，不會修改到 myName。

非原始型別 Non-Primitive data types

嚴格來說只有 Object 才是 非原始型別 (non-primitive data)，但表格中其他四項(Array、Function、Date、RegExp)也都是屬於 Object，是 Call by reference：

以 Object 為例：

let myName = {
  name: 'Hunter'
}
let myMentor = myName;

myMentor.name = 'Summer';

console.log(myName); // Summer
console.log(myMentor); // Summer

當修改 myMentor 時，myName也跟著
被修改了，因為他們根本是同一個物件。

若要避免這樣的情況，我們就要做深拷貝，避免修改到myName。

淺拷貝 (Shallow Copy) VS 深拷貝 (Deep Copy)

圖片來源：http://larry850806.github.io/2016/09/20/shallow-vs-deep-copy/

• 淺拷貝(Shallow Copy)僅複製物件的指標，因此新舊物件是共用同一塊記憶體。

• 深拷貝(Deep Copy)會創造一個新的物件，因此新舊物件不會互相影響，存在於不同記憶體。

Deep Copy 方法

而做到 Deep Copy 的方式有很多種：

• 手動複製
• Object.assign
• JSON.parse(JSON.stringify(obj))

或是使用第三方函式庫：

• jQuery: $.clone(), $.extend()
• Underscore: _.clone()
• lodash: _.clone(), _.cloneDeep()

之後會補另外一個 Lodash 效能比較的連結。

延伸閱讀傳送門：

• [Javascript] 關於 JS 中的淺拷貝和深拷貝]，這篇淺顯易懂。

• 深入剖析 JavaScript 的深複製，這篇不僅比較了各種深拷貝的功能特性，也測試了執行效率，該作者更開發了比 Lodash 更有效率的深拷貝函式。