閱讀668 返回首頁    go 技術社區[雲棲]


ECMAScript對象基礎

1.Global對象。這對象之所以特別就是因為它根本不存在!-_-。如果你聲明
var pointer=Global;
報錯,找不到此對象。這是因為在ECMAScript中,每個函數都某個對象的方法,我們用到的isNaN(),isFinite(),parseInt()和parseFloat()函數,看起來是獨立的函數,其實它們都是Global對象的函數。
需要注意兩個用於處理url編碼的函數:

1)encodeURI()和decodeURI()  處理完整的uri
2)encodeURIComponent()和decodeURIComponent()     處理片段

2.其他對象如Array,Math,Date對象,我發現比較有趣的是Array的處理方式與ruby中Array的處理方式幾乎一樣。

3.ECMAScript對象的創建方式:
1)工廠方式:

ExpandedBlockStart.gifContractedBlock.giffunction showColor()dot.gif{
InBlock.gif  alert(
this.color)
ExpandedBlockEnd.gif}

ExpandedBlockStart.gifContractedBlock.gif
function createCar(sColor, iDoors, iMpg) dot.gif{
InBlock.gif    
var oTempCar = new Object;
InBlock.gif    oTempCar.color 
= sColor;
InBlock.gif    oTempCar.doors 
= iDoors;
InBlock.gif    oTempCar.mpg 
= iMpg;
InBlock.gif    oTempCar.showColor 
=showColor;
InBlock.gif    
return oTempCar;
ExpandedBlockEnd.gif}

None.gif
None.gif
var oCar1 = createCar("red"423);
None.gif
var oCar2 = createCar("blue"325);
None.gif

這樣的方式看起來很奇怪,好象方法showColor()不是對象的方法

2)構造函數方式:

ExpandedBlockStart.gifContractedBlock.giffunction Car(sColor, iDoors, iMpg) dot.gif{
InBlock.gif    
this.color = sColor;
InBlock.gif    
this.doors = iDoors;
InBlock.gif    
this.mpg = iMpg;
ExpandedSubBlockStart.gifContractedSubBlock.gif    
this.showColor = function () dot.gif{
InBlock.gif        alert(
this.color)
ExpandedSubBlockEnd.gif    }
;
ExpandedBlockEnd.gif}

None.gif
None.gif
var oCar1 = new Car("red"423);
None.gif
var oCar2 = new Car("blue"325);


這樣的方式有個新問題,那就是每次構造一個對象都將重複生成函數showColor,為每個對象創建獨立的函數版本。

3)原型方式

ExpandedBlockStart.gifContractedBlock.giffunction Car() dot.gif{
ExpandedBlockEnd.gif}

None.gif
None.gifCar.prototype.color 
= "red";
None.gifCar.prototype.doors 
= 4;
None.gifCar.prototype.mpg 
= 23;
None.gifCar.prototype.drivers 
= new Array("Mike""Sue");
ExpandedBlockStart.gifContractedBlock.gifCar.prototype.showColor 
= function () dot.gif{
InBlock.gif    alert(
this.color);
ExpandedBlockEnd.gif}
;
None.gif
None.gif
var oCar1 = new Car();
None.gif
var oCar2 = new Car();
None.gif
None.gifoCar1.drivers.push(
"Matt");
None.gif
None.gifalert(oCar1.drivers);    
//outputs "Mike,Sue,Matt"
None.gif
alert(oCar2.drivers);    //outputs "Mike,Sue,Matt"


利用對象的prototype屬性來構造對象,但是有兩個問題:沒辦法使用構造函數傳參來生成對象;函數雖然被不同對象共享,但是屬性竟然也被共享,比如上麵代碼中,oCar1的drivers屬性與oCar2的drivers屬性是同一個Array對象。

4)為了解決上麵問題,我們引入了構造函數/原型的混合方式:
ExpandedBlockStart.gifContractedBlock.giffunction Car(sColor, iDoors, iMpg) dot.gif{
InBlock.gif    
this.color = sColor;
InBlock.gif    
this.doors = iDoors;
InBlock.gif    
this.mpg = iMpg;
InBlock.gif    
this.drivers = new Array("Mike""Sue");
ExpandedBlockEnd.gif}

None.gif
ExpandedBlockStart.gifContractedBlock.gifCar.prototype.showColor 
= function () dot.gif{
InBlock.gif    alert(
this.color);
ExpandedBlockEnd.gif}
;
None.gif
None.gif
var oCar1 = new Car("red"423);
None.gif
var oCar2 = new Car("blue"325);
None.gif
None.gifoCar1.drivers.push(
"Matt");
None.gif
None.gifalert(oCar1.drivers);    
//outputs "Mike,Sue,Matt"
None.gif
alert(oCar2.drivers);    //outputs "Mike,Sue"


屬性通過構造函數方式,而函數則通過原型來生成,這就避免了純粹原型方式帶來的問題。但是函數放在對象的構造函數定義,讓習慣java,c++的人也感覺不爽,對象為什麼不能放在一塊地方定義呢?這就引出來了動態原型方式

5)動態原型方式:
ExpandedBlockStart.gifContractedBlock.giffunction Car(sColor, iDoors, iMpg) dot.gif{
InBlock.gif    
this.color = sColor;
InBlock.gif    
this.doors = iDoors;
InBlock.gif    
this.mpg = iMpg;
InBlock.gif    
this.drivers = new Array("Mike""Sue");
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif    
if (typeof Car._initialized == "undefined"dot.gif{
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif        Car.prototype.showColor 
= function () dot.gif{
InBlock.gif            alert(
this.color);
ExpandedSubBlockEnd.gif        }
;
InBlock.gif
InBlock.gif        Car._initialized 
= true;
ExpandedSubBlockEnd.gif    }

ExpandedBlockEnd.gif}

None.gif
None.gif
None.gif
var oCar1 = new Car("red"423);
None.gif
var oCar2 = new Car("blue"325);
None.gif


通過引入_initialized 屬性,當第一次構造對象時生成方法showColor ,再次生成對象時,此時的_initialized 已經是true,就避免了重複生成函數,屬性的定義和函數的定義都在構造函數內,也滿足了語義上的對象封裝概念。

我們應當盡量采用 構造函數/原型混合方式 動態原型方式 來創建ECMAScript對象

文章轉自莊周夢蝶  ,原文發布時間5.17

最後更新:2017-05-17 11:04:33

  上一篇:go  手把手 | 教你爬下100部電影數據:R語言網頁爬取入門指南
  下一篇:go  ECMAScript基礎