JS中類(lèi)或?qū)ο蟮亩x說(shuō)明
更新時(shí)間：2014年03月10日 09:35:31 作者：
本篇文章主要是對(duì)JS中類(lèi)或?qū)ο蟮亩x進(jìn)行了說(shuō)明介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
我們知道，JS是面向?qū)ο蟮?。談到面向?qū)ο?，就不可避免的要涉及?lèi)的概念。一般像c#，java這些強(qiáng)類(lèi)型語(yǔ)言都有固定的定義類(lèi)的語(yǔ)法。而JS的不同之處在于它能使用各種方法實(shí)現(xiàn)自己的類(lèi)和對(duì)象。一般的實(shí)現(xiàn)有以下幾種方式：
1.工廠方式
工廠方式是指創(chuàng)建一個(gè)返回特定對(duì)象類(lèi)型的工廠函數(shù)，示例代碼如下：
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();
這種方式每次調(diào)用它的工廠函數(shù)，都會(huì)創(chuàng)建一個(gè)新對(duì)象?？蓡?wèn)題在于每次生成一個(gè)新對(duì)象，都要?jiǎng)?chuàng)建新函數(shù)showColor,這使得每個(gè)對(duì)象都有自己的showColor版本，而事實(shí)上，所有的對(duì)象都共享同一個(gè)函數(shù).為解決這個(gè)問(wèn)題，開(kāi)發(fā)者在工廠函數(shù)的外面定義了對(duì)象的方法，然后賦予對(duì)象一個(gè)指針指向這個(gè)這個(gè)函數(shù)，如下
function showColor()
{
alert(this.color);
}
function createCar(sColor,iDoors,iMpg)
{
var oTempCar=new Object;
oTempCar.color=sColor;
oTempCar.doors=iDoors;
oTempCar.mpg=iMpg;
oTempCar.showColor=showColor;
return oTempCar;
}
var oCar1=createCar("red",4,23);
var oCar2=createCar("blue",3,25);
oCar1.showColor();
oCar2.showColor();
這樣就不需要為每一個(gè)對(duì)象都創(chuàng)建自己的showColor函數(shù)，而只是創(chuàng)建指向這個(gè)函數(shù)的指針.這從功能上解決了問(wèn)題，但是該函數(shù)卻不像對(duì)象的方法。于是，引出了構(gòu)造函數(shù)的方式。
2.構(gòu)造函數(shù)方式
構(gòu)造函數(shù)與工廠函數(shù)很相似，示例代碼如下：
function Car(sColor,iDoors,iMpg)
{
this.color=sColor;
this.doors=iDoors;
this.mpg=iMpg;
this.showColor=function()
{
alert(this.color);
}
}
var oCar1=new Car("red",4,23);
var oCar2=new Car("blue",3,25);
在構(gòu)造函數(shù)中，內(nèi)部無(wú)創(chuàng)建對(duì)象，而是使用this關(guān)鍵字。使用new運(yùn)算符調(diào)用構(gòu)造函數(shù)時(shí)，在執(zhí)行第一行代碼之前先創(chuàng)建一個(gè)對(duì)象，只有用this才能訪問(wèn)這個(gè)對(duì)象。但是這會(huì)遇到什么問(wèn)題呢，很顯然，它的每個(gè)對(duì)象也都會(huì)創(chuàng)建自己的showColor函數(shù)版本。為解決這個(gè)問(wèn)題，引出了以下的原型方式.
3.原型方式
該方式利用了對(duì)象的prototype屬性，可把它看成創(chuàng)建新對(duì)象所依賴(lài)的原型。這里，用空構(gòu)造函數(shù)來(lái)設(shè)置類(lèi)名。然后把所有的方法和屬性都直接賦予prototype屬性。如下:
function Car()
{}
Car.prototype.color="red";
Car.prototype.doors=4;
Car.prototype.mpg=23;
Car.prototype.drivers=new Array("Mike","Sue");
Car.prototype.showColor=function()
{
alert(this.color);
}
原型方式只能直接賦值，而不能通過(guò)給構(gòu)造函數(shù)傳遞參數(shù)初始化屬性的值。在用這種方式時(shí)，會(huì)遇到兩個(gè)問(wèn)題，不知道大家注意到?jīng)]有。第一問(wèn)題是采用這種方式必須創(chuàng)建每個(gè)對(duì)象后才能改變屬性的默認(rèn)值。而不能在創(chuàng)建每個(gè)對(duì)象時(shí)都會(huì)直接有自己所需要的屬性值。這點(diǎn)很討厭。第二個(gè)問(wèn)題在于屬性所指的是對(duì)象的時(shí)候。函數(shù)共享不會(huì)出現(xiàn)任何問(wèn)題，但是對(duì)象共享卻會(huì)出現(xiàn)問(wèn)題。因?yàn)槊總€(gè)實(shí)例一般都要實(shí)現(xiàn)自己的對(duì)象。
如下面:
var oCar1=new Car();
var oCar2=new Car();
oCar1.drivers.push("Matt");
alert(oCar1.drivers);//輸出 "Mike,Sue,Matt"
alert(oCar2.drivers);//輸出"Mike,Sue,Matt"
因此drivers屬性只是指向?qū)ο蟮闹羔?，所以所有的?shí)例事實(shí)上共享同一個(gè)對(duì)象。由于出現(xiàn)這這些問(wèn)題，我們引出了下面的聯(lián)合使用構(gòu)造函數(shù)和原型方式。
4.混合的構(gòu)造函數(shù)/原型方式
這種方式的思想是用構(gòu)造函數(shù)定義對(duì)象的所有非函數(shù)屬性（包括普通屬性和指向?qū)ο蟮膶傩裕迷头绞蕉x對(duì)象的函數(shù)屬性（方法）。結(jié)果使得所有的函數(shù)都只被創(chuàng)建一次，而每個(gè)對(duì)象都有自己的對(duì)象屬性實(shí)例。示例代碼如下：
function Car(sColor,iDoors,iMpg)
{
this.color=sColor;
this.doors=iDoors;
this.mpg=iMpg;
this.drivers=new Array("Mike","Sue");
}
Car.prototype.showColor=function()
{
alert(this.color);
}
var oCar1=new Car("red",4,23);
var oCar2=new Car("blue",3,25);
oCar1.drivers.push("Matt");
alert(oCar1.drivers);//輸出 "Mike,Sue,Matt"
alert(oCar2.drivers);//輸出 "Mike,Sue"
由實(shí)例代碼可知，這種方式同時(shí)解決了上一種方式的兩個(gè)問(wèn)題。不過(guò)，采用這種方式，仍有些開(kāi)發(fā)者覺(jué)得不夠完美。
5.動(dòng)態(tài)原型方式
我們可知，大多數(shù)面向?qū)ο笳Z(yǔ)言都對(duì)屬性和方法進(jìn)行了視覺(jué)上的封裝。而上述方式的showColor方法卻定義在了類(lèi)的外面。因此，他們?cè)O(shè)計(jì)了動(dòng)態(tài)原型方法。這種方式的基本思想和混合的構(gòu)造函數(shù)/原型方式相同，唯一不同之處在于對(duì)象方法的位置。如下所示：
function Car(sColor,iDoors,iMpg)
{
this.color=sColor;
this.doors=iDoors;
this.mpg=iMpg;
this.drivers=new Array("Mike","Sue");
if(typeof Car._initialized=="undefined")
{
Car.prototype.showColor=function()
{
alert(this.color);
}
}
Car._initialized=true;
}
這種方式Car.prototype.showColor只被創(chuàng)建一次。這樣依賴(lài)，這段代碼更像其他語(yǔ)言中的類(lèi)定義了。
6.混合工廠方式
這種方式通常是不能應(yīng)該前一種方式的變通方法。它的目的是創(chuàng)建假構(gòu)造函數(shù)，只返回另一種對(duì)象的新實(shí)例。
function createCar()
{
var oTempCar=new Object;
oTempCar.color=“red”;
oTempCar.doors=4;
oTempCar.mpg=23;
oTempCar.showColor=function()
{
alert(this.color);
};
return oTempCar;
}
var car=new Car();
由于在Car()構(gòu)造函數(shù)內(nèi)部調(diào)用了new運(yùn)算符，所以自動(dòng)忽略第二個(gè)new運(yùn)算符。在構(gòu)造函數(shù)內(nèi)部創(chuàng)建的對(duì)象被傳遞回變量var。這種方式在對(duì)象方法的內(nèi)部管理方面與經(jīng)典方式有著相同的問(wèn)題。所以強(qiáng)烈建議：除非萬(wàn)不得已，還是避免使用這種方式。
1.工廠方式
工廠方式是指創(chuàng)建一個(gè)返回特定對(duì)象類(lèi)型的工廠函數(shù)，示例代碼如下：
復(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;
}
var oCar1=createCar("red",4,23);
var oCar2=createCar("blue",3,25);
oCar1.showColor();
oCar2.showColor();
這種方式每次調(diào)用它的工廠函數(shù)，都會(huì)創(chuàng)建一個(gè)新對(duì)象?？蓡?wèn)題在于每次生成一個(gè)新對(duì)象，都要?jiǎng)?chuàng)建新函數(shù)showColor,這使得每個(gè)對(duì)象都有自己的showColor版本，而事實(shí)上，所有的對(duì)象都共享同一個(gè)函數(shù).為解決這個(gè)問(wèn)題，開(kāi)發(fā)者在工廠函數(shù)的外面定義了對(duì)象的方法，然后賦予對(duì)象一個(gè)指針指向這個(gè)這個(gè)函數(shù)，如下
復(fù)制代碼 代碼如下:
function showColor()
{
alert(this.color);
}
function createCar(sColor,iDoors,iMpg)
{
var oTempCar=new Object;
oTempCar.color=sColor;
oTempCar.doors=iDoors;
oTempCar.mpg=iMpg;
oTempCar.showColor=showColor;
return oTempCar;
}
var oCar1=createCar("red",4,23);
var oCar2=createCar("blue",3,25);
oCar1.showColor();
oCar2.showColor();
這樣就不需要為每一個(gè)對(duì)象都創(chuàng)建自己的showColor函數(shù)，而只是創(chuàng)建指向這個(gè)函數(shù)的指針.這從功能上解決了問(wèn)題，但是該函數(shù)卻不像對(duì)象的方法。于是，引出了構(gòu)造函數(shù)的方式。
2.構(gòu)造函數(shù)方式
構(gòu)造函數(shù)與工廠函數(shù)很相似，示例代碼如下：
復(fù)制代碼 代碼如下:
function Car(sColor,iDoors,iMpg)
{
this.color=sColor;
this.doors=iDoors;
this.mpg=iMpg;
this.showColor=function()
{
alert(this.color);
}
}
var oCar1=new Car("red",4,23);
var oCar2=new Car("blue",3,25);
在構(gòu)造函數(shù)中，內(nèi)部無(wú)創(chuàng)建對(duì)象，而是使用this關(guān)鍵字。使用new運(yùn)算符調(diào)用構(gòu)造函數(shù)時(shí)，在執(zhí)行第一行代碼之前先創(chuàng)建一個(gè)對(duì)象，只有用this才能訪問(wèn)這個(gè)對(duì)象。但是這會(huì)遇到什么問(wèn)題呢，很顯然，它的每個(gè)對(duì)象也都會(huì)創(chuàng)建自己的showColor函數(shù)版本。為解決這個(gè)問(wèn)題，引出了以下的原型方式.
3.原型方式
該方式利用了對(duì)象的prototype屬性，可把它看成創(chuàng)建新對(duì)象所依賴(lài)的原型。這里，用空構(gòu)造函數(shù)來(lái)設(shè)置類(lèi)名。然后把所有的方法和屬性都直接賦予prototype屬性。如下:
復(fù)制代碼 代碼如下:
function Car()
{}
Car.prototype.color="red";
Car.prototype.doors=4;
Car.prototype.mpg=23;
Car.prototype.drivers=new Array("Mike","Sue");
Car.prototype.showColor=function()
{
alert(this.color);
}
原型方式只能直接賦值，而不能通過(guò)給構(gòu)造函數(shù)傳遞參數(shù)初始化屬性的值。在用這種方式時(shí)，會(huì)遇到兩個(gè)問(wèn)題，不知道大家注意到?jīng)]有。第一問(wèn)題是采用這種方式必須創(chuàng)建每個(gè)對(duì)象后才能改變屬性的默認(rèn)值。而不能在創(chuàng)建每個(gè)對(duì)象時(shí)都會(huì)直接有自己所需要的屬性值。這點(diǎn)很討厭。第二個(gè)問(wèn)題在于屬性所指的是對(duì)象的時(shí)候。函數(shù)共享不會(huì)出現(xiàn)任何問(wèn)題，但是對(duì)象共享卻會(huì)出現(xiàn)問(wèn)題。因?yàn)槊總€(gè)實(shí)例一般都要實(shí)現(xiàn)自己的對(duì)象。
如下面:
復(fù)制代碼 代碼如下:
var oCar1=new Car();
var oCar2=new Car();
oCar1.drivers.push("Matt");
alert(oCar1.drivers);//輸出 "Mike,Sue,Matt"
alert(oCar2.drivers);//輸出"Mike,Sue,Matt"
因此drivers屬性只是指向?qū)ο蟮闹羔?，所以所有的?shí)例事實(shí)上共享同一個(gè)對(duì)象。由于出現(xiàn)這這些問(wèn)題，我們引出了下面的聯(lián)合使用構(gòu)造函數(shù)和原型方式。
4.混合的構(gòu)造函數(shù)/原型方式
這種方式的思想是用構(gòu)造函數(shù)定義對(duì)象的所有非函數(shù)屬性（包括普通屬性和指向?qū)ο蟮膶傩裕迷头绞蕉x對(duì)象的函數(shù)屬性（方法）。結(jié)果使得所有的函數(shù)都只被創(chuàng)建一次，而每個(gè)對(duì)象都有自己的對(duì)象屬性實(shí)例。示例代碼如下：
復(fù)制代碼 代碼如下:
function Car(sColor,iDoors,iMpg)
{
this.color=sColor;
this.doors=iDoors;
this.mpg=iMpg;
this.drivers=new Array("Mike","Sue");
}
Car.prototype.showColor=function()
{
alert(this.color);
}
var oCar1=new Car("red",4,23);
var oCar2=new Car("blue",3,25);
oCar1.drivers.push("Matt");
alert(oCar1.drivers);//輸出 "Mike,Sue,Matt"
alert(oCar2.drivers);//輸出 "Mike,Sue"
由實(shí)例代碼可知，這種方式同時(shí)解決了上一種方式的兩個(gè)問(wèn)題。不過(guò)，采用這種方式，仍有些開(kāi)發(fā)者覺(jué)得不夠完美。
5.動(dòng)態(tài)原型方式
我們可知，大多數(shù)面向?qū)ο笳Z(yǔ)言都對(duì)屬性和方法進(jìn)行了視覺(jué)上的封裝。而上述方式的showColor方法卻定義在了類(lèi)的外面。因此，他們?cè)O(shè)計(jì)了動(dòng)態(tài)原型方法。這種方式的基本思想和混合的構(gòu)造函數(shù)/原型方式相同，唯一不同之處在于對(duì)象方法的位置。如下所示：
復(fù)制代碼 代碼如下:
function Car(sColor,iDoors,iMpg)
{
this.color=sColor;
this.doors=iDoors;
this.mpg=iMpg;
this.drivers=new Array("Mike","Sue");
if(typeof Car._initialized=="undefined")
{
Car.prototype.showColor=function()
{
alert(this.color);
}
}
Car._initialized=true;
}
這種方式Car.prototype.showColor只被創(chuàng)建一次。這樣依賴(lài)，這段代碼更像其他語(yǔ)言中的類(lèi)定義了。
6.混合工廠方式
這種方式通常是不能應(yīng)該前一種方式的變通方法。它的目的是創(chuàng)建假構(gòu)造函數(shù)，只返回另一種對(duì)象的新實(shí)例。
復(fù)制代碼 代碼如下:
function createCar()
{
var oTempCar=new Object;
oTempCar.color=“red”;
oTempCar.doors=4;
oTempCar.mpg=23;
oTempCar.showColor=function()
{
alert(this.color);
};
return oTempCar;
}
var car=new Car();
由于在Car()構(gòu)造函數(shù)內(nèi)部調(diào)用了new運(yùn)算符，所以自動(dòng)忽略第二個(gè)new運(yùn)算符。在構(gòu)造函數(shù)內(nèi)部創(chuàng)建的對(duì)象被傳遞回變量var。這種方式在對(duì)象方法的內(nèi)部管理方面與經(jīng)典方式有著相同的問(wèn)題。所以強(qiáng)烈建議：除非萬(wàn)不得已，還是避免使用這種方式。
您可能感興趣的文章:
- Nodejs學(xué)習(xí)筆記之Global Objects全局對(duì)象
- JavaScript中的全局對(duì)象介紹
- javascript中全局對(duì)象的isNaN()方法使用介紹
- javascript中全局對(duì)象的parseInt()方法使用介紹
- 淺析JavaScript中兩種類(lèi)型的全局對(duì)象/函數(shù)
- Javascript 陷阱 window全局對(duì)象
- js 多種變量定義(對(duì)象直接量，數(shù)組直接量和函數(shù)直接量)
- javascript 對(duì)象的定義方法
- Javascript創(chuàng)建自定義對(duì)象 創(chuàng)建Object實(shí)例添加屬性和方法
- javascript 對(duì)象定義方法 簡(jiǎn)單易學(xué)
- Javascript 中創(chuàng)建自定義對(duì)象的方法匯總
- JavaScript定義全局對(duì)象的方法示例
相關(guān)文章
JS 實(shí)現(xiàn)BASE64_ENCODE和BASE64_DECODE(實(shí)例代碼)
JS 實(shí)現(xiàn)BASE64_ENCODE和BASE64_DECODE(實(shí)例代碼)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
這篇文章主要為大家詳細(xì)介紹了JS模擬實(shí)現(xiàn)串行加法器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
JS庫(kù)之Particles.js中文開(kāi)發(fā)手冊(cè)及參數(shù)詳解
因?yàn)樽约盒枰霎a(chǎn)品，所以一個(gè)好的UI界面也是很重要的，發(fā)現(xiàn)這種散射的原子顆粒特效還不錯(cuò)。今天腳本之家小編把Particles.js中文開(kāi)發(fā)手冊(cè)及particles.js參數(shù)分享給大家，需要的朋友參考下吧2017-09-09
用JS實(shí)現(xiàn)了一個(gè)拖拽排序，可因Jquery版本不同導(dǎo)致瀏覽器訪問(wèn)時(shí)存在很多的問(wèn)題，下面為大家介紹下具體的解決方法，感興趣的朋友可以參考下2013-10-10
javascript滾輪事件基礎(chǔ)實(shí)例講解（37）
這篇文章主要為大家詳細(xì)介紹了javascript滾輪事件基礎(chǔ)實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
如何在指定的地方插入html內(nèi)容和文本內(nèi)容
本文為大家介紹個(gè)小技巧可以在指定的地方插入html內(nèi)容和文本內(nèi)容，示例如下，感興趣的朋友可以參考下2013-12-12
javascript游戲開(kāi)發(fā)之《三國(guó)志曹操傳》零部件開(kāi)發(fā)(一)讓靜態(tài)人物動(dòng)起來(lái)
首先來(lái)說(shuō)，讓一個(gè)游戲賦有可玩性必須要?jiǎng)屿o結(jié)合,我將要在下面告訴大家如何運(yùn)用Javascript將靜態(tài)圖片變?yōu)閯?dòng)態(tài)圖片，感興趣的朋友可以了解下，便當(dāng)鞏固js知識(shí)了2013-01-01
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)聊天對(duì)話框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
說(shuō)到拖拽，應(yīng)用場(chǎng)景不可謂不多。無(wú)論是打開(kāi)電腦還是手機(jī)，第一眼望去的界面都是可拖拽的，靠拖拽實(shí)現(xiàn)APP或者應(yīng)用的重新布局，或者拖拽文件進(jìn)行操作文件。本文就將利用JS實(shí)現(xiàn)拖拽排序，需要的可以參考一下2022-12-12
一文詳解GoJs中g(shù)o.Panel的itemArray屬性
這篇文章主要為大家介紹了一文詳解GoJs中g(shù)o.Panel的itemArray屬性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05