javaScript中的原型解析

javaScript中的原型解析

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

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

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

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

以這個為例，我們先創建了一個函數Person,這個函數默認的有一個屬性prototype,指向ttype這個對象,這個對象有一個默認的屬性constructor（），tructor--->Person.（其實此處默認的是指向Object,後面會做指正）

當我們通過構造函數創建了實例後會怎麼樣呢？

function Person(){} otype={ 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_--->otype(與構造函數毫無關係)。此時,boy或者girl可以通過點來調用原型對象中的屬型，此時要知道，boy,girl共享了原型對象的屬型。我們可以通過isProtptypeOf()或者rototypeOf()(這個函數的返回值為原型對象，也就是_proto_的值)來驗證上述結論。

alert(ototypeOf(boy)); //true alert(rototypeOf(boy)t_name); //"guo"

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

var boy=new Person(); var girl=new Person(); _color="red"; alert(_color); //red alert(_color); //black alert(rototypeOf(boy)_color); //black

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

alert(wnProperty("hair_color")); //true

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

var key=(otype); alert(key);

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

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

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

上面這段代碼可見，即使對原型對象屬性的修改發生在實例創建的後面，boy實例亦然共享了y.

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

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

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

function Person(){} otype={ first_name:"guo", hair_color:"black", friends:["Nick","John"], city:"zhengzhou", act:function(){alert("eatting");} }; var boy=new Person(); ("Mike"); var girl=new Person(); alert(nds); //Nick,John,Mike alert(nds); //Nick,John,MIke

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

function Person(hair_color,city){ _color=hair_color; =city; nds=["John","Nick"]; } otype={ constructor:Person, first_name:"guo", act:function() { alert("eatting"); } }; var boy=new Person("black","zhengzhou"); var girl=new Person("red","shenyang"); ("Nick"); alert(nds); alert(nds);

該模式是目前ECMAScript中使用最廣泛，認同最高的創建自定義類型的方法，甚至可以作為一種默認模式。

但是對於從事其他面向對象語言的程序員來説，這樣的模式顯得很怪異，為了將所有的信息都封裝到構造函數中，動態原型模式出現了。動態模式主要是通過一個if語句來判斷是否需要對原型對象進行初始化，以達到節省資源的目的。

此外還有穩妥構造模式，是為了適應沒有共享屬性和不使用this的情況。

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