好程式設計師web前端教程分享引用型別與基本型別

　　 好程式設計師 web前端教程分享 引用型別與基本型別 ， 本文將從以下六個方面講解引用型別和基本型別

　　 1. 概念

　　 2. 記憶體圖

　　 3. 引用型別和基本型別作為函式的引數體現的區別

　　 4. 引用型別的優點：

　　 5. 引用型別的賦值(對比基本型別)

　　 6. 淺複製和深複製

　　以下為詳細內容：

　　 1. 概念：

　　基本型別也叫簡單型別，儲存的資料是單一的，如：學生的個數就是一個數字而已 ;引用型別也叫複雜型別，儲存的資料是複雜的，如：學生，包括學號，姓名，性別，年齡等等很多資訊。從記憶體(大家如果不懂記憶體，請查閱相關資料)的角度來說：基本型別只佔用一塊記憶體區域;引用型別佔用兩塊記憶體區域。即定義基本型別的變數時，在記憶體中只申請一塊空間，變數的值直接存放在該空間;定義引用型別的變數時(容易理解的是，我門看到new運算子，一般就是定義引用型別的變數)，在記憶體中申請兩塊空間，第一塊空間儲存的是第二塊空間的地址，第二塊空間儲存的是真正的資料;第一塊空間叫作第二塊空間的引用(地址)，所以叫作引用型別。

　　 javaScript中的基本型別包括：數字(Number)，字串(String)，布林(Boolean)，Null，Undefined五種;

　　 javascript的引用型別是：Object。而Array，Date是屬於Obejct型別。

　　 2. 記憶體圖：

　　如下程式碼 (都是定義了兩個區域性變數)：

　　 function demoFun(){

　　 var num = 20;//定義了一個基本型別的變數。

　　 var arr = new Array(12,23,34);//定義了一個引用型別的變數

　　 }

以上兩行程式碼的記憶體圖：

　　可以看到， num變數只佔用了一塊記憶體區域;arr變數佔用了兩塊記憶體區域，arr變數在棧區(不懂棧區的人，先不要想太多)申請了一塊記憶體區域，儲存著地址，儲存的地址是堆區的地址。而堆區中真正才儲存著資料，所以說，arr變數佔用了兩塊記憶體區域。這樣看來，引用型別的變數好像還佔用記憶體多了。哈哈，不要著急，後面瞭解了引用型別的優點後，你就會覺得這是問題了。

　　當我們讀取 num變數的值時，直接就能讀到，但是當我們要讀取arr裡的值時，先找到arr中的地址，然後根據地址再找到對應的資料。

　　引用型別，類似於 windows作業系統中的快捷方式。快捷方式就是一個地址，真正的內容是快捷方式所指向的路徑的內容。如：我們把d:\t.txt檔案建立一個快捷方式放在桌面上，那麼，桌面上的快捷方式會佔用桌面的空間，而d：\t.txt會佔用d盤的空間，所以，佔用了兩塊空間。

　　基本型別就相當於檔案。

　　引用型別，類似於我們在入學報名填寫報名表時，填寫家庭地址，這個家庭地址就相當於第一塊空間，真正你家 (第二塊記憶體空間)不在報名表上。學校要找你家，先在報名表上找到你家的地址，然後根據地址，才能找到你家去。

　　 3. 引用型別的優點：

　　引用型別作為函式的引數時，優點特別明顯，第一，形參傳遞給實參時，只需要傳遞地址，而不需要搬動大量的資料 (節約了記憶體開銷);第二，形參對應的資料改變時，實參對應的資料也在改變(很多時候，我們希望這樣)。

　　如以下程式碼：

　　先定義函式 (氣泡排序)

　　 function bubble(arr){

　　 for(var i=0;i

　　 for(var j=0;j

　　 if(arr[j]>arr[j+1]){

　　 var temp = arr[j];

　　 arr[j] = arr[j+1];

　　 arr[j+1] = temp;

　　 }

　　 }

　　 }

　　 }

　　當呼叫氣泡排序時，

　　 var arr1 = [250,2,290,35,12,99];

　　 bubble(arr1);

　　看看記憶體以上程式碼執行時的，記憶體變化：

　　圖中，當執行， ①對應的程式碼(var arr1 = [250,2,290,35,12,99];)時，記憶體中會產生①對應的變化，即在棧中申請一塊記憶體區域，起名為arr1，在堆區中申請記憶體空間放置250,2,290,35,12,99，並把堆區中的記憶體的地址賦給arr1的記憶體中;當執行②對應的程式碼bubble(arr1)時，呼叫函式。這時候會定義形參arr(記憶體中③對應的變化)，即在棧中申請一塊記憶體區域，起名為arr，並把arr1儲存的地址賦給了arr(記憶體中②表示的賦值)，這樣，形參arr和實參arr1就指向了同一塊記憶體區域。陣列中的值250,2,290,35,12,99在記憶體中只有一份。即，不用把陣列中每個元素的值再複製一份，節約了記憶體。如果對記憶體圖看懂了，那麼，當形參arr對應的資料順序改變了，實參arr1對應的資料順序也就改變了。即，實現了形引數據改變時，實引數據也改變了。所以，bubble函式不需要返回值，依然可以達到排序的目的。可以執行我示例中的程式碼，看看是不是達到了排序的效果。

　　補充，基本型別作為函式引數的記憶體變化：

　　記憶體圖：

　　 4. 引用型別變數的賦值：

　　引用型別變數賦值時，賦的是地址。即兩個引用型別變數裡儲存的是同一塊地址，也就是說，兩個引用型別變數都指向同一塊記憶體區域。所以，兩個引用型別變數對應的資料時一樣的。

　　再如：

　　 var person1 = {

　　 name:"張三",

　　 sex:"男",

　　 age:12

　　 };

　　 var person2 = person1;

　　 person2.name="張四"; //這句話會改變person1和person2的name。說明person1和person2的name佔用的是同一塊記憶體。

　　 alert(person1.name+","+person1.sex+","+person1.age);

　　 alert(person2.name+","+person2.sex+","+person2.age);

　　基本型別變數賦值時的記憶體變化。

　　 5. 淺複製和深複製

　　先說物件的複製，上面說了，引用型別 (物件)的賦值，只是賦的地址，那麼要真正複製一份新的物件(即克隆)時，又該怎麼辦。

　　 var person1 = {

　　 name:"張三",

　　 sex:"男",

　　 age:12

　　 };

　　 var person2={};

　　 for(var key in person1){

　　 person2[key] = person1[key];

　　 }

　　但是，當一個物件的屬性又是一個引用型別時，會出現淺複製和深複製的問題。用一個自定義的 object型別來說明問題。

　　如：

　　 var person1 = {

　　 name:"張三",

　　 sex:"男",

　　 age:12,

　　 address:{

　　 country:"陝西",

　　 city:"渭南"

　　 }

　　 };

　　 //物件person1的address又是個物件，即，要對person1做真正的克隆，需要把address中的每個屬性也進行克隆。

　　 var person2={};

　　 for(var key in person1){

　　 person2[key] = person1[key];

　　 }

　　 person2.name="張四"; //不會改變掉person1的name屬性。

　　 person2.address.country="北京";//會改變掉person1的address.country

　　大家注意看， person1和person2的name屬性各有各的空間，但是person1.address.country和person2.address.country是同一塊空間。所以，改變person2.address.country的值時，person1.address.country的值也會改變。這就說明複製(克隆)的不到位，這種複製叫作淺複製，而進一步把person1.address.country和person1.address.name也複製(克隆)了，就是深複製。要做到深複製，就需要對每個屬性的型別進行判斷，如果是引用型別，就再迴圈進行複製(需要用到遞迴)。