莊周夢(mèng)蝶

          生活、程序、未來
             :: 首頁(yè) ::  ::  :: 聚合  :: 管理

          ECMAScript對(duì)象基礎(chǔ)

          Posted on 2007-02-06 14:05 dennis 閱讀(566) 評(píng)論(0)  編輯  收藏 所屬分類: web開發(fā)
          ?1.Global對(duì)象。這對(duì)象之所以特別就是因?yàn)樗静淮嬖?-_-。如果你聲明
          var pointer=Global;
          報(bào)錯(cuò),找不到此對(duì)象。這是因?yàn)樵贓CMAScript中,每個(gè)函數(shù)都某個(gè)對(duì)象的方法,我們用到的isNaN(),isFinite(),parseInt()和parseFloat()函數(shù),看起來是獨(dú)立的函數(shù),其實(shí)它們都是Global對(duì)象的函數(shù)。
          需要注意兩個(gè)用于處理url編碼的函數(shù):

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

          2.其他對(duì)象如Array,Math,Date對(duì)象,我發(fā)現(xiàn)比較有趣的是Array的處理方式與ruby中Array的處理方式幾乎一樣。

          3.ECMAScript對(duì)象的創(chuàng)建方式:
          1)工廠方式:

          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);

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

          2)構(gòu)造函數(shù)方式:

          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);


          這樣的方式有個(gè)新問題,那就是每次構(gòu)造一個(gè)對(duì)象都將重復(fù)生成函數(shù)showColor,為每個(gè)對(duì)象創(chuàng)建獨(dú)立的函數(shù)版本。

          3)原型方式

          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);????
          //outputs?"Mike,Sue,Matt"
          alert(oCar2.drivers);????//outputs?"Mike,Sue,Matt"


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

          4)為了解決上面問題,我們引入了構(gòu)造函數(shù)/原型的混合方式:
          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);????
          //outputs?"Mike,Sue,Matt"
          alert(oCar2.drivers);????//outputs?"Mike,Sue"


          屬性通過構(gòu)造函數(shù)方式,而函數(shù)則通過原型來生成,這就避免了純粹原型方式帶來的問題。但是函數(shù)放在對(duì)象的構(gòu)造函數(shù)定義,讓習(xí)慣java,c++的人也感覺不爽,對(duì)象為什么不能放在一塊地方定義呢?這就引出來了動(dòng)態(tài)原型方式

          5)動(dòng)態(tài)原型方式:
          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;
          ????}

          }



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

          通過引入_initialized 屬性,當(dāng)?shù)谝淮螛?gòu)造對(duì)象時(shí)生成方法showColor ,再次生成對(duì)象時(shí),此時(shí)的_initialized 已經(jīng)是true,就避免了重復(fù)生成函數(shù),屬性的定義和函數(shù)的定義都在構(gòu)造函數(shù)內(nèi),也滿足了語(yǔ)義上的對(duì)象封裝概念。

          我們應(yīng)當(dāng)盡量采用 構(gòu)造函數(shù)/原型混合方式 動(dòng)態(tài)原型方式 來創(chuàng)建ECMAScript對(duì)象。
          主站蜘蛛池模板: 南昌市| 乌拉特中旗| 鄂托克旗| 临夏市| 眉山市| 屯留县| 东兴市| 久治县| 海阳市| 腾冲县| 瓮安县| 玛纳斯县| 隆化县| 镇江市| 青田县| 东莞市| 高安市| 泰宁县| 徐汇区| 苏州市| 灵石县| 台南县| 安宁市| 年辖:市辖区| 和田县| 浮梁县| 家居| 泰和县| 尼勒克县| 潜江市| 嘉黎县| 长汀县| 灵川县| 紫阳县| 乐清市| 淮安市| 巢湖市| 连云港市| 吉林省| 佛山市| 若羌县|