淺拷貝

要想理解深拷貝，我們先來看一下淺拷貝，廢話不多說，直接上程式碼

var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);

function shallowCopy(src) {
  var dst = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      dst[prop] = src[prop];
    }
  }
  return dst;
}

看這個例子，我們把obj物件直接拷貝給了shallowObj,不過這樣有什麼問題呢，比如我們再給shallowObj增加一個屬性name：

shallowObj.arr.push('qing');
console.log(shallowObj);
console.log(obj)

可以看到obj也隨著發生了改變

因為淺複製只會將物件的各個屬性進行依次複製，並不會進行遞迴複製，而 JavaScript 儲存物件都是存地址的，所以淺複製會導致obj.arr 和 shallowObj.arr 指向同一塊記憶體地址。

大概的示意圖如下

深拷貝

• 遞迴實現

var people = {
     name:'xxx',
        friends:['people1','people2','peopple3'
 
],
        info:{
              phone:'133xxxxxxxx',
              age:'18',
              sex:'man'
        }   
}
function deepCopy(p, c) {
　　var c = c || {};
　　　　for (var i in p) {
　　　　　　if (typeof p[i] === 'object') {
　　　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
　　　　　　　　deepCopy(p[i], c[i]);
　　　　　　} else
 
 {
　　　　　　　　　c[i] = p[i];
　　　　　　}
　　　　}
　　　　return c;
　　}
var person = deepCopy(people);

• JSON實現

var result = JSON.parse(JSON.stringify(people))

我們給兩種方法得到的新物件增加方法

person.friends.push('qing');
result.friends.push('Leon');

可以看到結果如下

所以原物件不會隨著深拷貝過的物件而改變，深拷貝不僅將原物件的各個屬性逐個複製出去，而且將原物件各個屬性所包含的物件也依次採用深複製的方法遞迴複製到新物件上