解讀JavaScript中類的實現

來源:互聯網
上載者:User

轉自:http://www.mb5u.com/biancheng/AJAX/ajax_40994.html

 

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

function class1(){
 var s="abc";
 this.p1=s;
 this.method1=function(){
  alert("this is a test method");
 }
}
var obj1=new class1();


  通過new class1()獲得對象obj1,對象obj1便自動獲得了屬性p1和方法method1。

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

  (1)當解譯器遇到new操作符時便建立一個Null 物件;

  (2)開始運行class1這個函數,並將其中的this指標都指向這個建立的對象;

  (3)因為當給對象不存在的屬性賦值時,解譯器就會為對象建立該屬性,例如在class1中,當執行到this.p1=s這條語句時,就會添加一個屬性p1,並把變數s的值賦給它,這樣函數執行就是初始化這個對象的過程,即實現建構函式的作用;

  (4)當函數執行完後,new操作符就返回初始化後的對象。

  通過這整個過程,JavaScript中就實現了物件導向的基本機制。由此可見,在JavaScript中,function的定義實際上就是實現一個對象的構造器,是通過函數來完成的。這種方式的缺點是:

  ·將所有的初始化語句、成員定義都放到一起,代碼邏輯不夠清晰,不易實現複雜的功能。

  ·每建立一個類的執行個體,都要執行一次建構函式。建構函式中定義的屬性和方法總被重複的建立,例如:

this.method1=function(){
 alert("this is a test method");
}

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

 使用prototype對象定義類成員

  上一節介紹了類的實現機制以及建構函式的實現,現在介紹另一種為類新增成員的機制:prototype對象。當new一個function時,該對象的成員將自動賦給所建立的對象,例如:

 

<script language="JavaScript" type="text/javascript">
<!--
 //定義一個只有一個屬性prop的類
 function class1(){
  this.prop=1;
 }
 //使用函數的prototype屬性給類定義新成員
 class1.prototype.showProp=function(){
  alert(this.prop);
 }
 //建立class1的一個執行個體
 var obj1=new class1();
 //調用通過prototype原型對象定義的showProp方法
 obj1.showProp();
//-->
</script>


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

  瞭解了函數的prototype對象,現在再來看new的執行過程。

  (1)建立一個新的對象,並讓this指標指向它;

  (2)將函數的prototype對象的所有成員都賦給這個新對象;

  (3)執行函數體,對這個對象進行初始化操作;

  (4)返回(1)中建立的對象。

  和上一節介紹的new的執行過程相比,多了用prototype來初始化對象的過程,這也和prototype的字面意思相符,它是所對應類的執行個體的原型。這個初始化過程發生在函數體(構造器)執行之前,所以可以在函數體內部調用prototype中定義的屬性和方法,例如:

<script language="JavaScript" type="text/javascript">
<!--
//定義一個只有一個屬性prop的類
function class1(){
 this.prop=1;
 this.showProp();
}
//使用函數的prototype屬性給類定義新成員
class1.prototype.showProp=function(){
 alert(this.prop);
}
//建立class1的一個執行個體
var obj1=new class1();
//-->
</script>


  和上一段代碼相比,這裡在class1的內部調用了prototype中定義的方法showProp,從而在對象的構造過程中就彈出了對話方塊,顯示prop屬性的值為1。

  需要注意,原型對象的定義必須在建立類執行個體的語句之前,否則它將不會起作用,例如:

<script language="JavaScript" type="text/javascript">
<!--
//定義一個只有一個屬性prop的類
function class1(){
 this.prop=1;
 this.showProp();
}
//建立class1的一個執行個體
var obj1=new class1();
//在建立執行個體的語句之後使用函數的prototype屬性給類定義新成員,只會對後面建立的對象有效
class1.prototype.showProp=function(){
 alert(this.prop);
}
//-->
</script>


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

  由此可見,prototype對象專用於設計類的成員,它是和一個類緊密相關的,除此之外,prototype還有一個重要的屬性:constructor,表示對該建構函式的引用,例如:

function class1(){
 alert(1);
}
class1.prototype.constructor(); //調用類的建構函式


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

 一種JavaScript類的設計模式

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

  在JavaScript中,由於對象靈活的性質,在建構函式中也可以為類新增成員,在增加靈活性的同時,也增加了代碼的複雜度。為了提高代碼的可讀性和開發效率,可以採用這種定義成員的方式,而使用prototype對象來替代,這樣function的定義就是類的建構函式,符合傳統意義類的實現:類名和建構函式名是相同的。例如:

 

function class1(){
 //建構函式
}
//成員定義
class1.prototype.someProperty="sample";
class1.prototype.someMethod=function(){
 //方法實現代碼
}


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

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


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

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.