js 中的 深拷貝與淺拷貝

js在平時的項目中，指派操作是最多的；比如說：

1  var person1 = {
 2          name:"張三",
 3          age:18,
 4          sex:"male",
 5          height:180,
 6          weight:14012  }
13  var person2 = person1;
14  console.log(person2)
15  person2.name = "李四";
16      

這段代碼，console.log 列印出來的結果 person1 和person2的值是一樣的。原因就是 person2 person1 都是引用類型；person2的引用位址 和person1的引用位址是一樣的；是以改變person2，person1也是跟着person2 一起變化。因為改變的是同一個值。如果不明白的​

那麼問題來了，怎麼讓 person2 複制 person1的值，并且 person2改變值，不影響 person1 的值？？？

這裡，我們可以重新建立person3，person3是個空對象；person3循環擷取person1的值。即：

1 var person3 = {}
2  for(var key in person1){
3      person3[key] = person1[key]
4  }
5  console.log(person3);
6  person3.name = "王五";
7      

這裡 person3 的name變成了王五，但是呢 person1的name 還是張三；

這個就是淺拷貝；

但是問題又接着出現了；

這個時候，我把person1修改了一下；增加了一個son對象；并且了，我封裝了淺拷貝，把他做成了函數：

1 function clone(origion,target){
 2     var tar = target?target:{};
 3     for(key in origion){
 4         if(origion.hasOwnProperty(key)){
 5             tar[key] = origion[key];
 6         }
 7     }
 8 return tar;
 9 }
10 
11 Object.prototype.num = 1;
12  var person1 = {
13          name:"張三",
14          age:18,
15          sex:"male",
16          height:180,
17          weight:140,
18          son:{
19              first:"lucy",
20               second:"joy",
21               third:"Jhonn"
22          }
23  }
24 
25  var person4 = clone(person1);
　　　　person4.son.six = "ben"
26      

這個時候，person4的son 對象 有了這個 ben,但是 person1 的 son 對象也有。這個就是淺拷貝的一個問題，他隻能拷貝 對象 數組的 引用值；

這個時候，可以通過深拷貝來解決這個問題；

1 //深拷貝 js原生
 2  functionorigion：原始資料  target：目标資料
 3      var tar = target||{};
 4     for(key in origion){
 5         if(origion.hasOwnProperty(key)){
 6             if(MyTypeOf(origion[key]) == "Array" ){
 7                 tar[key] = [];
 8                 deepClone(origion[key],tar[key]);
 9             }else if(MyTypeOf(origion[key]) == "Object"){
10                 tar[key] = {};
11                 deepClone(origion[key],tar[key]);
12             }
13             tar[key] = origion[key];
14             
15         }
16     }
17     return tar;
18  }
19 var person5 = deepClone(person1)
20 person5.son.fifth = "111111";
21      

當然還可以通過 json方式 來實作 深拷貝 JSON.stringify()

1  var person1 = {
 2          name:"張三",
 3          age:18,
 4          sex:"male",
 5          height:180,
 6          weight:140,
 7          son:{
 8              first:"lucy",
 9               second:"joy",
10               third:"Jhonn"
11          }
12  }；
13 
14 var str = JSON.stringify(person1)//把 person1轉成字元串
15 var  json = JSON.parse(str)//把字元串轉成 json對象，此時的person1 和 json實作了深拷貝