兩者的區別：一個物件淺複製後，是深層次的物件地址的複製，並沒有開闢新的棧，也就是複製的結果是兩個物件指向同一個地址，修改其中一個物件的屬性，則另一個物件的屬性也會發生改變，而深複製的則是開闢了一個新的棧，兩個物件對應兩個不同的地址，修改一個物件的屬性，不會改變另一個物件的屬性。

話不多說，上程式碼：

// 原始物件
var obj = { 
	a:1, 
	arr: [2,3],
	say:function(){
		console.log('hello')
	},
	obj1:{
		arr:[34,55,5],
		hand:function(){
			console.log('hand')
		},
		obj3:{
			a:1,
			take:function(){
				console.log('take')
			}
		}
	}
};

// 開始淺複製
var shallowObj = shallowCopy(obj);

// 定義淺複製邏輯
function shallowCopy(src) {
  var dst = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      dst[prop] = src[prop];
    }
  }
  return dst;
}

// 改變複製後的新物件屬性值(第一層屬性)
shallowObj.a = 2; 
shallowObj.arr = [9,8];
shallowObj.say = function(){
	console.log('world')
}

// 列印新物件的及方法
console.dir(shallowObj)    
shallowObj.say();  // world
 


// 列印原物件及方法
console.dir(obj);
obj.say();  // hello

結果如圖所示：

結論 ： 修改新物件的屬性值，第一層的屬性值的確沒有變化，重點來了，我們給第二層以及更深層次的屬性複製試試

// 原始物件
var obj = { 
	a:1, 
	arr: [2,3],
	say:function(){
		console.log('hello')
	},
	obj1:{
		arr:[34,55,5],
		hand:function(){
			console.log('hand')
		},
		obj3:{
			a:1,
			take:function(){
				console.log('take')
			}
		}
	}
};

// 開始淺複製
var shallowObj = shallowCopy(obj);

// 定義淺複製邏輯
function shallowCopy(src) {
  var dst = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      dst[prop] = src[prop];
    }
  }
  return dst;
}

// 改變複製後的新物件的屬性值(第二層以及更深層次)
shallowObj.obj1.obj3.take = function(){
	console.log('shallowObj_take') 
}
shallowObj.obj1.hand = function(){
	console.log('shallowObj_hand')
}

// 列印新物件的方法呼叫
shallowObj.obj1.obj3.take();  // shallowObj_take
shallowObj.obj1.hand();      // shallowObj_hand

// 列印原物件的方法呼叫
obj.obj1.obj3.take();   // shallowObj_take
obj.obj1.hand();     // shallowObj_hand

問題出現了：原物件的方法被新物件的修改，而產生變化。
原因是複製的是物件的地址指標，兩個屬性共同指向一個物件，只要其一發生變化，另一個也隨之變化
 

深拷貝的方法：

1.可以遞迴遞迴去複製所有層級屬性

// 原始物件
var obj = { 
	a:1, 
	arr: [2,3],
	say:function(){
		console.log('hello')
	},
	obj1:{
		arr:[34,55,5],
		hand:function(){
			console.log('hand')
		},
		obj3:{
			a:1,
			take:function(){
				console.log('take')
			}
		}
	}
};

// 深複製邏輯(遞迴呼叫)
function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判斷obj子元素是否為物件，如果是，遞迴複製
                if(obj[key] && typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，簡單複製
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    

// 開始深複製
var shallowObj = deepClone(obj);

// 改變複製後的新物件的屬性值(第二層以及更深層次)
shallowObj.obj1.obj3.take = function(){
	console.log('shallowObj_take') 
}
shallowObj.obj1.hand = function(){
	console.log('shallowObj_hand')
}

shallowObj.obj1.obj3.take();  // shallowObj_take
shallowObj.obj1.hand();      // shallowObj_hand

obj.obj1.obj3.take();   // take
obj.obj1.hand();     // hand

結論：深拷貝後改變物件的屬性值，不會影響原始物件的值。
 

2.除了遞迴，我們還可以借用JSON物件的parse和stringify

function deepClone(obj){
    let _obj = JSON.stringify(obj),
            objClone = JSON.parse(_obj);
    return objClone
}    
let a=[0,1,[2,3],4],
    b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

3.除了上面兩種方法之外，我們還可以借用JQ的extend方法

$.extend( [deep ], target, object1 [, objectN ] )

deep表示是否深拷貝，為true為深拷貝，為false，則為淺拷貝

target Object型別 目標物件，其他物件的成員屬性將被附加到該物件上。

object1  objectN可選。 Object型別 第一個以及第N個被合併的物件。

let a=[0,1,[2,3],4],
    b=$.extend(true,[],a);
a[0]=1;
a[2][0]=1;
console.log(a,b);