詳解JavaScript基於物件導向之建立對象（2）_javascript技巧

接著上文《詳解JavaScript基於物件導向之建立對象（1）》繼續學習。

4、原型方式
       我們建立的每個函數都有一個通過prototype(原型)屬性，這個屬性是一個對象，它的用途是包含可以由特定類型的所有執行個體共用的屬性和方法。邏輯上可以這麼理解：prototypt通過條用建構函式而建立的那個對象的原型對象。使用原型的好處就是可以讓所有對象執行個體共用它所包含的屬性和方法。也就是說，不必在建構函式中定義對象資訊，而是直接將這些資訊添加到原型中。
       原型方式利用了對象的prototype 屬性，可以把它看成建立新對象所依賴的原型。這裡，首先用空建構函式來設定函數名。然後所有的屬性和方法都被直接賦予prototype屬性。我重寫了前面的例子，代碼如下：

function Car() { }; //將所有的屬性的方法都賦予prototype屬性 Car.prototype.color = "blue"; Car.prototype.doors = 4; Car.prototype.mpg = 25; Car.prototype.showColor = function() {   return this.color; }; var Car1 = new Car(); var Car2 = new Car(); document.write(Car1.showColor()+"<br/>");//輸出：blue document.write(Car2.showColor());//輸出：blue 

      在這段代碼中，首先定義建構函式Car()，其中無任何代碼。接下來的幾行代碼，通過給Car的 prototype 屬性添加屬性去定義Car對象的屬性。調用new Car()時，原型的所有屬性都被立即賦予要建立的對象，意味著所有Car執行個體存放的都是指向 showColor() 函數的指標。從語義上講，所有屬性看起來都屬於一個對象，因此解決了前面的工廠方式和建構函式方式存在的問題。
       此外，使用這種方式，還能用 instanceof 運算子檢查給定變數指向的對象的類型：

複製代碼 代碼如下:

<span style="font-size:18px;">document.write(Car1 instanceof Car);    //輸出：true</span> 

      原型方式看起來是個不錯的解決方案。遺憾的是，它並不盡如人意。首先，這個建構函式沒有參數。使用原型方式，不能通過給建構函式傳遞參數來初始化屬性的值，因為Car1和Car2的color屬性都等於 "blue"，doors屬性都等於4，mpg屬性都等於25。這意味著必須在對象建立後才能改變屬性的預設值，這點很令人討厭，但還沒完。真正的問題出現在屬性指向的是對象，而不是函數時。函數共用不會造成問題，但對象卻很少被多個執行個體共用。請思考下面的例子：

function Car() { };//定義一個空建構函式，且不能傳遞參數 Car.prototype.color = "blue"; Car.prototype.doors = 4; Car.prototype.mpg = 25; Car.prototype.drivers = new Array("Mike","John"); Car.prototype.showColor = function() {   return this.color; }; var Car1 = new Car(); var Car2 = new Car(); Car1.drivers.push("Bill"); document.write(Car1.drivers+"<br/>");//輸出：Mike,John,Bill document.write(Car2.drivers);//輸出 ：Mike,John,Bill 

       上面的代碼中，屬性drivers是指向Array對象的指標，該數組中包含兩個名"Mike"和 "John"。由於 drivers是引用值，Car的兩個執行個體都指向同一個數組。這意味著給Car1.drivers添加值 "Bill"，在 Car2.drivers 中也能看到。輸出這兩個指標中的任何一個，結果都是顯示字串 "Mike,John,Bill"。由於建立對象時有這麼多問題，你一定會想，是否有種合理的建立對象的方法呢？答案是有，需要聯合使用建構函式和原型方式。
5、混合的建構函式/原型方式(推薦使用)
       混合使用建構函式方式和原型方式，就可像用其他程式設計語言一樣建立對象。這種概念非常簡單，即用建構函式定義對象的所有非函數屬性，用原型方式定義對象的函數屬性（方法）。結果是，所有函數都只建立一次，而每個對象都具有自己的對象屬性執行個體。我們重寫了前面的例子，代碼如下：

function Car(Color,Doors,Mpg) {  this.color = Color;  this.doors = Doors;  this.mpg = Mpg;  this.drivers = new Array("Mike","John"); }; Car.prototype.showColor = function() {    return this.color; }; var Car1 = new Car("red",4,23); var Car2 = new Car("blue",3,25); Car1.drivers.push("Bill"); document.write(Car1.drivers+"<br/>");//輸出：Mike,John,Bill documnet.write(Car2.drivers);//輸出：Mike,John 

       現在就更像建立一般對象了。所有的非函數屬性都在建構函式中建立，意味著又能夠用建構函式的參數賦予屬性預設值了。因為只建立showColor()函數的一個執行個體，所以沒有記憶體浪費。此外，給Car1的drivers數組添加 "Bill" 值，不會影響到Car2的數組，所以輸出這些數組的值時，Car1.drivers 顯示的是 "Mike,John,Bill"，而 Car2.drivers 顯示的是 "Mike,John"。因為使用了原型方式，所以仍然能利用 instanceof運算子來判斷對象的類型。
       這種方式是ECMAScript採用的主要方式，它具有其他方式的特性，卻沒有他們的副作用。不過，有些開發人員仍覺得這種方法不夠完美。
6、動態原型方式
      對於習慣使用其他語言的開發人員來說，使用混合的建構函式/原型方式感覺不那麼和諧。畢竟，定義類時，大多數物件導向語言都對屬性和方法進行了視覺上的封裝。請考慮下面的 Java 類：

class Car {  public String color = "blue";  public int doors = 4;  public int mpg = 25;  public Car(String color, int doors, int mpg) {   this.color = color;   this.doors = doors;   this.mpg = mpg;  }  public void showColor() {   System.out.println(color);  } } 

        Java很好地打包了Car類的所有屬性和方法，因此看見這段代碼就知道它要實現什麼功能，它定義了一個對象的資訊。批評混合的建構函式/原型方式的人認為，在建構函式內部找屬性，在其外部找方法的做法不合邏輯。因此，他們設計了動態原型方法，以提供更友好的編碼風格。
       動態原型方法的基本想法與混合的建構函式/原型方式相同，即在建構函式內定義非函數屬性，而函數屬性則利用原型屬性定義。唯一的區別是賦予對象方法的位置。下面是用動態原型方法重寫的Car：

function Car(Color,Doors,Mpg) {  this.color = Color;  this.doors = Doors;  this.mpg = Mpg;  this.drivers = new Array("Mike","John");  //如果Car對象中的_initialized為undefined，表明還沒有為Car的原型添加方法  if (typeof Car._initialized == "undefined") {    Car.prototype.showColor = function() {     return this.color;    };    Car._initialized = true; //設定為true，不必再為prototype添加方法  } } var Car1 = new Car("red",4,23);//產生一個Car對象 var Car2 = new Car("blue",3,25); Car1.drivers.push("Bill");//向Car1對象執行個體的drivers屬性添加一個元素 document.write(Car1.drivers+"<br/>");//輸出：Mike,John,Bill document.write(Car2.drivers);//輸出：Mike,John 

       直到檢查typeof Car._initialize是否等於"undefined"之前，這個建構函式都未發生變化。這行代碼是動態原型方法中最重要的部分。如果這個值未定義，建構函式將用原型方式繼續定義對象的方法，然後把 Car._initialized設定為true。如果這個值定義了(它的值為 true時，typeof 的值為Boolean)，那麼就不再建立該方法。簡而言之，該方法使用標誌(_initialized)來判斷是否已給原型賦予了任何方法。該方法只建立並賦值一次，傳統的 OOP開發人員會高興地發現，這段代碼看起來更像其他語言中的類定義了。
       我們應該採用哪種方式呢？
       如前所述，目前使用最廣泛的是混合的建構函式/原型方式。此外，動態原型方式也很流行，在功能上與建構函式/原型方式等價。可以採用這兩種方式中的任何一種。不過不要單獨使用經典的建構函式或原型方式，因為這樣會給代碼引入問題。總之JS是基於物件導向的一門用戶端指令碼語言，我們在學習它的物件導向技術的時候要的留意JS與其他嚴謹性高的程式語言的不同。也要正確使用JS建立對象的合理的方式，推薦使用建構函式與原型方式的混合方式建立對象執行個體。這樣可以避免許多不必要的麻煩。

以上就是JavaScript基於物件導向之建立對象的全部內容，希望對大家的學習有所協助。