太陽雨

          痛并快樂著

          BlogJava 首頁 新隨筆 聯系 聚合 管理
            67 Posts :: 3 Stories :: 33 Comments :: 0 Trackbacks

          編寫類一般有如下幾種方法

          1. 工廠函數方式(factory function)

           <script type="text/javascript">
          function createCar(sColor, iDoors, iMpg) {
            var oTempCar = new Object;
            oTempCar.color = sColor;
            oTempCar.doors = iDoors;
            oTempCar.mpg = iMpg;
            oTempCar.showColor = function () {
              alert(this.color);
            };
            return oTempCar;
          }

          var oCar1 = createCar("red", 4, 23);
          var oCar2 = createCar("blue", 3, 25);
          oCar1.showColor();  //outputs "red"
          oCar2.showColor();  //outputs "blue"
          </script>

          但以上方法有個問題,就是每次調用函數createCar()時,都會創建新函數showColor(),這意味著每個對象都有自己的showColor()版本,但事實上,每個對象都共享了同一個函數。
          以下方案可以解決這個問題: 

          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);
          oCar1.showColor();  //outputs "red";
          oCar2.showColor();  //outputs "blue"

          以上黃色的部分為修改了的代碼,這樣就解決了重復創建函數對象的問題,但這個函數看起來不像是對象的方法,所以這個應該說也不是完美的解決方案

          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);
          oCar1.showColor();  //outputs "red"
          oCar2.showColor();  //outputs "blue"

          這種方式應該是現在用的最多的方式了,但和工廠方法有同樣的問題,就是會重復生成函數 ,當然,也可以如工廠函數方法一般將函數提到外面去再引用,這同樣不完美,呵呵

          3. 原型構造方法

          function Car() {
          }

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

          以上方式有兩個缺陷:1. 不能通過構造函數來給對象傳遞參數初始化屬性,必須在創建以后才能改;2. 當屬性指向的是對象而不是函數時。??聪旅娴睦樱?

          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"

          呵呵,是不是覺得很惡?看來這種方式顯然也是不對的

          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"

           呵呵,所有非函數屬性都在構造函數中創建,而函數則綁定到原型上,這個就是很完美的解決方案了

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

          oCar1.drivers.push("Matt");

          alert(oCar1.drivers);  //outputs "Mike,Sue,Matt"
          alert(oCar2.drivers);  //outputs "Mike,Sue"

           呵呵,如何,這樣就只會創建一次方法而方法又在類里面了,視覺上也要好看點

          顯然,最后兩種方法都是推薦使用的

          最后說明下,以上源代碼均來自Nicholas C. Zakas的《Professional JavaScript for Web Developers》

          posted on 2009-11-06 01:44 小蟲旺福 閱讀(295) 評論(0)  編輯  收藏 所屬分類: Javascript相關
          主站蜘蛛池模板: 海林市| 吉隆县| 丰镇市| 宁波市| 齐齐哈尔市| 曲阳县| 东乌珠穆沁旗| 获嘉县| 鄂伦春自治旗| 克什克腾旗| 平南县| 绥芬河市| 平舆县| 高台县| 顺义区| 望奎县| 固阳县| 乌审旗| 博客| 甘肃省| 宁蒗| 麻阳| 扶余县| 甘泉县| 太康县| 阳高县| 玉树县| 桐柏县| 青阳县| 彭水| 南雄市| 绥中县| 民权县| 甘孜| 东山县| 长寿区| 瓮安县| 博客| 兴城市| 石首市| 蒙山县|