在日常學習,、工作或生活中,，大家總少不了接觸作文或者范文吧，通過文章可以把我們那些零零散散的思想,，聚集在一塊,。范文書寫有哪些要求呢？我們怎樣才能寫好一篇范文呢,？下面是小編幫大家整理的優(yōu)質范文,，僅供參考，大家一起來看看吧,。

javascript 原型 js原型理解篇一

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

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

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

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

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

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

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

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

alert(ype.isprototypeof(boy)); //true alert(totypeof(boy).first_name); //"guo"

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

var boy=new person(); var girl=new person(); _color="red"; alert(_color); //red alert(_color); //black alert(totypeof(boy).hair_color); //black

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

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

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

var key=(ype); alert(key);

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

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

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

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

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

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

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

function person(){} ype={ first_name:"guo", hair_color:"black", friends:["nick","john"], city:"zhengzhou", act:function(){alert("eatting");} }; var boy=new person(); s.push("mike"); var girl=new person(); alert(s); //nick,john,mike alert(s); //nick,john,mike

可見,，上面這句話不適用了，原因是friends是存在于原型對象中的,，而不是boy中,，所以他的修改會影響到這個環(huán)境。（s=[]來創(chuàng)建一個boy實例的屬性）那么,，我們就需要引入組合使用構造函數(shù)模式與原型模式,。

function person(hair_color,city){ _color=hair_color; =city; s=["john","nick"]; } ype={ constructor:person, first_name:"guo", act:function() { alert("eatting"); } }; var boy=new person("black","zhengzhou"); var girl=new person("red","shenyang"); s.push("nick"); alert(s); alert(s);

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

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

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

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

【javascript中的原型解析】相關文章：

1.

qt理解javascript原型

理解javascript原型鏈教程

javascript中的原型鏈prototype詳解

javascript之強大的原型和原型鏈

javascript中“+”的解析

深入理解javascript的繼承和原型鏈

javascript scoping hoisting解析

javascript中的dom方法