腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

javascript中類的定義及其方式(《javascript高級程序設(shè)計》學(xué)習(xí)筆記)

更新時間：2011年07月04日 23:15:02 作者：

javascript也是一種面向?qū)ο蟮木幊陶Z言。但是javascript中的類相關(guān)的東西(類的定義，原型鏈，繼承等)卻不是很好理解，特別是繼承。

關(guān)于javascript中類的繼承可以參考阮一峰的Blog《Javascript繼承機制的設(shè)計思想》，說的很透。

一、在javascript中實例化遇到的問題：

下面用《javascript高級程序設(shè)計》中的例子來做說明，假如現(xiàn)在定義了一個car的對象，它是Object類的實例。像下面這樣的：

復(fù)制代碼代碼如下:

 
var oCar=new Object(); 
oCar.color = "red"; 
oCar.doors = 4; 
oCar.mpg = 23; 
oCar.showColor = function () { 
alert(this.color); 
}; 

現(xiàn)在又需要這樣的一個實例，你可能會像這樣來定義：

復(fù)制代碼代碼如下:

 
var oCar2 = new Object(); 
oCar2.color = "blue"; 
oCar2.doors = 5; 
oCar2.mpg = 25; 
oCar2.showColor = function () { 
alert(this.color); 
}; 

這樣遇到的問題是每個對象都需要重新定義一次他的字段和方法。很麻煩。

二、類的定義--工廠方式實現(xiàn)：

對上面的例子進行一個包裝，利用函數(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; 
} 

調(diào)用方式：

var oCar1 = createCar();
var oCar2 = createCar();

這種方式被稱之為工廠方式。工廠方式看起來是省事多了。起碼創(chuàng)建一個對象的時候不再需要那么多的行數(shù)。因為每個屬性(color,doors,mpg)的值都是固定的,還需要再次進行改造,利用參數(shù)傳遞來實現(xiàn)：

復(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("red", 4, 23); 

oCar1.showColor(); 
oCar2.showColor(); 

這樣做看似的確可以實現(xiàn)了對象了。實現(xiàn)也很簡單，調(diào)用也很方便。但是有兩個不是很好的地方：

1、從語義上看，在創(chuàng)建對象時沒有使用new運算符，似乎不是那么正規(guī)(通常創(chuàng)建一個對象都用一個new運算符來實現(xiàn))。

2、不符合面向?qū)ο蟮奶卣?-封裝。在這個例子中，oCar1和oCar2都有自己的showColor方法，并且他們的showColor都是自己的實現(xiàn)。但是事實是他們共享的是同一個函數(shù)。

也是有辦法解決這個共享函數(shù)的問題，利用函數(shù)指針來解決。在createCar函數(shù)之外再創(chuàng)建一個showColor函數(shù),而oTempCar的showColor方法指向這個showColor函數(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("red", 4, 23); 

oCar1.showColor(); 
oCar2.showColor(); 

雖然這樣解決了重復(fù)創(chuàng)建函數(shù)的問題，但這樣的話，就使showColor函數(shù)看起來不像是對象的方法。

三、類的定義--構(gòu)造函數(shù)方式實現(xiàn)：

復(fù)制代碼代碼如下:

 
function Car(sColor, iDoors, iMpg) { 
//通過構(gòu)造函數(shù)的形式，會為每個對象生成獨立的屬性和函數(shù) 
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("red", 4, 23); 
oCar1.showColor(); 
oCar2.showColor(); 

在Car類中，this指針代表了Car的一個實例，因此不需要返回值。雖然構(gòu)造函數(shù)方式實現(xiàn)了類的定義，但是和工廠方式一樣，他也是為每個實例創(chuàng)建一個單獨的方法。雖然可以像工廠函數(shù)一樣在函數(shù)之外再創(chuàng)建一個函數(shù)利用指針來解決這個問題，但是這么做的話，在語義上沒有意義。

四、類的定義--原型方式實現(xiàn)：

利用對象的prototype屬性，把它看成是創(chuàng)建新對象所依賴的原型。用空構(gòu)造函數(shù)來設(shè)置類名。然后所有的屬性和方法都被直接賦予prototype屬性。

復(fù)制代碼代碼如下:

 
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(); 
alert(oCar1 instanceof Car);//output true這里存在兩個問題： 

1、構(gòu)造函數(shù)沒有參數(shù)。使用原型時，不能通過給函數(shù)參數(shù)傳遞參數(shù)來初始化屬性值。

2、在有多個實例時，對其中一個實例的屬性的更改會影響到另外一個實例的屬性。

測試代碼：

復(fù)制代碼代碼如下:

 
var oCar1 = new Car(); 
oCar1.color = "Green"; 

var oCar2 = new Car(); 
oCar2.color = "Black"; 
alert(oCar1.color); //output Green 
alert(oCar2.color); //output Black 
alert(oCar1.color); //output Black 

當(dāng)然了，也會有辦法解決這個問題的。那就是混合的構(gòu)造函數(shù)/原型方式

五、類的實現(xiàn)--混合的構(gòu)造函數(shù)/原型方式實現(xiàn)

這種實現(xiàn)方式是將每個類的實例中共享的屬性或者方法妨到原型鏈中實現(xiàn)，而將不需要共享實現(xiàn)的屬性和方法放在構(gòu)造函數(shù)中實現(xiàn)。這中類的實現(xiàn)方式是使用最廣泛的方式。

復(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, 24); 

oCar1.drivers.push("Matt"); 
alert(oCar1.drivers); 
alert(oCar2.drivers);六、類的定義--動態(tài)原型方式實現(xiàn) 

這種方式和混合的構(gòu)造函數(shù)/原型方式相比，提供了一種友好的編程風(fēng)格(在混合的構(gòu)造函數(shù)/原型方式中，showColor方法的定義是在方法體外實現(xiàn)的，而不是在構(gòu)造函數(shù)的方法體內(nèi)完成的)。這種類的定義方式使用也很多。

復(fù)制代碼代碼如下:

 
function Car(sColor, iDoors, iMpg) { 
this.color = sColor; 
this.doors = iDoors; 
this.mpg = iMpg; 
this.divers = new Array("Mike", "Sue"); 

if (typeof Car._initialized == "undefined") { 
Car.prototype.showColor = function () { 
alert(this.color); 
}; 
Car._initialized = true; 
} 

七、類的定義--混合工廠方式實現(xiàn)

復(fù)制代碼代碼如下:

 
function Car() { 
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.showColor(); 

這種方式和工廠方式看起來差不多。由于在Car()構(gòu)造函數(shù)內(nèi)部調(diào)用了new運算符，所以將忽略掉位于構(gòu)造函數(shù)之外的new運算符。在構(gòu)造函數(shù)內(nèi)部創(chuàng)建的對象被傳回變量var。雖然看起來有了new運算符了，比工廠方式有了一些進步，但是這種實現(xiàn)方式也是會出現(xiàn)重復(fù)創(chuàng)建方法的問題。因此也不推薦使用這種方式來定義類。

您可能感興趣的文章:

類的定義

相關(guān)文章

最新評論

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

javascript中類的定義及其方式(《javascript高級程序設(shè)計》學(xué)習(xí)筆記)

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具