值型別與參考型別的區別
在解決js如何實作深拷貝的問題之前，首先我們要了解什么是值型別，什么是參考型別，話不多說，趕緊上圖！
圖1
圖1定義了number類的值型別，當改變了變數a的值，變數b的值并沒有受到任何影響，
圖2.1
圖2.1定義了一個obj1的物件，然后把obj1賦值給了obj2，當obj2的屬性name被改變之后，控制臺列印結果如圖2.2
為什么會出現這種現象呢？這個我們要從它的底層講起！
底層原理
| 堆疊記憶體 | |
| kye | value |
| a | 10 |
| b | 10 |
從底層邏輯來說，值型別的變數是存盤在堆疊記憶體當中，所以變數b是變數a拷貝出來的一個副本，當變數a加2的時候，變數b是不會改變的，a和b相對于兩個獨立的個體，變數b加2的底層邏輯如下表格，
| 堆疊記憶體 | |
| kye | value |
| a | 10 |
| b | 12 |
堆疊不僅存盤基本型別的資料，而且還存盤參考資料型別的地址指標，所以上述的圖2.1，實際上在堆疊記憶體中存盤的是obj1物件的地址，并非obj1的資料，真正保存物件的地方是堆記憶體，放一張圖給大家看應該會清晰一點，
上面的圖片，可以說明，obj1這個物件實際上在堆疊記憶體中存盤的是obj1的地址指標，而真正的屬性和值，則儲存在堆記憶體中，簡單粗暴點說，就是obj1和obj2是夫婦，obj1買了一套房子，也寫了obj2的名字，obj1的房子實際上也是obj2的房子， 所以修改obj2的值，實際上也是修改obj1的值，因為他們儲存的地址是一樣的！
深拷貝
入席以后湯喝完該上菜了！！！
假如obj1有一套房子，obj2也想擁有一套和obj1裝修風格一樣的房子，那他應該要怎么做呢？直接搶？nonono，醬紫是犯法滴！obj2可以通過復制obj1的裝修風格來完成這個心愿，上到燈光下到櫥窗，所以深拷貝（也叫深克隆）也是這樣的道理，我們可以通過寫一個deepClone()函式，讓物件obj1來實作對obj2所有資料的拷貝，
上菜！哦不是，上原始碼！
具體步驟：
1.創建一個deepClone()的函式，創建一個接收物件的形參obj{}
2.判斷是否是參考型別或者為空
3.判斷是物件還是陣列
4.使用（let key in obj）遍歷物件或者陣列
5.判斷是否為原型的屬性
6.遞回呼叫
代碼檢驗
最后我們檢驗一下代碼！
控制臺列印結果：
作者寄語
深克隆是開發面試愛考的知識點，同學們也可以自己嘗試去畫一下底層邏輯圖，這樣會更好地去理解深克隆的原理，關注我，一起挑戰互聯網高薪作業！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/317948.html
標籤：其他
上一篇：vue 中的 mixins的使用
下一篇：前端面試與學習