JavaScript高階程式設計閱讀筆記（十三） js定義類別或物件

JavaScript高階程式設計閱讀筆記（十三） js定義類別或物件_javascript技巧

WBOY

發布： 2016-05-16 17:51:03

原創

987 人瀏覽過

工廠方式

　　建立並傳回特定類型的物件。

 
function createCarp(s,ori) { 
var oTempCar=new Object(); 
oTempCar.color=sColor; 
oTempCar.doors=iDoors; 
oTempCar.mpg=iMpg; 
oTempCar.showor=function(Color=function){ 
alert(this.color); 
} 
return oTempCar; 
} 

　　調用示例：

複製程式碼程式碼如下:

 
var oCar1=createCar("red",4,23); 
var oCar2=createCar("blue", 3,25); 
oCar1.showColor(); 
oCar2.showColor(); 

　　缺點：方法重複建立了。如在上面的呼叫範例中，oCar1和oCar2均有自己的shoColor方法，但這個是可以共用的。

建構函式方式

　　範例：

複製程式碼 🎜> 程式碼如下:

function Car(sColor,iDoors,iMpg){

this.color=sColor; 
this.door=iDoors; 
this.mpg=iMpgmpg ; 
this.showColor=function(){ 
alert(this.color); 
} 
} 

 
　　範例： 

複製程式碼程式碼如下:

var oCar1=new Car("red",4,23);

var oCar2Car1=new Car("red",4,23); 
var oCar22 =new Car("blue",3,25);

　　缺點：跟工廠方式一樣，方法重複創建了。

原型方式
　　本方式利用了物件的 prototype 屬性，可把它看成是建立新物件所依賴的原型。這裡用空建構子來設定類別名，然後所有的屬性和方法都直接被賦予prototype 屬性，重寫前面的例子，程式碼如下:

複製程式碼程式碼如下:

function Car(){ 
} 

Car.prototype.color="red"; 
Car.prototype.doors=4; 
Car.prototype.mpg=23; 
Car.prototype.showColor=function(){ 
alert(this.color); 
} 
 
 

　　呼叫：

複製程式碼複製程式碼

 程式碼
 oCar1=new Car(); 
var oCar2=new Car(); 

　　缺點：不能透過給建構函式傳遞參數初始化屬性的值
混合函數傳遞參數初始化屬性的值

混合函數傳遞參數初始化屬性的值

混合函數傳遞參數初始化屬性的值混合的構造函數/原型方式

　　聯合使用構造函數和原型方式，示例如下：

複製代碼

 程式碼如下:

function Car(sColor,iDoors,iMpg){
this.color=sColor;
this.door=iDoors

this.color=sColor; this.door=iDoors this; mpg=iMpg; } Car.prototype.showColor=function(){ alert(this.color);

}

　〜>　範例：

複製程式碼

程式碼如下:

var oCar1=new Car("red",44, 23);
var oCar2=new Car("blue",3,25);

　　優點：無記憶體浪費，創造方便。　　這種方式是ECMAScript採用的主要方式。動態原型方法

　　使用混合的構造函數/原型方式把對象的方法放在了對像外面定義，讓人感覺不是那麼面向對象，沒有在視覺上進行很好的封裝，因此產生了動態原型方法： 

複製程式碼

 程式碼如下:

JavaScript高階程式設計 閱讀筆記（十三） js定義類別或物件_javascript技巧

JavaScript高階程式設計閱讀筆記（十三） js定義類別或物件_javascript技巧