JS 淺拷貝與深拷貝

最近的一個Vue專案中，遇到了一個修改新物件的屬性值時，原物件的屬性值也跟著改變了的問題。然後思考 JS 中是否有著類似 Java 的引用地址傳遞的思想，查了下在 JS 中的稱呼為深拷貝。在此區分下淺拷貝與深拷貝的概念。

部落格參考文章: https://www.cnblogs.com/echolun/p/7889848.html

1、淺拷貝

淺拷貝針對基本資料型別，number, string, boolean, null, undefined, ES6的 symbol 以及ES10的 BigInt 七類，B複製了A,B的數值改變，不會影響到A。

a.基本型別--名值儲存在棧記憶體中

當b=a複製時，棧記憶體會新開闢一個記憶體：

實現方式

直接用 = 賦值

var a = 1;
var b = a;
console.log(a,b); //1,1
b = 2;
console.log(a,b); //1,2

2、深拷貝

淺拷貝針對引用資料型別，object, array, function等，B複製了A,B的數值改變，A的數值也跟著改變。

b.引用資料型別--名存在棧記憶體中，值存在於堆記憶體中，但是棧記憶體會提供一個引用的地址指向堆記憶體中的值，我們以上面淺拷貝的例子畫個圖：

當b=a進行拷貝時，其實複製的是a的引用地址，而並非堆裡面的值。

而當我們a[0]=1

實現方式

我這裡直接採用JSON.stringify與JSON.parse實現深拷貝

function deepClone(a) {
  var b = JSON.stringify(a),
    objClone = JSON.parse(b);
  return objClone;
}

一般用此方法足矣，若想深拷貝物件裡面的方法，請使用其他方式。