關於賦值、淺拷貝、深拷貝，以前也思考良久，很多時候都以為記住了，但是，我太難了。今天我特地寫下筆記，希望可以完全掌握這個東西，也希望可以幫助到任何想對學習這個東西的同學。 一、棧、堆、指針地址 棧記憶體：個人理解是，基本數據類型和引用數據類型都會用到的一個空間，這個空間以key-value形式存在，v ...
關於賦值、淺拷貝、深拷貝，以前也思考良久，很多時候都以為記住了，但是，我太難了。今天我特地寫下筆記，希望可以完全掌握這個東西，也希望可以幫助到任何想對學習這個東西的同學。
一、棧、堆、指針地址
棧記憶體：個人理解是，基本數據類型和引用數據類型都會用到的一個空間，這個空間以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，同時在堆開闢一個空間，設這空間為space1a，存放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完全沒有影響。
最後，可用下圖表示深拷貝：
五、總結
1.賦值：
基本數據類型就是類似a同學有一臺電腦，b同學也想要，就也給b同學買了一臺一模一樣的電腦b，電腦a和電腦b各自怎麼被操作都是a同學和b同學各自的事，電腦顯示互不影響（數據結果）；
引用數據類型就是只有一臺電腦，放在了電腦室，a同學和b同學各自從宿舍到電腦室操作電腦，都能影響電腦顯示；在a同學和b同學的眼裡，最後結果這臺電腦顯示什麼，取決於最後一個操作電腦的同學（數據結果）；
2.淺拷貝：
a同學有一臺筆記本電腦並且配置了全套裝備，觸感舒爽的滑鼠、按鍵響亮的機械鍵盤等。b同學沒錢買電腦，但是又很想體驗，所以先買了和a同學一樣的滑鼠鍵盤自個先看著爽。然後向a同學借電腦過來玩。a同學和b同學各自的滑鼠鍵盤出了啥問題，兩個人之間互不影響對方的使用。而對電腦的操作就是誰最後操作了電腦，電腦就是顯示最後那個人的操作界面（數據修改）。
3.深拷貝：
a同學有筆記本+全套裝備，b同學羡慕不已，自己讓a同學照著買了一整套一模一樣的給自己，但是他們各自的使用電腦情況，取決於他們各自的操作，電腦之間互不影響（數據結果）。
以上純屬個人理解，有誤勿噴請指出，謝謝！
