最近在學習javaScript，學習到js面向?qū)ο笾械脑蜁r，感悟頗多。若有不對的地方，希望可以指正。

js作為一門面向?qū)ο蟮恼Z言，自然也擁有了繼承這一概念，但js中沒有類的概念，也就沒有了類似于java中的extends，所以，我覺得js中的繼承主要依賴于js中的原型（鏈）。

那么，原型是什么呢？我們知道js中函數(shù)亦是一種對象，當我們創(chuàng)建一個函數(shù)時，其實這個函數(shù)也就默認的擁有了一個屬性叫做prototype,這個屬型叫做原型屬性，他是一個指針，指向了這個函數(shù)的原型對象，這個原型對象有一個默認的屬性叫做constructor,這個屬型指向了擁有protptype屬型的函數(shù)。

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

以這個為例，我們先創(chuàng)建了一個函數(shù)Person,這個函數(shù)默認的有一個屬性prototype,指向Person.propttype這個對象,這個對象有一個默認的屬性constructor（），Person.prototype.constructor--->Person.（其實此處默認的是指向Object,后面會做指正）

當我們通過構(gòu)造函數(shù)創(chuàng)建了實例后會怎么樣呢？

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中的構(gòu)造函數(shù)與函數(shù)的區(qū)別便是這個new關(guān)鍵字，使用new操作符的函數(shù)便是一個構(gòu)造函數(shù)。當我們創(chuàng)建了Person的實例對象把它保存在boy,girl時，這兩個實例對象會生成一個默認的屬性叫做_proto_（在ECMAScript5中可用[[prototype]]表示），這個屬型指向了構(gòu)造函數(shù)的原型對象，也就是boy._proto_--->Person.prototype(與構(gòu)造函數(shù)毫無關(guān)系)。此時,boy或者girl可以通過點來調(diào)用原型對象中的屬型，此時要知道，boy,girl共享了原型對象的屬型。我們可以通過isProtptypeOf()或者object.getPrototypeOf()(這個函數(shù)的返回值為原型對象，也就是_proto_的值)來驗證上述結(jié)論。

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

此時，我們可以再做進一步驗證，若在實例中創(chuàng)建了一個與原型對象屬性重名的屬性會怎么樣呢？

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），也不會對其他共享原型對象屬型的實例對象產(chǎn)生影響(girl.hair_color==black)。與此同時，可以使用delete操作符刪除實例對象聲明的屬性來撤銷掉屏蔽效果。我們可以使用hasOwnProperty()來驗證一個屬型是存在于實例的（true），還是存在于原型對象的(false)。

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

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

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

學習了這些，我們會發(fā)現(xiàn)，使用上面的寫法來聲明原型對象會出現(xiàn)一個問題，constructor不再指向Person了，這與我們說的原型對象的constructor屬性默認指向含有prototype屬性的函數(shù)背道而馳，這是因為：每創(chuàng)建一個函數(shù)會自動創(chuàng)建一個prototype對象，這個對象會默認創(chuàng)建constructor。所以，此處我們的本質(zhì)是對默認的prototype進行了重寫，因此新的consrtuctor也變成了指向Object函數(shù)，不再指向Person函數(shù)。若constructor真的很重要，那么需要寫上constructor:Person.

之后，我們需要知道原型的動態(tài)性，改變原型對象中的屬性會反應到實例中，不管實例的創(chuàng)建在原型對象的屬型改變前面或者后面

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 

上面這段代碼可見，即使對原型對象屬性的修改發(fā)生在實例創(chuàng)建的后面，boy實例亦然共享了Person.prototype.hobby.

但是，這種情況僅僅發(fā)生在原型對象屬型的修改，當對原型對象屬性進行完全重寫時，實例的創(chuàng)建必須放在原型對象屬性重寫的后面，否則會出錯。

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 

再回到“屏蔽”這一問題上，我們前面了解到了創(chuàng)建實例對象的屬性（與原型對象中的某一屬性重名）會屏蔽掉原型對象的該屬性，但不影響其他實例對象。這里有一個錯誤，這個情況只適用于基本數(shù)據(jù)類型，當屬性的值引用類型時，會出現(xiàn)一個大問題，看如下代碼。

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中，所以他的修改會影響到這個環(huán)境。（我們可以通過boy.frindes=[]來創(chuàng)建一個boy實例的屬性）那么，我們就需要引入組合使用構(gòu)造函數(shù)模式與原型模式。

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中使用最廣泛，認同最高的創(chuàng)建自定義類型的方法，甚至可以作為一種默認模式。

但是對于從事其他面向?qū)ο笳Z言的程序員來說，這樣的模式顯得很怪異，為了將所有的信息都封裝到構(gòu)造函數(shù)中，動態(tài)原型模式出現(xiàn)了。動態(tài)模式主要是通過一個if語句來判斷是否需要對原型對象進行初始化，以達到節(jié)省資源的目的。

此外還有穩(wěn)妥構(gòu)造模式，是為了適應沒有共享屬性和不使用this的情況。

以上這篇javaScript中的原型解析【推薦】就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論