DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript高級程序設計 閱讀筆記(十三) js定義類或對象
JavaScript高級程序設計 閱讀筆記(十三) js定義類或對象
編輯:關於JavaScript     
工廠方式

  創建並返回特定類型的對象。  

復制代碼 代碼如下:
function createCar(sColor,iDoors,iMpg){
var oTempCar=new Object();
oTempCar.color=sColor;
oTempCar.doors=iDoors;
oTempCar.mpg=iMpg;
oTempCar.showColor=function(){
alert(this.color);
}
return oTempCar;
}

  調用示例:
復制代碼 代碼如下:
var oCar1=createCar("red",4,23);
var oCar2=createCar("blue",3,25);
oCar1.showColor();
oCar2.showColor();

  缺點:方法重復創建了。如在上面的調用示例中,oCar1和oCar2均有自己的shoColor方法,但這個是可以共用的。

構造函數方式

  示例:

復制代碼 代碼如下:
function Car(sColor,iDoors,iMpg){
this.color=sColor;
this.door=iDoors;
this.mpg=iMpg;
this.showColor=function(){
alert(this.color);
}
}

  調用示例:
復制代碼 代碼如下:
var oCar1=new Car("red",4,23);
var oCar2=new Car("blue",3,25);

  缺點:跟工廠方式一樣,方法重復創建了。

原型方式

  本方式利用了對象的 prototype 屬性,可把它看成創建新對象所依賴的原型。這裡用空構造函數來設置類名,然後所有的屬性和方法都被直接賦予 prototype 屬性,重寫前面的例子,代碼如下:

復制代碼 代碼如下:
function Car(){
}

Car.prototype.color="red";
Car.prototype.doors=4;
Car.prototype.mpg=23;
Car.prototype.showColor=function(){
alert(this.color);
}


  調用:
復制代碼 代碼如下:
var oCar1=new Car();
var oCar2=new Car();

  缺點:不能通過給構造函數傳遞參數初始化屬性的值

混合的構造函數/原型方式

  聯合使用構造函數和原型方式,示例如下:

復制代碼 代碼如下:
function Car(sColor,iDoors,iMpg){
this.color=sColor;
this.door=iDoors;
this.mpg=iMpg;
}

Car.prototype.showColor=function(){
alert(this.color);
}

  調用示例:
復制代碼 代碼如下:
var oCar1=new Car("red",4,23);
var oCar2=new Car("blue",3,25);

  優點:無內存浪費,創建方便。

  這種方式是ECMAScript采用的主要方式。

動態原型方法

  使用混合的構造函數/原型方式把對象的方法放在了對象外面定義,讓人感覺不是那麼面向對象,沒有在視覺上進行很好的封裝,因此產生了動態原型方法:

復制代碼 代碼如下:
function Car(sColor,iDoors,iMpg){
this.color=sColor;
this.door=iDoors;
this.mpg=iMpg;
if(typeof Car._initialized=="undefined"){
Car.prototype.showColor=function(){
alert(this.color);
};
Car._initialized=true;
}
}

作者:Artwl
出處:http://artwl.cnblogs.com
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved