JS深拷貝的實現

基本類型和引用類型

學習js的深拷貝和淺拷貝首先要了解js的基本類型和引用類型。

基本類型

基本類型的數據存放在棧內存中，複製的時候是值傳遞，直接把5賦值給了number2

var number1 = 5;
var number2 = number1;

引用類型

引用類型的數據存放在堆內存中，棧內存中只存放具體的地址值，把object1賦值給object2的時候是把object1的地址值賦值給了object2，這個時候兩個對象同時指向堆內存中的同一數據。

var object1 = new Object();
var object2 = object1;

深拷貝和淺拷貝的區別

深拷貝在於引用類型的時候，淺拷貝只複製地址值，實際上仍是指向同一堆內存中的數據，深拷貝則是從新建立了一個相同的數據，兩者指向的堆內存的地址值是不一樣的。這個時候修改賦值前的變量數據不會影響賦值後的變量。

深拷貝的實現

經過遞歸方式實現深拷貝

function deepClone(obj) {
    var target = {};
    for(var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            if (typeof obj[key] === 'object') {
                target[key] = deepClone(obj[key]); 
            } else {
                target[key] = obj[key];
            }
        }
    }
    return target;
}

經過json的方式實現

function (obj) {
    let tmp = JSON.stringify(obj); 
    let result = JSON.parse(tmp); 
    return result;
}

經過Object.create()實現

function deepCopy(obj) {
  var copy = Object.create(Object.getPrototypeOf(obj));
  var propNames = Object.getOwnPropertyNames(obj);
  
  propNames.forEach(function(name) {
    var desc = Object.getOwnPropertyDescriptor(obj, name);
    Object.defineProperty(copy, name, desc);
  });
  
  return copy;
}

var obj1 = { a: 1, b: {bc: 50, dc: 100, be: {bea: 1}} };
var obj2 = deepCopy(obj1);
console.log(obj2)
obj1.a = 20;
console.log(obj1)
console.log(obj2)
//Object {a: 1, b: Object}
//Object {a: 20, b: Object}
//Object {a: 1, b: Object}