JavaScript物件導向程式設計(5): 類

本部落格轉載於 ：http://devbean.javaeye.com/blog/406265

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

1. 類和建構函式

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

Js代碼

function Person(name, age) {<br /> this.name = name;<br /> this.age = age;<br /> this.show = function() {<br /> alert("Hello, my name is " + this.name + ", my age is " + this.age);<br /> };<br />}

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

2. new

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

Js代碼

var bill = new Person("Bill", 30);<br />alert(bill.name);<br />alert(bill["age"]);<br />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代碼

function print(mustHave, person) {<br /> var defaultPerson = {<br /> name: "noname",<br /> age: 0<br /> };<br /> if(!mustHave) { // 非空檢測<br /> alert("mustHave should not be null!");<br /> return;<br /> }<br /> person = person || defaultPerson; // 設定預設值<br /> alert(mustHave + ": name- " + person.name + "; age- " + person.age);<br />}<br />print();<br />print("sth");<br />print("sth", {name: "new", age: 20});

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

 

附圖：