JavaScript高級程序設(shè)計 閱讀筆記（十三） js定義類或?qū)ο?/h1>

 更新時間：2012年08月14日 16:04:46   作者：  

js定義類或?qū)ο蟮慕榻B，需要的朋友可以參考下

工廠方式

　　創(chuàng)建并返回特定類型的對象?！　?

復制代碼 代碼如下:

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;
}

　　調(diào)用示例：

復制代碼 代碼如下:

var oCar1=createCar("red",4,23);
var oCar2=createCar("blue",3,25);
oCar1.showColor();
oCar2.showColor();

　　缺點：方法重復創(chuàng)建了。如在上面的調(diào)用示例中，oCar1和oCar2均有自己的shoColor方法，但這個是可以共用的。

構(gòu)造函數(shù)方式

　　示例：

復制代碼 代碼如下:

function Car(sColor,iDoors,iMpg){
this.color=sColor;
this.door=iDoors;
this.mpg=iMpg;
this.showColor=function(){
alert(this.color);
}
}

　　調(diào)用示例：

復制代碼 代碼如下:

var oCar1=new Car("red",4,23);
var oCar2=new Car("blue",3,25);

　　缺點：跟工廠方式一樣，方法重復創(chuàng)建了。

原型方式

　　本方式利用了對象的 prototype 屬性，可把它看成創(chuàng)建新對象所依賴的原型。這里用空構(gòu)造函數(shù)來設(shè)置類名，然后所有的屬性和方法都被直接賦予 prototype 屬性，重寫前面的例子，代碼如下:

復制代碼 代碼如下:

function Car(){
}

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

　　調(diào)用：

復制代碼 代碼如下:

var oCar1=new Car();
var oCar2=new Car();

　　缺點：不能通過給構(gòu)造函數(shù)傳遞參數(shù)初始化屬性的值

混合的構(gòu)造函數(shù)/原型方式

　　聯(lián)合使用構(gòu)造函數(shù)和原型方式，示例如下：

復制代碼 代碼如下:

function Car(sColor,iDoors,iMpg){
this.color=sColor;
this.door=iDoors;
this.mpg=iMpg;
}

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

　　調(diào)用示例：

復制代碼 代碼如下:

var oCar1=new Car("red",4,23);
var oCar2=new Car("blue",3,25);

　　優(yōu)點：無內(nèi)存浪費，創(chuàng)建方便。

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

動態(tài)原型方法

　　使用混合的構(gòu)造函數(shù)/原型方式把對象的方法放在了對象外面定義，讓人感覺不是那么面向?qū)ο?，沒有在視覺上進行很好的封裝，因此產(chǎn)生了動態(tài)原型方法：

復制代碼 代碼如下:

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

您可能感興趣的文章:

• 獲取JavaScript用戶自定義類的類名稱的代碼
• Javascript 自定義類型方法小結(jié)
• JavaScript 面向?qū)ο缶幊蹋?） 定義類
• 關(guān)于JavaScript定義類和對象的幾種方式
• javascript來定義類的規(guī)范小結(jié)
• JavaScript定義類或函數(shù)的幾種方式小結(jié)
• javascript面向?qū)ο笾?定義類
• JavaScript之自定義類型
• JavaScript定義類的幾種方式總結(jié)
• JavaScript定義類和對象的方法
• javascript中定義類的方法匯總
• javascript中定義類的方法詳解

• 定義類
• 對象

相關(guān)文章

• 

  JS數(shù)組去重的6種方法完整實例

  這篇文章主要介紹了JS數(shù)組去重的6種方法,結(jié)合完整實例形式總結(jié)分析了javascript針對數(shù)組去除重復項的相關(guān)原理與操作技巧,需要的朋友可以參考下

  2018-12-12
• 

  如何在JavaScript中使用localStorage詳情

  這篇文章主要介紹了如何在JavaScript中使用localStorage，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

  2021-02-02
• 

  現(xiàn)代 javscript 編程 資料

  現(xiàn)代 javscript 編程 資料...

  2007-04-04
• 

  不同瀏覽器javascript變量作用域的處理方法

  javascript變量作用域在不同瀏覽器的實現(xiàn)處理代碼

  2008-09-09
• 

  js隨機密碼產(chǎn)生函數(shù)

  在網(wǎng)上找了好多隨機產(chǎn)生的密碼的代碼，沒一個好用的，所以就隨便寫了一個

  2010-08-08
• 

  微信小程序以ssm做后臺開發(fā)的實現(xiàn)示例

  這篇文章主要介紹了微信小程序以ssm做后臺開發(fā)的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

  2020-04-04
• 

  JavaScript實現(xiàn)復制功能各瀏覽器支持情況實測

  這兩天在做Web前端時，遇到需求通過js實現(xiàn)文本復制的功能，下面與大家分享下各瀏覽器對復制功能的支持情況，感興趣的朋友可以參考下哈

  2013-07-07
• 

  關(guān)于COOKIE個數(shù)與大小的問題

  在一次面試過程中，面試官問過我關(guān)于瀏覽器cookie的問題包括：cookie大小，cookie個數(shù)限制以及如何操作cookie等一系列的問題。

  2011-01-01
• 

  javascript 函數(shù)聲明與函數(shù)表達式的區(qū)別介紹

  javascript中的函數(shù)聲明與函數(shù)表達式使用比較頻繁，可能很多的朋友都不知道他們之間的區(qū)別，在此為大家詳細介紹下，希望對大家有所幫助

  2013-10-10
• 

  微信小程序網(wǎng)絡(luò)層封裝的實現(xiàn)（promise, 登錄鎖）

  這篇文章主要介紹了微信小程序網(wǎng)絡(luò)層封裝（promise, 登錄鎖），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

  2019-05-05

最新評論