.

  好程式設計師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也拷貝(克隆)了,就是深拷貝。要做到深拷貝,就需要對每個屬性的型別進行判斷,如果是引用型別,就再迴圈進行拷貝(