摘要：基本類型指的是簡單的數(shù)據(jù)段，而引用類型指的是一個對象保存在堆內存中的地址，不允許我們直接操作內存中的地址，也就是說不能操作對象的內存空間，所以，我們對對象的操作都只是在操作它的引用而已。

工作中經常會遇到需要復制 JavaScript 數(shù)據(jù)的時候，遇到 bug 時實在令人頭疼；面試中也經常會被問到如何實現(xiàn)一個數(shù)據(jù)的深淺拷貝，但是你對其中的原理清晰嗎？一起來看一下吧！

想要更加透徹的理解為什么 JavaScript 會有深淺拷貝，需要先了解下 JavaScript 的數(shù)據(jù)類型有哪些，一般分為基本類型（Number、String、Null、Undefined、Boolean、Symbol ）和引用類型（對象、數(shù)組、函數(shù)）。

基本類型是不可變的，任何方法都無法改變一個基本類型的值，也不可以給基本類型添加屬性或者方法。但是可以為引用類型添加屬性和方法，也可以刪除其屬性和方法。

基本類型和引用類型在內存中的存儲方式也大不相同，基本類型保存在棧內存中，而引用類型保存在堆內存中。為什么要分兩種保存方式呢？ 因為保存在棧內存的必須是大小固定的數(shù)據(jù)，引用類型的大小不固定，只能保存在堆內存中，但是我們可以把它的地址寫在棧內存中以供我們訪問。

說來這么多，我們來看個示例：

let num1 = 10;
let obj1 = {
    name: "hh"
}

let num2 = num1;
let obj2 = obj1;

num2 = 20;
obj2.name = "kk";

console.log(num1); // 10
console.log(obj1.name); // kk

執(zhí)行完這段代碼，內存空間里是這樣的：

可以看到 obj1 和 obj2 都保存了一個指向該對象的指針，所有的操作都是對該引用的操作，所以對 obj2 的修改會影響 obj1。

小結：

之所以會出現(xiàn)深淺拷貝，是由于 JS 對基本類型和引用類型的處理不同。基本類型指的是簡單的數(shù)據(jù)段，而引用類型指的是一個對象保存在堆內存中的地址，JS 不允許我們直接操作內存中的地址，也就是說不能操作對象的內存空間，所以，我們對對象的操作都只是在操作它的引用而已。
在復制時也是一樣，如果我們復制一個基本類型的值時，會創(chuàng)建一個新值，并把它保存在新的變量的位置上。而如果我們復制一個引用類型時，同樣會把變量中的值復制一份放到新的變量空間里，但此時復制的東西并不是對象本身，而是指向該對象的指針。所以我們復制引用類型后，兩個變量其實指向同一個對象，所以改變其中的一個對象，會影響到另外一個。

淺拷貝只是復制基本類型的數(shù)據(jù)或者指向某個對象的指針，而不是復制對象本身，源對象和目標對象共享同一塊內存；若對目標對象進行修改，存在源對象被篡改的可能。

我們來看下淺拷貝的實現(xiàn)：

/* sourceObj 表示源對象
 * 執(zhí)行完函數(shù)，返回目標對象
*/
function shadowClone (sourceObj = {}) {
    let targetObj = Array.isArray(sourceObj) ? [] : {};
    let copy;
    for (var key in sourceObj) {
        copy = sourceObj[key];
        targetObj[key] = copy;
    }
    return targetObj;
}

// 定義 source
let sourceObj = {
    number: 1,
    string: "source1",
    boolean: true,
    null: null,
    undefined: undefined,
    arr: [{name: "arr1"}, 1],
    func: () => "sourceFunc1",
    obj: {
        string: "obj1",
        func: () => "objFunc1"
    }
}

// 拷貝sourceObj
let copyObj = shadowClone(sourceObj);

// 修改 sourceObj
copyObj.number = 2;
copyObj.string = "source2";
copyObj.boolean = false;
copyObj.arr[0].name = "arr2";
copyObj.func = () => "sourceFunc2";
copyObj.obj.string = "obj2";
copyObj.obj.func = () => "objFunc2";

// 執(zhí)行
console.log(sourceObj);
/* {
    number: 1,
    string: "source1",
    boolean: true,
    null: null,
    undefined: undefined,
    arr: [{name: "arr2"}],
    func: () => "sourceFunc1",
    obj: {
        func: () => "objFunc2",
        string: "obj2"
    }
}
*/

深拷貝能夠實現(xiàn)真正意義上的對象的拷貝，實現(xiàn)方法就是遞歸調用“淺拷貝”。深拷貝會創(chuàng)造一個一模一樣的對象，其內容地址是自助分配的，拷貝結束之后，內存中的值是完全相同的，但是內存地址是不一樣的，目標對象跟源對象不共享內存，修改任何一方的值，不會對另外一方造成影響。

/* sourceObj 表示源對象
 * 執(zhí)行完函數(shù)，返回目標對象
*/
function deepClone (sourceObj = {}) {
    let targetObj = Array.isArray(sourceObj) ? [] : {};
    let copy;
    for (var key in sourceObj) {
        copy = sourceObj[key];
        if (typeof(copy) === "object") {
            if (copy instanceof Object) {
                targetObj[key] = deepClone(copy);
            } else {
                targetObj[key] = copy;
            } 
        } else if (typeof(copy) === "function") {
            targetObj[key] = eval(copy.toString());
        } else {
            targetObj[key] = copy;
        }
    }
    return targetObj;
}

// 定義 sourceObj
let sourceObj = {
    number: 1,
    string: "source1",
    boolean: true,
    null: null,
    undefined: undefined,
    arr: [{name: "arr1"}],
    func: () => "sourceFunc1",
    obj: {
        string: "obj1",
        func: () => "objFunc1"
    }
}

// 拷貝sourceObj
let copyObj = deepClone(sourceObj);

// 修改 source
copyObj.number = 2;
copyObj.string = "source2";
copyObj.boolean = false;
copyObj.arr[0].name = "arr2";
copyObj.func = () => "sourceFunc2";
copyObj.obj.string = "obj2";
copyObj.obj.func = () => "objFunc2";

// 執(zhí)行
console.log(sourceObj);
/* {
    number: 1,
    string: "source1",
    boolean: true,
    null: null,
    undefined: undefined,
    arr: [{name: "arr1"}],
    func: () => "sourceFunc1",
    obj: {
        func: () => "objFunc1",
        string: "obj1"
    }
}
*/

兩個方法可以合并在一起：

/* deep 為 true 表示深復制，為 false 表示淺復制
 * sourceObj 表示源對象
 * 執(zhí)行完函數(shù)，返回目標對象
*/ 
function clone (deep = true, sourceObj = {}) {
    let targetObj = Array.isArray(sourceObj) ? [] : {};
    let copy;
    for (var key in sourceObj) {
        copy = sourceObj[key];
        if (deep && typeof(copy) === "object") {
            if (copy instanceof Object) {
                targetObj[key] = clone(deep, copy);
            } else {
                targetObj[key] = copy;
            } 
        } else if (deep && typeof(copy) === "function") {
            targetObj[key] = eval(copy.toString());
        } else {
            targetObj[key] = copy;
        }
    }
    return targetObj;
}

（1）若拷貝數(shù)組是純數(shù)據(jù)（不含對象），可以通過concat() 和 slice() 來實現(xiàn)深拷貝；

let a = [1, 2];
let b = [3, 4];
let copy = a.concat(b);
a[1] = 5;
b[1] = 6;
console.log(copy);
// [1, 2, 3, 4]

let a = [1, 2];
let copy = a.slice();
copy[0] = 3;
console.log(a);
// [1, 2]

（2）若拷貝數(shù)組中有對象，可以使用 concat() 和 slice() 方法來實現(xiàn)數(shù)組的淺拷貝。

let a = [1, {name: "hh1"}];
let b = [2, {name: "kk1"}];
let copy = a.concat(b);
copy[1].name = "hh2";
copy[3].name = "kk2";
console.log(copy);
// [1, {name: "hh2"}, 2, {name: "kk2"}]

無論 a[1].name 或者 b[1].name 改變，copy[1].name 的值都會改變。

let a = [1, {name: "hh1"}];
let copy = a.slice();
copy[1].name = "hh2";
console.log(a);
// [1, {name: "hh2"}]

改變了 a[1].name 后，copy[1].name 的值也改變了。

Object.assign()、Object.create() 都是一層（根級）深拷貝，之下的級別為淺拷貝。
（1） 若拷貝對象只有一級，可以通過 Object.assign()、Object.create() 來實現(xiàn)對象的深拷貝；

let sourceObj = {
    str: "hh1",
    number: 10
}
let targetObj = Object.assign({}, sourceObj)
targetObj.str = "hh2"
console.log(sourceObj);
// {str: "hh1", number: 10}

let sourceObj = {
    str: "hh1",
    number: 10
}
let targetObj = Object.create(sourceObj)
targetObj.str = "hh2"
console.log(sourceObj);
// {str: "hh1", number: 10}

（2） 若拷貝對象有多級， Object.assign()、Object.create() 實現(xiàn)的是對象的淺拷貝。

let sourceObj = {
    str: "hh",
    number: 10,
    obj: {
        str: "kk1"
    }
}
let targetObj = Object.assign({}, sourceObj)
targetObj.obj.str = "kk2"
console.log(sourceObj);
// {
//     str: "hh",
//     number: 10,
//     obj: {
//         str: "kk2"
//     }
// }

let sourceObj = {
    str: "hh",
    number: 10,
    obj: {
        str: "kk1"
    }
}
let targetObj = Object.create(sourceObj)
targetObj.obj.str = "kk2"
console.log(sourceObj);
// {
//     str: "hh",
//     number: 10,
//     obj: {
//         str: "kk2"
//     }
// }

修改了 targetObj.obj.str 的值之后，sourceObj.obj.str 的值也改變了。

對象的解構同 Object.assign() 和 Object.create()，都是一層（根級）深拷貝，之下的級別為淺拷貝。

（1）若拷貝對象只有一層，可以通過對象的解構來實現(xiàn)深拷貝；

let sourceObj = {
    str: "hh1",
    number: 10
}
let targetObj = {...sourceObj};
targetObj.str = "hh2"
console.log(sourceObj);
// {str: "hh1", number: 10}

（2）若拷貝對象有多層，通過對象的解構實現(xiàn)的是對象的淺拷貝。

let sourceObj = {
    str: "hh",
    number: 10,
    obj: {
        str: "kk1"
    }
}
let targetObj = {...sourceObj};
targetObj.obj.str = "kk2"
console.log(sourceObj);
// {
//     str: "hh",
//     number: 10,
//     obj: {
//         str: "kk2"
//     }
// }

用 JSON.stringify() 把對象轉成字符串，再用 JSON.parse() 把字符串轉成新的對象，可以實現(xiàn)對象的深復制。

let source = ["hh", 1, [2, 3], {name: "kk1"}];
let copy = JSON.parse(JSON.stringify(source));
copy[2][1] = 4;
copy[3].name = "kk2";
console.log(source);
// ["hh", 1, [2, 3], {name: "kk1"}]

可以看出，雖然改變了 copy[2].name 的值，但是 source[2].name 的值沒有改變。

JSON.parse(JSON.stringify(obj)) 不僅能復制數(shù)組還可以復制對象，但是幾個弊端：
1）它會拋棄對象的 constructor，深拷貝之后，不管這個對象原來的構造函數(shù)是什么，在深拷貝之后都會變成 Object；
2）這種方法能正確處理的對象只有?Number, String, Boolean, Array, 扁平對象，即那些能夠被 json 直接表示的數(shù)據(jù)結構。RegExp 對象是無法通過這種方式深拷貝。
3）只有可以轉成 JSON 格式的對象才可以這樣用，像 function 沒辦法轉成 JSON。

以下兩種庫都能實現(xiàn)深淺拷貝，有各自的使用方法。

具體使用可以參考：官方文檔

具體使用可以參考：官方文檔