首頁 > web前端 > js教程 > 主體

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

WBOY
發布: 2016-05-16 17:51:03
原創
967 人瀏覽過
工廠方式

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

複製程式碼 程式碼如下:

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採用的主要方式。 動態原型方法

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





複製程式碼


程式碼如下:

function Car(sColor,iDoors,iMpg){
this.color=sColor;
this.door=iDoors; this.mpg=iMpg; if(typeof Cartype ._initialized=="undefined"){ Car.prototype.showColor=function(){ alert(this.color); }; Car._initialized=true; }; } 作者:Artwl 來源:http://artwl.cnblogs.com
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!