JS中類或對象的定義

 本篇文章主要是對JS中類或對象的定義進行了說明介紹，需要的朋友可以過來參考下，希望對大家有所幫助

我們知道，JS是面向對象的。談到面向對象，就不可避免的要涉及類的概念。一般像c#，java這些強類型語言都有固定的定義類的語法。而JS的不同之處在於它能使用各種方法實現自己的類和對象。一般的實現有以下幾種方式：   1.工廠方式 工廠方式是指創建一個返回特定對象類型的工廠函數，示例代碼如下：  代碼如下: 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();   這種方式每次調用它的工廠函數，都會創建一個新對象。可問題在於每次生成一個新對象，都要創建新函數showColor,這使得每個對象都有自己的showColor版本，而事實上，所有的對象都共享同一個函數.為解決這個問題，開發者在工廠函數的外面定義了對象的方法，然後賦予對象一個指針指向這個這個函數，如下  代碼如下: 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();   這樣就不需要為每一個對象都創建自己的showColor函數，而只是創建指向這個函數的指針.這從功能上解決了問題，但是該函數卻不像對象的方法。於是，引出了構造函數的方式。   2.構造函數方式 構造函數與工廠函數很相似，示例代碼如下：  代碼如下: 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);   在構造函數中，內部無創建對象，而是使用this關鍵字。使用new運算符調用構造函數時，在執行第一行代碼之前先創建一個對象，只有用this才能訪問這個對象。但是這會遇到什麼問題呢，很顯然，它的每個對象也都會創建自己的showColor函數版本。為解決這個問題，引出了以下的原型方式.   3.原型方式 該方式利用了對象的prototype屬性，可把它看成創建新對象所依賴的原型。這裡，用空構造函數來設置類名。然後把所有的方法和屬性都直接賦予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); }   原型方式只能直接賦值，而不能通過給構造函數傳遞參數初始化屬性的值。在用這種方式時，會遇到兩個問題，不知道大家注意到沒有。第一問題是采用這種方式必須創建每個對象後才能改變屬性的默認值。而不能在創建每個對象時都會直接有自己所需要的屬性值。這點很討厭。第二個問題在於屬性所指的是對象的時候。函數共享不會出現任何問題，但是對象共享卻會出現問題。因為每個實例一般都要實現自己的對象。   如下面: 代碼如下: 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屬性只是指向對象的指針，所以所有的實例事實上共享同一個對象。由於出現這這些問題，我們引出了下面的聯合使用構造函數和原型方式。   4.混合的構造函數/原型方式 這種方式的思想是用構造函數定義對象的所有非函數屬性（包括普通屬性和指向對象的屬性），用原型方式定義對象的函數屬性（方法）。結果使得所有的函數都只被創建一次，而每個對象都有自己的對象屬性實例。示例代碼如下：  代碼如下: 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"   由實例代碼可知，這種方式同時解決了上一種方式的兩個問題。不過，采用這種方式，仍有些開發者覺得不夠完美。   5.動態原型方式 我們可知，大多數面向對象語言都對屬性和方法進行了視覺上的封裝。而上述方式的showColor方法卻定義在了類的外面。因此，他們設計了動態原型方法。這種方式的基本思想和混合的構造函數/原型方式相同，唯一不同之處在於對象方法的位置。如下所示： 代碼如下: 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只被創建一次。這樣依賴，這段代碼更像其他語言中的類定義了。   6.混合工廠方式 這種方式通常是不能應該前一種方式的變通方法。它的目的是創建假構造函數，只返回另一種對象的新實例。  代碼如下: 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()構造函數內部調用了new運算符，所以自動忽略第二個new運算符。在構造函數內部創建的對象被傳遞回變量var。這種方式在對象方法的內部管理方面與經典方式有著相同的問題。所以強烈建議：除非萬不得已，還是避免使用這種方式。