最佳化javascript自訂對象

來源:互聯網
上載者:User
1.工廠方式
   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 = create("red",4,23);的時候都要從新建立新的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;
   }
   ps:這樣寫看起來好醜,不象一個對象了。

2.建構函式方法
    function Car(sColor, iDoors, iMpg){
      this.color = sColor;
      this.doors = iDoors; 
      this.mpg = iMpg;
      this.showColor = function(){
         alert(this.color);
      };
    }
   ps:預設是返回this,所以沒必要寫return this;
   缺點:建立對象的時候也要不停的建立新的函數showColor

3.原型方式
   function Car(){
   }
   Car.prototype.color = "red";
   Car.prototype.dorrs = 4;
   Car.prototype.mpg =23;
   Car.prototype.showColor = function(){
      alert(this.color);
   };
   Car.prototype.drivers = new Array("Mile","Sue");
   var oCar1 = new Car();
   var oCar2 = new Car();
   oCar1.drivers.push("Matt");
   alert(oCar1.drivers);   //輸出"Mike,Sue,Matt"
   alert(oCar2.drivers);   //輸出"Mike,Sue,Matt"

   缺點:建構函式沒參數;當屬心為對象時候,所有被實力化的Car的對象屬性都一樣!

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);
   };
   這樣問題就都解決了,不過OOPer決定它不完美

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;
      }
   }
   這樣所有問題都解決並且向個正真的對象了

6。混合工廠方式
   function Car(){
      var oTempCar = new Object;
      oTempCar.color = "red";
      oTempCar.doors = 4;
      oTempCar.mpg = 23;
      oTemp.showColor = function(){
         alert(this.color)
      };
      return oTempCar;
   }
   這種方式通常是在不能應用前一種方式時的變通方式。建立假建構函式,返回另一種對象的新執行個體。

   總結:目前用的最多的是混合的建構函式/原型方式,此外動態原型也很流行,不咬單獨使用經典的建構函式或原型方式,這樣的代碼會有問題。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.