下面小編就為大家?guī)?lái)一篇javaScript中的原型解析【推薦】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。

最近在學(xué)習(xí)javaScript，學(xué)習(xí)到j(luò)s面向?qū)ο笾械脑蜁r(shí)，感悟頗多。若有不對(duì)的地方，希望可以指正。

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

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

function Person(){}

    Person.prototype={

　　　　　// constructor:Person;

      first_name:"guo",

      hair_color:"black",

      city:"zhengzhou",

      act:function(){alert("eatting");}

    };

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

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

function Person(){} 

  Person.prototype={ 

    first_name:"guo", 

    hair_color:"black", 

    city:"zhengzhou", 

    act:function(){alert("eatting");} 

  }; 

  var boy=new Person(); 

  var girl=new Person(); 

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

alert(Person.prototype.isPrototypeOf(boy)); //true 

alert(Object.getPrototypeOf(boy).first_name);  //"guo" 

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

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 

由此可見(jiàn)，實(shí)例中聲明的重名屬性會(huì)屏蔽的原型對(duì)象中的屬性，但也僅僅時(shí)覆蓋，不會(huì)對(duì)原型對(duì)象的屬型造成影響（Object.getPrototypeOf(boy).hair_color==black），也不會(huì)對(duì)其他共享原型對(duì)象屬型的實(shí)例對(duì)象產(chǎn)生影響(girl.hair_color==black)。與此同時(shí)，可以使用delete操作符刪除實(shí)例對(duì)象聲明的屬性來(lái)撤銷(xiāo)掉屏蔽效果。我們可以使用hasOwnProperty()來(lái)驗(yàn)證一個(gè)屬型是存在于實(shí)例的（true），還是存在于原型對(duì)象的(false)。

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

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

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

alert(key); 

學(xué)習(xí)了這些，我們會(huì)發(fā)現(xiàn)，使用上面的寫(xiě)法來(lái)聲明原型對(duì)象會(huì)出現(xiàn)一個(gè)問(wèn)題，constructor不再指向Person了，這與我們說(shuō)的原型對(duì)象的constructor屬性默認(rèn)指向含有prototype屬性的函數(shù)背道而馳，這是因?yàn)椋好縿?chuàng)建一個(gè)函數(shù)會(huì)自動(dòng)創(chuàng)建一個(gè)prototype對(duì)象，這個(gè)對(duì)象會(huì)默認(rèn)創(chuàng)建constructor。所以，此處我們的本質(zhì)是對(duì)默認(rèn)的prototype進(jìn)行了重寫(xiě)，因此新的consrtuctor也變成了指向Object函數(shù)，不再指向Person函數(shù)。若constructor真的很重要，那么需要寫(xiě)上constructor:Person.

之后，我們需要知道原型的動(dòng)態(tài)性，改變?cè)蛯?duì)象中的屬性會(huì)反應(yīng)到實(shí)例中，不管實(shí)例的創(chuàng)建在原型對(duì)象的屬型改變前面或者后面

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 

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

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

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 

再回到“屏蔽”這一問(wèn)題上，我們前面了解到了創(chuàng)建實(shí)例對(duì)象的屬性（與原型對(duì)象中的某一屬性重名）會(huì)屏蔽掉原型對(duì)象的該屬性，但不影響其他實(shí)例對(duì)象。這里有一個(gè)錯(cuò)誤，這個(gè)情況只適用于基本數(shù)據(jù)類(lèi)型，當(dāng)屬性的值引用類(lèi)型時(shí)，會(huì)出現(xiàn)一個(gè)大問(wè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

可見(jiàn)，上面這句話(huà)不適用了，原因是friends是存在于原型對(duì)象中的，而不是boy中，所以他的修改會(huì)影響到這個(gè)環(huán)境。（我們可以通過(guò)boy.frindes=[]來(lái)創(chuàng)建一個(gè)boy實(shí)例的屬性）那么，我們就需要引入組合使用構(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中使用最廣泛，認(rèn)同最高的創(chuàng)建自定義類(lèi)型的方法，甚至可以作為一種默認(rèn)模式。

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

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

以上這篇javaScript中的原型解析【推薦】就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考