首頁 > web前端 > js教程 > JS中類別或物件的定義說明_javascript技巧

JS中類別或物件的定義說明_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-05-16 16:56:14
原創
1200 人瀏覽過

我們知道,JS是面向對象的。談到面向對象,就不可避免的要涉及類別的概念。一般像c#,java這些強類型語言都有固定的定義類別的語法。而JS的不同之處在於它能使用各種方法來實現自己的類別和物件。一般的實作有以下幾種方式:

1.工廠方式
工廠方式是指建立一個傳回特定物件類型的工廠函數,範例程式碼如下:

複製程式碼 程式碼如下:

function createCar(sColor,iDoors,iMpg> var oTempCar=new Object;
   oTempCar.color=sColor;
   oTempCar.doors=iDoors;
   oTempCar.mpg=iMpg;
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)
function createCar(sColor,iDoors,iMpg)> var oTempCar=new Object;
   oTempCar.color=sColor;
   oTempCar.doors=iDoors;
   oTempCar.mpg=iMpg;
ofoo>   oTempCar.mpg=iMpg;
ofo o>o"""""oo; >}
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);
}
("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 oCar2=new Car();
oCar1.drivers.push("Matt");
alert(oCar1.drivers);//輸出"Mike,Sue,Matt"
alert(oCar2.drivers);//輸出"Mike,Sue,Matt"

因此drivers屬性只是指向物件的指針,所以所有的實例事實上共用同一個物件。由於出現這這些問題,我們引出了下面的聯合使用構造函數和原型方式。

4.混合的建構子/原型方式
這種方式的想法是用建構子定義物件的所有非函數屬性(包括普通屬性和指向物件的屬性) ,用原型方式定義物件的函數屬性(方法)。結果使得所有的函數都只被創建一次,而每個物件都有自己的物件屬性實例。範例程式碼如下:複製程式碼

程式碼如下:


function Car(sColor,Do(sColorp )
{
   this.color=sColor;
   this.doors=iDoors;
   this.mpg=iMpg;
 ;
}
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(sColorp )
{
   this.color=sColor;
   this.doors=iDoors;
   this.mpg=iMpg;
 ;
   if(typeof Car._initialized=="undefined")
  {
     Car.prototype.showColor=function()  }
  Car._initialized=true;
}

這種方式Car.prototype.showColor只被創建一次。這樣依賴,這段程式碼更像其他語言中的類別定義了。

6.混合工廠方式
這種方式通常是不能應該前一種方式的變通方法。它的目的是創建假建構函數,只傳回另一種物件的新實例。
複製程式碼 程式碼如下:

function createCar()


function createCar()


function createCar()
oTempCar=new Object;
   oTempCar.color=“red”;
   oTempCar.doors=4;
   oTempCar.mpg=23;
 >        alert(this.color);
   };
   return oTempCar;
}
var car=new Car();}var car=new Car();}var car=new Car();}var car=新構造函數內部呼叫了new運算符,所以自動忽略第二個new運算符。在建構函式內部建立的物件被傳遞回變數var。這種方式在物件方法的內部管理上與經典方式有著相同的問題。所以強烈建議:除非萬不得已,還是避免使用這種方式。
相關標籤:
js
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
javascript - js addClass 無效
來自於 1970-01-01 08:00:00
0
0
0
php呼叫js並取得js的回傳值問題
來自於 1970-01-01 08:00:00
0
0
0
js進階教程
來自於 1970-01-01 08:00:00
0
0
0
找不到js檔案程式碼
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板