AJAX基礎：JavaScript中類的實現

理解類的實現機制

 　　在JavaScript中可以使用function關鍵字來定義一個“類”，如何為類新增成員。在函數內通過this指標引用的變數或者方法都會成為類的成員，

例如： function cls(){
　 var str="abc";
 　this.txt=str;
 　this.display=function(){
 　　alert("this is a test method");
 　}
 }

 var obj=new cls();
通過new cls()獲得對象obj，對象obj便自動獲得了屬性txt和方法display。

 　 在JavaScript中，function本身的定義就是類的建構函式，結合前面介紹過的對象的性質以及new操作符的用法，下面介紹使用new建立對象的過程。

 　　（1）當解譯器遇到new操作符時便建立一個Null 物件；
 　　（2）開始運行cls這個函數，並將其中的this指標都指向這個建立的對象；
 　　（3）因為當給對象不存在的屬性賦值時，解譯器就會為對象建立該屬性，例如在cls中，當執行到this.txt=str這條語句時，就會添加一個屬性txt，並把變數str的值賦給它，這樣函數執行就是初始化這個對象的過程，即實現建構函式的作用；
 　　（4）當函數執行完後，new操作符就返回初始化後的對象。

 　　通過這整個過程，JavaScript中就實現了物件導向的基本機制。由此可見，在JavaScript中，function的定義實際上就是實現一個對象的構造器，是通過函數來完成的。這種方式的缺點是：
 　　·將所有的初始化語句、成員定義都放到一起，代碼邏輯不夠清晰，不易實現複雜的功能。
 　　·每建立一個類的執行個體，都要執行一次建構函式。建構函式中定義的屬性和方法總被重複的建立，
例如：
 this.display=function(){

　alert("this is a test method");
 }

　　這裡的display每建立一個cls的執行個體，都會被建立一次，造成了記憶體的浪費。下面介紹另一種類定義的機制：prototype對象，可以解決建構函式中定義類成員帶來的缺點。

使用prototype對象定義類成員
 　　prototype對象。當new一個function時，該對象的成員將自動賦給所建立的對象，例如： ＜script language="JavaScript" type="text/javascript"＞
 ＜!--
　//定義一個只有一個屬性caption的類
 　function cls(){ 　　this.caption=1; 　}
　//使用函數的prototype屬性給類定義新成員
 　cls.prototype.showcaption=function(){
　　alert(this.caption); 　}
 　//建立cls的一個執行個體
 　var obj=new cls();
  　//調用通過prototype原型對象定義的showcaption方法
 　obj.showcaption();
 //--＞
 ＜/script＞

 　　prototype是一個JavaScript對象，可以為prototype對象添加、修改、刪除方法和屬性。從而為一個類新增成員定義。

 　　瞭解了函數的prototype對象，現在再來看new的執行過程。
 　　（1）建立一個新的對象，並讓this指標指向它；
 　　（2）將函數的prototype對象的所有成員都賦給這個新對象；
 　　（3）執行函數體，對這個對象進行初始化操作；
 　　（4）返回（1）中建立的對象。

 　　和上一節介紹的new的執行過程相比，多了用prototype來初始化對象的過程，這也和prototype的字面意思相符，它是所對應類的執行個體的原型。這個初始化過程發生在函數體（構造器）執行之前，所以可以在函數體內部調用prototype中定義的屬性和方法，例如： ＜script language="JavaScript" type="text/javascript"＞
 ＜!--
 //定義一個只有一個屬性caption的類
 function cls(){
 　this.caption=1;
 　this.showcaption();
 }
 //使用函數的prototype屬性給類定義新成員
 cls.prototype.showcaption=function(){
 　alert(this.caption); }
 //建立cls的一個執行個體
 var obj1=new cls(); //
--＞
 ＜/script＞

 　　和上一段代碼相比，這裡在cls的內部調用了prototype中定義的方法showcaption，從而在對象的構造過程中就彈出了對話方塊，顯示caption屬性的值為1。
 　　需要注意，原型對象的定義必須在建立類執行個體的語句之前，否則它將不會起作用，例如：＜script language="JavaScript" type="text/javascript"＞
 ＜!--
//定義一個只有一個屬性caption的類
 function cls(){
 　this.caption=1;
 　this.showcaption();
 }
 //建立cls的一個執行個體
 var obj=new cls();
 //在建立執行個體的語句之後使用函數的prototype屬性給類定義新成員，只會對後面建立的對象有效
 cls.prototype.showcaption=function(){
 　alert(this.caption); }
 //--＞
 ＜/script＞

 　　這段代碼將會產生執行階段錯誤，顯示對象沒有showcaption方法，就是因為該方法的定義是在執行個體化一個類的語句之後。

 　　由此可見，prototype對象專用於設計類的成員，它是和一個類緊密相關的，除此之外，prototype還有一個重要的屬性：constructor，表示對該建構函式的引用，例如：
 function cls(){
 　alert(1);

}
 cls.prototype.constructor();
 //調用類的建構函式

 　　這段代碼運行後將會出現對話方塊，在上面顯示文字“1”，從而可以看出一個prototype是和一個類的定義緊密相關的。實際上：cls.prototype.constructor===cls。

 　　前面已經介紹了如何定義一個類，如何初始化一個類的執行個體，且類可以在function定義的函數體中新增成員，又可以用prototype定義類的成員，編程的代碼顯得混亂。如何以一種清晰的方式來定義類呢？下面給出了一種類的實現模式。

 　　在JavaScript中，由於對象靈活的性質，在建構函式中也可以為類新增成員，在增加靈活性的同時，也增加了代碼的複雜度。為了提高代碼的可讀性和開發效率，可以採用這種定義成員的方式，而使用prototype對象來替代，這樣function的定義就是類的建構函式，符合傳統意義類的實現：類名和建構函式名是相同的。例如： function cls(){
 　//建構函式
}
//成員定義
 cls.prototype.someProperty="sample";
 cls.prototype.someMethod=function(){
 　//方法實現代碼
}

 　　雖然上面的代碼對於類的定義已經清晰了很多，但每定義一個屬性或方法，都需要使用一次cls.prototype，不僅代碼體積變大，而且易讀性還不夠。為了進一步改進，可以使用無類型對象的構造方法來指定prototype對象，從而實作類別的成員定義：//定義一個類
cls function cls(){
　//建構函式
}

 //通過指定prototype對象來實作類別的成員定義
 class1.prototype={
 　someProperty:"sample", someMethod:function(){
 　　//方法代碼
 　},
 　…//其他屬性和方法.
 }

 　　上面的代碼用一種很清晰的方式定義了cls，建構函式直接用類名來實現，而成員使用無類型對象來定義，以列表的方式實現了所有屬性和方法，並且可以在定義的同時初始化屬性的值。這也更象傳統意義物件導向語言中類的實現。只是建構函式和類的成員定義被分為了兩個部分，這可看成JavaScript中定義類的一種固定模式，這樣在使用時會更加容易理解。

 　　注意：在一個類的成員之間互相引用，必須通過this指標來進行，例如在上面例子中的someMethod方法中，如果要使用屬性someProperty，必須通過this.someProperty的形式，因為在JavaScript中每個屬性和方法都是獨立的，它們通過this指標聯絡在一個對象上。