<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    太陽雨

    痛并快樂著

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

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

    1. 工廠函數(shù)方式(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>

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

    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"

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

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

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

    3. 原型構(gòu)造方法

    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. 不能通過構(gòu)造函數(shù)來給對象傳遞參數(shù)初始化屬性,必須在創(chuàng)建以后才能改;2. 當(dāng)屬性指向的是對象而不是函數(shù)時。??聪旅娴睦樱?

    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. 混合構(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"

     呵呵,所有非函數(shù)屬性都在構(gòu)造函數(shù)中創(chuàng)建,而函數(shù)則綁定到原型上,這個就是很完美的解決方案了

    5. 動態(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);

    oCar1.drivers.push("Matt");

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

     呵呵,如何,這樣就只會創(chuàng)建一次方法而方法又在類里面了,視覺上也要好看點(diǎn)

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

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

    posted on 2009-11-06 01:44 小蟲旺福 閱讀(301) 評論(0)  編輯  收藏 所屬分類: Javascript相關(guān)
    主站蜘蛛池模板: 91亚洲一区二区在线观看不卡| 三级黄色免费观看| 亚洲视频一区网站| 在线免费观看h片| 美女网站免费福利视频| 成年性羞羞视频免费观看无限| 成年女人永久免费观看片| 国产伦精品一区二区三区免费下载| 亚洲精品少妇30p| 亚洲免费福利视频| 羞羞视频免费观看| 国产拍拍拍无码视频免费| 4虎永免费最新永久免费地址| 亚洲国产主播精品极品网红| 亚洲成AV人片在线观看ww| 亚洲乱人伦中文字幕无码| 两性色午夜免费视频| 久久青草亚洲AV无码麻豆| 精品国产亚洲第一区二区三区| 精品在线免费观看| 久久亚洲AV无码精品色午夜麻豆| 亚洲免费中文字幕| 亚洲中文字幕久久精品无码APP | 亚洲欧洲精品国产区| 男人免费视频一区二区在线观看| 19禁啪啪无遮挡免费网站| 伊人久久大香线蕉亚洲| 日韩电影免费在线观看| 亚洲精品线路一在线观看 | 国产午夜亚洲精品不卡电影| 7m凹凸精品分类大全免费| 久久久久噜噜噜亚洲熟女综合| 亚洲熟妇无码AV| 伊人久久免费视频| 夜夜春亚洲嫩草影院| 久久免费福利视频| 亚洲成AV人片高潮喷水| 麻豆最新国产剧情AV原创免费| 亚洲GV天堂GV无码男同| 国产亚洲人成网站观看| 美女视频黄是免费的网址|