莊周夢蝶

          生活、程序、未來
             :: 首頁 ::  ::  :: 聚合  :: 管理

          ECMAScript對象基礎

          Posted on 2007-02-06 14:05 dennis 閱讀(559) 評論(0)  編輯  收藏 所屬分類: web開發
          ?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)工廠方式:

          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()不是對象的方法

          2)構造函數方式:

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


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

          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"


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

          4)為了解決上面問題,我們引入了構造函數/原型的混合方式:
          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"


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

          5)動態原型方式:
          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 屬性,當第一次構造對象時生成方法showColor ,再次生成對象時,此時的_initialized 已經是true,就避免了重復生成函數,屬性的定義和函數的定義都在構造函數內,也滿足了語義上的對象封裝概念。

          我們應當盡量采用 構造函數/原型混合方式 動態原型方式 來創建ECMAScript對象。
          主站蜘蛛池模板: 大姚县| 吐鲁番市| 永城市| 马关县| 绥芬河市| 扎兰屯市| 南投县| 孙吴县| 芜湖县| 海盐县| 柳州市| 隆回县| 通许县| 宁化县| 高淳县| 碌曲县| 县级市| 新田县| 西昌市| 虞城县| 车致| 碌曲县| 渑池县| 庆城县| 监利县| 肃北| 确山县| 宁夏| 黑河市| 理塘县| 温泉县| 通榆县| 临高县| 察隅县| 于都县| 凤阳县| 岳阳市| 砀山县| 同江市| 宝应县| 进贤县|