JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(十三) js定義類(lèi)或?qū)ο?/h1>
更新時(shí)間:2012年08月14日 16:04:46 作者:
js定義類(lèi)或?qū)ο蟮慕榻B,需要的朋友可以參考下
工廠方式
創(chuàng)建并返回特定類(lèi)型的對(duì)象?! ?
復(fù)制代碼 代碼如下:
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)用示例:
復(fù)制代碼 代碼如下:
var oCar1=createCar("red",4,23);
var oCar2=createCar("blue",3,25);
oCar1.showColor();
oCar2.showColor();
缺點(diǎn):方法重復(fù)創(chuàng)建了。如在上面的調(diào)用示例中,oCar1和oCar2均有自己的shoColor方法,但這個(gè)是可以共用的。
構(gòu)造函數(shù)方式
示例:
復(fù)制代碼 代碼如下:
function Car(sColor,iDoors,iMpg){
this.color=sColor;
this.door=iDoors;
this.mpg=iMpg;
this.showColor=function(){
alert(this.color);
}
}
調(diào)用示例:
復(fù)制代碼 代碼如下:
var oCar1=new Car("red",4,23);
var oCar2=new Car("blue",3,25);
缺點(diǎn):跟工廠方式一樣,方法重復(fù)創(chuàng)建了。
原型方式
本方式利用了對(duì)象的 prototype 屬性,可把它看成創(chuàng)建新對(duì)象所依賴的原型。這里用空構(gòu)造函數(shù)來(lái)設(shè)置類(lèi)名,然后所有的屬性和方法都被直接賦予 prototype 屬性,重寫(xiě)前面的例子,代碼如下:
復(fù)制代碼 代碼如下:
function Car(){
}
Car.prototype.color="red";
Car.prototype.doors=4;
Car.prototype.mpg=23;
Car.prototype.showColor=function(){
alert(this.color);
}
調(diào)用:
復(fù)制代碼 代碼如下:
var oCar1=new Car();
var oCar2=new Car();
缺點(diǎn):不能通過(guò)給構(gòu)造函數(shù)傳遞參數(shù)初始化屬性的值
混合的構(gòu)造函數(shù)/原型方式
聯(lián)合使用構(gòu)造函數(shù)和原型方式,示例如下:
復(fù)制代碼 代碼如下:
function Car(sColor,iDoors,iMpg){
this.color=sColor;
this.door=iDoors;
this.mpg=iMpg;
}
Car.prototype.showColor=function(){
alert(this.color);
}
調(diào)用示例:
復(fù)制代碼 代碼如下:
var oCar1=new Car("red",4,23);
var oCar2=new Car("blue",3,25);
優(yōu)點(diǎn):無(wú)內(nèi)存浪費(fèi),創(chuàng)建方便。
這種方式是ECMAScript采用的主要方式。
動(dòng)態(tài)原型方法
使用混合的構(gòu)造函數(shù)/原型方式把對(duì)象的方法放在了對(duì)象外面定義,讓人感覺(jué)不是那么面向?qū)ο螅瑳](méi)有在視覺(jué)上進(jìn)行很好的封裝,因此產(chǎn)生了動(dòng)態(tài)原型方法:
復(fù)制代碼 代碼如下:
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用戶自定義類(lèi)的類(lèi)名稱的代碼
- Javascript 自定義類(lèi)型方法小結(jié)
- JavaScript 面向?qū)ο缶幊蹋?) 定義類(lèi)
- 關(guān)于JavaScript定義類(lèi)和對(duì)象的幾種方式
- javascript來(lái)定義類(lèi)的規(guī)范小結(jié)
- JavaScript定義類(lèi)或函數(shù)的幾種方式小結(jié)
- javascript面向?qū)ο笾?定義類(lèi)
- JavaScript之自定義類(lèi)型
- JavaScript定義類(lèi)的幾種方式總結(jié)
- JavaScript定義類(lèi)和對(duì)象的方法
- javascript中定義類(lèi)的方法匯總
- javascript中定義類(lèi)的方法詳解
相關(guān)文章
-
如何在JavaScript中使用localStorage詳情
這篇文章主要介紹了如何在JavaScript中使用localStorage,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧 2021-02-02
-
微信小程序以ssm做后臺(tái)開(kāi)發(fā)的實(shí)現(xiàn)示例
這篇文章主要介紹了微信小程序以ssm做后臺(tái)開(kāi)發(fā)的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧 2020-04-04
-
JavaScript實(shí)現(xiàn)復(fù)制功能各瀏覽器支持情況實(shí)測(cè)
這兩天在做Web前端時(shí),遇到需求通過(guò)js實(shí)現(xiàn)文本復(fù)制的功能,下面與大家分享下各瀏覽器對(duì)復(fù)制功能的支持情況,感興趣的朋友可以參考下哈 2013-07-07
-
關(guān)于COOKIE個(gè)數(shù)與大小的問(wèn)題
在一次面試過(guò)程中,面試官問(wèn)過(guò)我關(guān)于瀏覽器cookie的問(wèn)題包括:cookie大小,cookie個(gè)數(shù)限制以及如何操作cookie等一系列的問(wèn)題。 2011-01-01
-
javascript 函數(shù)聲明與函數(shù)表達(dá)式的區(qū)別介紹
javascript中的函數(shù)聲明與函數(shù)表達(dá)式使用比較頻繁,可能很多的朋友都不知道他們之間的區(qū)別,在此為大家詳細(xì)介紹下,希望對(duì)大家有所幫助 2013-10-10
-
微信小程序網(wǎng)絡(luò)層封裝的實(shí)現(xiàn)(promise, 登錄鎖)
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)層封裝(promise, 登錄鎖),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧 2019-05-05
最新評(píng)論
創(chuàng)建并返回特定類(lèi)型的對(duì)象?! ?
復(fù)制代碼 代碼如下:
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)用示例:
復(fù)制代碼 代碼如下:
var oCar1=createCar("red",4,23);
var oCar2=createCar("blue",3,25);
oCar1.showColor();
oCar2.showColor();
缺點(diǎn):方法重復(fù)創(chuàng)建了。如在上面的調(diào)用示例中,oCar1和oCar2均有自己的shoColor方法,但這個(gè)是可以共用的。
構(gòu)造函數(shù)方式
示例:
復(fù)制代碼 代碼如下:
function Car(sColor,iDoors,iMpg){
this.color=sColor;
this.door=iDoors;
this.mpg=iMpg;
this.showColor=function(){
alert(this.color);
}
}
調(diào)用示例:
復(fù)制代碼 代碼如下:
var oCar1=new Car("red",4,23);
var oCar2=new Car("blue",3,25);
缺點(diǎn):跟工廠方式一樣,方法重復(fù)創(chuàng)建了。
原型方式
本方式利用了對(duì)象的 prototype 屬性,可把它看成創(chuàng)建新對(duì)象所依賴的原型。這里用空構(gòu)造函數(shù)來(lái)設(shè)置類(lèi)名,然后所有的屬性和方法都被直接賦予 prototype 屬性,重寫(xiě)前面的例子,代碼如下:
復(fù)制代碼 代碼如下:
function Car(){
}
Car.prototype.color="red";
Car.prototype.doors=4;
Car.prototype.mpg=23;
Car.prototype.showColor=function(){
alert(this.color);
}
調(diào)用:
復(fù)制代碼 代碼如下:
var oCar1=new Car();
var oCar2=new Car();
缺點(diǎn):不能通過(guò)給構(gòu)造函數(shù)傳遞參數(shù)初始化屬性的值
混合的構(gòu)造函數(shù)/原型方式
聯(lián)合使用構(gòu)造函數(shù)和原型方式,示例如下:
復(fù)制代碼 代碼如下:
function Car(sColor,iDoors,iMpg){
this.color=sColor;
this.door=iDoors;
this.mpg=iMpg;
}
Car.prototype.showColor=function(){
alert(this.color);
}
調(diào)用示例:
復(fù)制代碼 代碼如下:
var oCar1=new Car("red",4,23);
var oCar2=new Car("blue",3,25);
優(yōu)點(diǎn):無(wú)內(nèi)存浪費(fèi),創(chuàng)建方便。
這種方式是ECMAScript采用的主要方式。
動(dòng)態(tài)原型方法
使用混合的構(gòu)造函數(shù)/原型方式把對(duì)象的方法放在了對(duì)象外面定義,讓人感覺(jué)不是那么面向?qū)ο螅瑳](méi)有在視覺(jué)上進(jìn)行很好的封裝,因此產(chǎn)生了動(dòng)態(tài)原型方法:
復(fù)制代碼 代碼如下:
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用戶自定義類(lèi)的類(lèi)名稱的代碼
- Javascript 自定義類(lèi)型方法小結(jié)
- JavaScript 面向?qū)ο缶幊蹋?) 定義類(lèi)
- 關(guān)于JavaScript定義類(lèi)和對(duì)象的幾種方式
- javascript來(lái)定義類(lèi)的規(guī)范小結(jié)
- JavaScript定義類(lèi)或函數(shù)的幾種方式小結(jié)
- javascript面向?qū)ο笾?定義類(lèi)
- JavaScript之自定義類(lèi)型
- JavaScript定義類(lèi)的幾種方式總結(jié)
- JavaScript定義類(lèi)和對(duì)象的方法
- javascript中定義類(lèi)的方法匯總
- javascript中定義類(lèi)的方法詳解
相關(guān)文章
如何在JavaScript中使用localStorage詳情
這篇文章主要介紹了如何在JavaScript中使用localStorage,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
微信小程序以ssm做后臺(tái)開(kāi)發(fā)的實(shí)現(xiàn)示例
這篇文章主要介紹了微信小程序以ssm做后臺(tái)開(kāi)發(fā)的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
JavaScript實(shí)現(xiàn)復(fù)制功能各瀏覽器支持情況實(shí)測(cè)
這兩天在做Web前端時(shí),遇到需求通過(guò)js實(shí)現(xiàn)文本復(fù)制的功能,下面與大家分享下各瀏覽器對(duì)復(fù)制功能的支持情況,感興趣的朋友可以參考下哈2013-07-07
關(guān)于COOKIE個(gè)數(shù)與大小的問(wèn)題
在一次面試過(guò)程中,面試官問(wèn)過(guò)我關(guān)于瀏覽器cookie的問(wèn)題包括:cookie大小,cookie個(gè)數(shù)限制以及如何操作cookie等一系列的問(wèn)題。2011-01-01
javascript 函數(shù)聲明與函數(shù)表達(dá)式的區(qū)別介紹
javascript中的函數(shù)聲明與函數(shù)表達(dá)式使用比較頻繁,可能很多的朋友都不知道他們之間的區(qū)別,在此為大家詳細(xì)介紹下,希望對(duì)大家有所幫助2013-10-10
微信小程序網(wǎng)絡(luò)層封裝的實(shí)現(xiàn)(promise, 登錄鎖)
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)層封裝(promise, 登錄鎖),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05

