關于賦值、淺拷貝、深拷貝，以前也思考良久，很多時候都以為記住了，但是，我太難了，今天我特地寫下筆記，希望可以完全掌握這個東西，也希望可以幫助到任何想對學習這個東西的同學，
一、堆疊、堆、指標地址
堆疊記憶體：個人理解是，基本資料型別和參考資料型別都會用到的一個空間，這個空間以key-value形式存在，value本身不可修改，只能賦值替換；堆疊會自動分配空間并且系統會自動釋放掉；
堆記憶體：堆，就是堆積，每一個被開辟的空間可以想象成一個空紙盒子，紙盒子所在的紙盒子堆就是 “堆” ，基本資料型別沒有堆的概念，堆，只針對參考資料型別，存盤方式應該是以物件（object）形式保存，物件內容包含key-value形式資料，value本身同樣不可修改，只能賦值替換；堆是動態分配的空間，并且系統不會自動釋放；
指標地址：針對參考資料型別在堆疊保存的值就是指標地址，地址指向保存在堆里面的物件，
二、賦值
賦值分兩個，一個是基本資料型別的賦值，一個是參考資料型別的賦值，基本資料型別賦的是 “值”，參考資料型別賦的是 “指標地址”，
1.基本資料型別賦值
1 //在堆疊內開辟一個空間，空間名稱叫a，存放值1； 2 var a = 1; 3 4 //在堆疊內開辟一個空間，空間名字叫b，接著先把a的值1復制一份，然后存放進b 5 var b = a;
如下圖：
2.參考資料型別賦值
1 //首先在堆疊開辟一個空間a存放指標地址，設指標地址為address1；同時會在堆里面開辟一個空間放置物件資料
2 var a = { 3 no: 1, 4 per: { 5 name: "jack" 6 }, 7 per2: { 8 name: "rose" 9 } 10 } 11 12 //a賦值給b,此時b會在堆疊開辟一個空間b，用來放置address1，這個指標指向a所在堆的物件資料 13 var b = a; 14 15 //修改賦值后的值b，其實就是修改b的指標address1所指向的物件資料 16 b.no = 1314; 17 18 //修改b會影響原資料（所有層次的資料都會影響） 19 //這個原資料其實不是原資料，因為a和b其實都是同一個資料 20 //就像從中國去美國，可以從a地點（比如北京）或者b地點（比如上海）坐飛機去，但是到達的都是同一個地方（也就是物件資料） 21 b.per.name = "王五"; 22 23 console.log(a, b)
上面代碼列印如圖：
對b的修改會影響a原本的值，對a的修改同樣會同步b的值，對a的修改本人沒有寫出，你們可以自己試試，結果是一樣的，
針對上面的代碼，參考資料型別賦值，如下圖所示：
無論修改a物件還是b物件，都是在修改 “obj” 這個物件
三、淺拷貝
參考資料型別的淺拷貝，代碼如下：
1 //在堆疊開辟一個空間a，存放a的指標地址，設指標地址為address2a，同時在堆開辟一個空間，設這空間為A，存放a物件資料 2 var a = { 3 no: 1, 4 per: { 5 name: "jack", 6 }, 7 per2: { 8 name: "rose" 9 } 10 } 11 12 //在堆疊開辟一個空間b，存放b的指標地址，設指標地址為address2b，同時在堆開辟一個空間，設這空間為B，存放b物件資料 13 var b = {}; 14 15 //對a的資料進行回圈，判斷如果有key，就把值賦到B對應的key位置 16 //這個回圈，遇到資料型別為基本資料型別，賦的是值；遇到參考資料型別，賦的是指標地址 17 for(var p in a) { 18 if(a.hasOwnProperty(p)) { 19 b[p] = a[p] 20 } 21 } 22 23 //對b的第一層修改 24 b.no = 1314; 25 b.per2 = []; 26 27 //對b的第二層修改 28 b.per.name = "王五"; 29 30 //淺拷貝，修改b后，第一層修改都不影響原資料，第二層以及以上層次的修改都影響原資料 31 //當前沒有寫第三層及以上層次，可自行測驗， 32 console.log(a, b)
運行結果如圖：
a的no和per（這個值表示整個值 “{name:"jack"}” ，不是指屬性值 “jack”，a.no和a.per都屬于第一層，a.per.name是第二層）還是原本的值，b的修改對a沒有任何影響，而b對per的屬性值的修改卻導致a的per的屬性值也變成了 “王五” ，也就是第二層或以上層次的修改會影響原資料，可以理解為，第二層或以上的淺拷貝，其實是上一節講的 “參考資料型別的賦值”，
總結如下圖：
上圖所示中，B空間內的資料含有no的值，也就是1；a物件資料的per和per2都是屬于參考物件資料，所以b保存的是它們的指標地址，分別指向了per和per2所在的地址位置，所以修改b物件資料的no的值不會影響a的no，修改per或per2的值就會影響a的per和per2，
四、深拷貝
深拷貝，說白了，就是對淺拷貝的遞回，也就是淺拷貝章節所述的，淺拷貝第一層已經被完全拷貝到新的地方，然后第二層以及以上層次，它們的屬性值又將都會被拷貝到新的地方，最后就井水不犯河水了，
代碼如下：
1 //在堆疊開辟一個空間a，存放a的指標地址，設指標地址為address3a，同時在堆開辟一個空間，設這空間為C，存放a物件資料 2 var a = { 3 no: 2, 4 per: { 5 name: "jack" 6 }, 7 per2: { 8 name: "rose" 9 } 10 } 11 12 //用遞回的方式對a進行拷貝屬性和值,然后賦值給temp，然后return出去，此時不拷貝指標地址， 13 function getDeep(obj) { 14 var temp = Array.isArray(obj) ? [] : {}; 15 for(var p in obj) { 16 if(typeof obj[p] == "object") { 17 temp[p] = getDeep(obj[p]) 18 } else { 19 temp[p] = obj[p] 20 } 21 } 22 return temp; 23 } 24 25 //在堆疊開辟一個空間b，存放b的指標地址，設指標地址為address3b，同時b在堆開辟一個空間，設這空間為D，存放temp的物件資料 26 var b = getDeep(a); 27 28 //深拷貝后，修改b的值，不論修改屬性值，還是整個值替換都不影響原資料a 29 b.no = 1314; 30 b.per = [] 31 b.per2 = { 32 name:"王五" 33 } 34 35 console.log(a, b)
淺拷貝只拷貝了第一層，深拷貝是拷貝到最后一層，代碼運行結果如圖：
可以理解為，a原本的東西被完全復制了一份，放到了b里面，然后對b的操作，就只關b的事情了，a原本是什么值，現在依然是什么值，b的修改對a完全沒有影響，
最后，可用下圖表示深拷貝：
C空間的值完全被復制到新的空間D，而C空間和D空間具體怎么修改都互不影響，
五、總結
1.賦值：
基本資料型別就是類似a同學有一臺電腦，b同學也想要，就也給b同學買了一臺一模一樣的電腦b，電腦a和電腦b各自怎么被操作都是a同學和b同學各自的事，電腦顯示互不影響（資料結果）；
參考資料型別就是只有一臺電腦，放在了電腦室，a同學和b同學各自從宿舍到電腦室操作電腦，都能影響電腦顯示；最后結果這臺電腦顯示什么，取決于最后一個操作電腦的同學（資料結果）；
2.淺拷貝：
a同學有一臺筆記本電腦并且配置了全套裝備，觸感舒爽的滑鼠、按鍵響亮的機械鍵盤等，b同學沒錢買電腦，但是又很想體驗，所以先買了和a同學一樣的滑鼠鍵盤自個先看著爽（第一層資料拷貝），然后向a同學借電腦過來玩，a同學和b同學各自的滑鼠鍵盤出了啥問題，兩個人之間互不影響對方的使用（對第一層資料操作），而對電腦的操作就是誰最后操作了電腦，電腦就是顯示最后那個人的操作界面（第二層及以上層次資料修改），
3.深拷貝：
a同學有筆記本+全套裝備，b同學羨慕不已，自己讓a同學照著買了一整套一模一樣的給自己，但是他們各自的使用電腦情況，取決于他們各自的操作，電腦之間的顯示互不影響（資料結果），
以上純屬個人理解，有誤勿噴請指出，謝謝！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/177558.html
標籤：JavaScript
上一篇：D1-JavaScript