您的位置 >>> 星想互聯 >>> 編程技術 >>> JQUERY+JS
JS中定義對象的方式
點擊數:318  發布時間2019-01-08 22:16:09
1、工廠方式 

  function Car(){ 
   var ocar = new Object; 
   ocar.color = "blue"; 
   ocar.doors = 4; 
   ocar.showColor = function(){ 
    document.write(this.color) 
   }; 
   return ocar; 
  } 

  var car1 = Car(); 
  var car2 = Car(); 

  調用此函數時將創建新對象,并賦予它所有的屬性和方法。使用此函數可以創建2個屬性完全相同的對象。當然也可以通過給它傳遞參數來改版這種方式。 

  function Car(color,door){ 
   var ocar = new Object; 
   ocar.color = color; 
   ocar.doors = door; 
   ocar.showColor = function(){ 
    document.write(this.color) 
   }; 
   return ocar; 
  } 

  var car1 = Car("red",4); 
  var car2 = Car("blue",4); 
  car1.showColor()  //output:"red" 
  car2.showColor()  //output:"blue" 

  現在可以通過給函數傳遞不同的參數來得到具有不同值的對象。 

  在前面的例子中,每次調用函數Car(),都要創建showcolor(),意味著每個對象都有一個自己的showcolor()方法。 
  但是事實上,每個對象斗共享了同一個函數。 

  雖然可以在函數外定義方法,然后通過將函數的屬性指向該方法。 

  function showColor(){ 
   alert(this.color); 
  } 

  function Car(){ 
   var ocar = new Object(); 
   ocar.color = color; 
   ocar.doors = door; 
   ocar.showColor = showColor; 
   return ocar; 
  } 

  但是這樣看起來不像是函數的方法。 

2、構造函數方式 

  構造函數方式同工廠方式一樣簡單,如下所示: 

  function Car(color,door){ 
   this.color = color; 
   this.doors = door; 
   this.showColor = function(){ 
    alert(this.color) 
   }; 
  } 

  var car1 = new Car("red",4); 
  var car2 = new Car("blue",4); 

  可以看到構造函數方式在函數內部沒有創建對象,是用this關鍵字。因為在調用構造函數時已經創建了對象,而在函數內部只能用this來訪問對象屬性。 

  現在用new來創建對象,看起來像那么回事了!但是它同工廠方式一樣。每次調用都會為對象創建自己的方法。 

3、原型方式 

  該方式利用了對象的prototype屬性。首先用空函數創建類名,然后所有的屬性和方法都被賦予prototype屬性。 

  function Car(){ 
  } 

  Car.prototype.color = "red"; 
  Car.prototype.doors = 4; 
  Car.prototype.showColor = function(){ 
   alert(this.color); 
  } 

  var car1 = new Car(); 
  var car2 = new Car(); 

  在這段代碼中,首先定義了一個空函數,然后通過prototype屬性來定義對象的屬性。調用該函數時,原型的所有屬性都會立即賦予要創建的對象,所有該函數的對象存放的都是指向showColor()的指針,語法上看起來都屬于同一個對象。 

  但是這個函數沒有參數,不能通過傳遞參數來初始化屬性,必須要在對象創建后才能改變屬性的默認值。 

  原型方式有個很嚴重的問題就是當屬性指向的是對象時,如數組。 

  function Car(){ 
  } 

  Car.prototype.color = "red"; 
  Car.prototype.doors = 4; 
  Car.prototype.arr = new Array("a","b"); 
  Car.prototype.showColor = function(){ 
   alert(this.color); 
  } 

  var car1 = new Car(); 
  var car2 = new Car(); 

  car1.arr.push("cc"); 

  alert(car1.arr);  //output:aa,bb,cc 
  alert(car2.arr);  //output:aa,bb,cc 

  這里由于數組的引用值,Car的兩個對象指向的都是同一個數組,所以當在car1添加值后,在car2中也可以看到。 

4、混合的構造函數/原型方式 

  聯合是用構造函數/原型方式就可以像其他程序設計語言一樣創建對象,是用構造函數定義對象的非函數屬性,用原型方式定義對象的方法。 

  function Car(color,door){ 
   this.color = color; 
   this.doors = door; 
   this.arr = new Array("aa","bb"); 
  } 
  Car.prototype.showColor(){ 
   alert(this.color); 
  } 

  var car1 = new Car("red",4); 
  var car2 = new Car("blue",4); 

  car1.arr.push("cc"); 

  alert(car1.arr);  //output:aa,bb,cc 
  alert(car2.arr);  //output:aa,bb 

   
5、動態原型方式 

  動態原型的方式同混合的構造函數/原型方式原理相似。唯一的區別就是賦予對象方法的位置。 

  function Car(color,door){ 
   this.color = color; 
   this.doors = door; 
   this.arr = new Array("aa","bb"); 

   if(typeof Car._initialized == "undefined"){ 
    Car.prototype.showColor = function(){ 
     alert(this.color); 
    }; 
    Car._initialized = true; 
   } 
  } 

  動態原型方式是使用一個標志來判斷是否已經給原型賦予了方法。這樣可以保證該方法只創建一次 

6、混合工廠方式 

  它的目的師創建假構造函數,只返回另一種對象的新實例。 

  function Car(){ 
   var ocar = new Object(); 
   ocar.color = "red"; 
   ocar.doors = 4; 
   ocar.showColor = function(){ 
    alert(this.color) 
   }; 
   return ocar; 
  } 

  與工廠方式所不同的是,這種方式使用new運算符。 

   目前使用最廣泛的就是混合構造函數/原型方式,此外,動態原型方式也很流行。在功能上與構造函數/原型方式等價
來源:咸寧網站建設
香港日本三级在线播放-中文字幕日本无吗-电影日本强奷在线播放