javaScript中的原型解析【推薦】_javascript技巧

最近在學習javaScript，學習到js物件導向中的原型時，感悟頗多。若有不對的地方，希望可以指正。

js作為一門物件導向的語言，自然也擁有了繼承這一概念，但js中沒有類別的概念，也就沒有了類似於java中的extends，所以，我覺得js中的繼承主要依賴於js中的原型（鏈）。

那麼，原型是什麼呢？我們知道js中函數也是一種對象，當我們建立一個函數時，其實這個函數也就預設的擁有了一個屬性叫做prototype,這個屬型叫做原型屬性，他是一個指針，指向了這個函數的原型對象，這個原型物件有一個預設的屬性叫做constructor,這個屬型指向了擁有protptype屬型的函數。

function Person(){}
    Person.prototype={
　　　　　// constructor:Person;
      first_name:"guo",
      hair_color:"black",
      city:"zhengzhou",
      act:function(){alert("eatting");}
    };

以這個為例，我們先建立了一個函數Person,這個函數預設的有一個屬性prototype,指向Person.propttype這個物件,這個物件有一個預設的屬性constructor（），Person.prototype.constructor-- ->Person.（其實此處預設的是指向Object,後面會做指正）

當我們透過建構函式創建了實例後會怎麼樣呢？

function Person(){} 
  Person.prototype={ 
    first_name:"guo", 
    hair_color:"black", 
    city:"zhengzhou", 
    act:function(){alert("eatting");} 
  }; 
  var boy=new Person(); 
  var girl=new Person(); 

在這時，我們要知道，js中的建構函式與函式的差別便是這個new關鍵字，使用new運算子的函式就是一個建構函式。當我們創建了Person的實例物件把它保存在boy,girl時，這兩個實例物件會產生一個預設的屬性叫做_proto_（在ECMAScript5中可用[[prototype]]表示），這個屬型指向了構造函數的原型對象，也就是boy._proto_--->Person.prototype(與建構子毫無關係)。此時,boy或girl可以透過點來呼叫原型物件中的屬型，此時要知道，boy,girl共享了原型物件的屬型。我們可以透過isProtptypeOf()或object.getPrototypeOf()(這個函數的返回值為原型對象，也就是_proto_的值)來驗證上述結論。

alert(Person.prototype.isPrototypeOf(boy)); //true 
alert(Object.getPrototypeOf(boy).first_name);  //"guo" 

此時，我們可以再做進一步驗證，若在實例中建立了一個與原型物件屬性重名的屬性會怎麼樣呢？

var boy=new Person(); 
var girl=new Person(); 
boy.hair_color="red";  
alert(boy.hair_color);  //red 
alert(girl.hair_color); //black 
alert(Object.getPrototypeOf(boy).hair_color);  //black 

由此可見，實例中宣告的重名屬性會屏蔽的原型物件中的屬性，但也僅僅時覆寫，不會對原型物件的屬型造成影響（Object.getPrototypeOf(boy).hair_color== black），也不會對其他共享原型物件屬型的實例物件產生影響(girl.hair_color==black)。同時，可以使用delete操作符刪除實例物件聲明的屬性來撤銷掉屏蔽效果。我們可以使用hasOwnProperty()來驗證一個屬型是存在於實例的（true），還是存在於原型物件的(false)。

alert(boy.hasOwnProperty("hair_color")); //true

可以使用Object.keys()來列舉屬性。

var key=Object.keys(Person.prototype); 
alert(key); 

學習了這些，我們會發現，使用上面的寫法來聲明原型物件會出現一個問題，constructor不再指向Person了，這與我們說的原型物件的constructor屬性預設指向含有prototype屬性的函數背道而馳，這是因為：每建立一個函數會自動建立一個prototype對象，這個物件就會預設建立constructor。所以，這裡我們的本質是對預設的prototype進行了重寫，因此新的consrtuctor也變成了指向Object函數，不再指向Person函數。若constructor真的很重要，那麼需要寫上constructor:Person.

之後，我們需要知道原型的動態性，改變原型物件中的屬性會反應到實例中，不管實例的創建在原型物件的屬型改變前面或後面

function Person(){} 
Person.prototype={ 
  first_name:"guo", 
  hair_color:"black", 
  city:"zhengzhou", 
  act:function(){alert("eatting");} 
}; 
 
var boy=new Person(); 
Person.prototype.hobby="basketball"; 
var girl=new Person(); 
alert(boy.hobby); //basketball 

上面這段程式碼可見，即使原型物件屬性的修改發生在實例建立的後面，boy實例亦然共享了Person.prototype.hobby.

但是，這種情況僅僅發生在原型物件屬型的修改，當對原型物件屬性進行完全重寫時，實例的建立必須放在原型物件屬性重寫的後面，否則會出錯。

function Person(){} 
    var girl=new Person(); 
    Person.prototype={ 
      first_name:"guo", 
      hair_color:"black", 
      city:"zhengzhou", 
      act:function(){alert("eatting");} 
    }; 
 
    var boy=new Person(); 
    Person.prototype.hobby="basketball"; 
     
    alert(boy.hobby);  //basketball 
    alert(girl.first_name);  //undefined 

再回到「屏蔽」這個問題上，我們前面了解到了創建實例對象的屬性（與原型對像中的某一屬性重名）會屏蔽掉原型對象的該屬性，但不影響其他實例對象。這裡有一個錯誤，這個情況只適用於基本資料型，當屬性的值引用型別時，會出現一個大問題，看如下程式碼。

function Person(){}
    
    Person.prototype={
      first_name:"guo",
      hair_color:"black",
      friends:["Nick","John"],
      city:"zhengzhou",
      act:function(){alert("eatting");}
    };

    var boy=new Person();
    boy.friends.push("Mike");
    var girl=new Person();
    alert(boy.friends);  //Nick,John,Mike
    alert(girl.friends); //Nick,John,MIke

可見，上面這句話不適用了，原因是friends是存在於原型物件中的，而不是boy中，所以他的修改會影響到這個環境。 （我們可以透過boy.frindes=[]來創建一個boy實例的屬性）那麼，我們就需要引入組合使用構造函數模式與原型模式。

function Person(hair_color,city){ 
       
      this.hair_color=hair_color; 
      this.city=city; 
      this.friends=["John","Nick"]; 
    } 
    Person.prototype={ 
      constructor:Person, 
      first_name:"guo", 
      act:function() { 
         
        alert("eatting"); 
      } 
    }; 
    var boy=new Person("black","zhengzhou"); 
    var girl=new Person("red","shenyang"); 
    boy.friends.push("Nick"); 
    alert(girl.friends); 
    alert(boy.friends); 

このモードは現在、ECMAScript でカスタム タイプを作成する方法として最も広く使用され認識されており、デフォルト モードとしても使用できます。

しかし、他のオブジェクト指向言語で作業しているプログラマーにとって、このパターンは、すべての情報をコンストラクターにカプセル化するために、動的プロトタイプ パターンが登場したのとは奇妙に思えます。動的モードでは、主に if ステートメントを使用して、リソースを節約するためにプロトタイプ オブジェクトを初期化する必要があるかどうかを判断します。

さらに、共有属性がなく、これが使用されない状況に適応するための安全な構築モードがあります。

上記の JavaScript でのプロトタイプ分析 [推奨] は、エディターによって共有されたすべての内容です。参考にしていただければ幸いです。スクリプト ホームをサポートしていただければ幸いです。