1.3.5 類

類是面向對象程序設計的核心概念之一。一個類代表了具有相似屬性的一類事物的抽象。從本篇開始,我們將正式的進入JavaScript的面向對象部分。首先需要注意的是,在JavaScript中並沒有“類”這一關鍵字——在大多數語言中都是使用class作爲關鍵字的。所以,這裏的類就成了一個概念,它沒有明確的語法標誌。

 

1. 類和構造函數

 

前面說過,在JavaScript中並沒有明確的類的概念。實際上,我們給出的只是類的構造函數。類的構造函數構成了這個類的全部內容。既然叫做構造函數,它也是一個普通的函數,沒有什麼不同之處。因此,我們能夠很輕易的定義出一個構造函數:

 

Js代碼
  1. function Person(name, age) {  
  2.     this.name = name;  
  3.     this.age = age;  
  4.     this.show = function() {  
  5.         alert("Hello, my name is " + this.name + ", my age is " + this.age);  
  6.     };  
  7. }  

這裏,我們定義了一個類 Person,它有兩個屬性:name和age;有一個方法:show。看上去和其他語言的類的定義沒有什麼不同。其實,這裏最大的不同就是在於這個關鍵字function。我們使用了定義函數的方式定義了一個類。

 

2. new

 

定義出來類之後,需要創建類的對象。同其他語言一眼,JavaScript也使用new操作符創建對象。具體代碼如下:

 

 

Js代碼
  1. var bill = new Person("Bill", 30);  
  2. alert(bill.name);  
  3. alert(bill["age"]);  
  4. bill.show();  

 

這裏使用new創建一個Person類的對象。和其他語言類似,new之後是該類的構造函數。當創建對象之後,就可以像前面的章節中說到的一樣,使用.或者[]對屬性進行訪問。

 

注意一下,這裏的構造函數就是一個普通的函數,那麼,是不是所有的函數都可以使用new操作符呢?答案是肯定的。那麼,這個new操作符到底做了什麼呢?

 

當使用new操作符的時候,首先JavaScript會創建一個空的對象,然後將會對這個對象進行初始化。用什麼來初始化呢?當然就是你調用的那個構造函數了。最後,這個創建的對象將返回給調用者,於是,我們就可以使用這個對象了。

 

3. prototype

 

prototype是原型的意思。在JavaScript中,每個對象都有一個prototype屬性。這個屬性指向一個prototype對象。這就是原型屬性和原型對象的概念。

 

每個對象都有一個prototype屬性,構造函數是一個普通的函數,而函數也是一個對象,因此,構造函數也有一個prototype屬性。而每個 prototype對象都有一個constructor屬性,這個prototype對象的constructor屬性指向這個prototype屬性所在的構造函數本身。也就是說,new操作符要保證生成的對象的prototype屬性和構造函數的prototype屬性是一致的。

 

有點迷糊了不是?看一下附件中的圖,無論怎樣,都要保證這個圖所示的關係式正確的!

 

需要大家注意的是,這個prototype對象是JavaScript的面向對象的基礎,包括繼承等的實現都是使用prototype。

 

4. 一個實現技巧:檢測參數非空和設置參數默認值

 

由於JavaScript函數對於參數控制比較困難,因此參數檢測成爲一個不可忽視的問題。這裏給出一個編程的小技巧,能夠檢查傳入的實參是否非空,以及給參數設置默認值。

 

Js代碼
  1. function print(mustHave, person) {  
  2.     var defaultPerson = {  
  3.         name: "noname",  
  4.         age: 0  
  5.     };  
  6.     if(!mustHave) { // 非空檢測  
  7.         alert("mustHave should not be null!");  
  8.         return;  
  9.     }  
  10.     person = person || defaultPerson; // 設置默認值  
  11.     alert(mustHave + ": name- " + person.name + "; age- " + person.age);  
  12. }  
  13. print();  
  14. print("sth");  
  15. print("sth", {name: "new", age: 20});  

 

非空檢測比較簡單。默認值的設置比較有技巧,利用了JavaScript的||操作的短路特性。如果形參person爲空,那麼||前半部分爲 false,通過或操作,將把person設置爲defaultPerson;如果person非空,則||直接返回true,那麼就不進行或操作。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章