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

1、javascript中的原型解析【推薦】最近在學(xué)習(xí)javascript,學(xué)習(xí)到j(luò)s面向?qū)﹀柚械脑蜁r(shí)，感悟頗多。若有不對 的地方，希望可以指正。js作為一門面向?qū)ο蟮恼Z言，自然也擁冇了繼承這一概念，但js中沒冇類的概 念，也就沒有了類似于ja腹中的extends,所以，我覺得js中的繼承主要依賴 于js中的原型(鏈)。那么，原型是什么呢？我們知道js中函數(shù)亦是一種對彖，當(dāng)我們創(chuàng)建一個(gè)函數(shù) 吋，其實(shí)這個(gè)函數(shù)也就默認(rèn)的擁有了一個(gè)屬性叫做prototype,這個(gè)屬型叫做原 型屬性，他是一個(gè)指針，指向了這個(gè)函數(shù)的原型對象，這個(gè)原型對象冇一個(gè)默認(rèn) 的屈性叫做constructor,這個(gè)屈型指向了擁有pr

2、otptypc屈型的函數(shù)。function person() person. prototype= / constructor:person;first name:guo7',haircolor: /zblack/z,city:zhengzhou",act:function() alert(z，eatling") ;；以這個(gè)為例，我們先創(chuàng)建了一個(gè)函數(shù)person,這個(gè)函數(shù)默認(rèn)的冇一個(gè)屈性 prototype,指向person, propttype這個(gè)對象,這個(gè)對彖冇一個(gè)默認(rèn)的屈性 constructor () , person, prototype, constru

3、ctor>person.(其實(shí)此處默認(rèn)的是指向object,后面會做指正)當(dāng)我們通過構(gòu)造函數(shù)創(chuàng)建了實(shí)例后會怎么樣呢？function person() person, prototype!f irst_name:，zguoz，,hair_color: z，blackz，,city:"zhcngzhou",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ù)

4、便是一個(gè)構(gòu)造函數(shù)。當(dāng)我們創(chuàng)建了 person的實(shí)例對象把它 保存在boy, girl時(shí)，這兩個(gè)實(shí)例對象會生成一個(gè)默認(rèn)的屈性叫做_proto_ (在 ecmascript5中可用prototype表示)，這個(gè)屬型指向了構(gòu)造函數(shù)的原型對 象，也就是boy. _proto_ >person. prototype (與構(gòu)造函數(shù)毫無關(guān)系)。此 時(shí),boy或者girl可以通過點(diǎn)來調(diào)用原型對象中的屬型,此吋要知道，boy, girl 共享了原型對象的屬型。我們口j以通過isprotptypeof ()或者object. gctprototypeof ()(這個(gè)函數(shù)的返回值為原型對象，也就是_proto

5、_的值) 來驗(yàn)證上述結(jié)論。alert(person. prototype, isprototypeof(boy); /truealert(object getprototypeof(boy). first_name);/"guo"此時(shí)，我們可以再做進(jìn)一步驗(yàn)證，若在實(shí)例屮創(chuàng)建了一個(gè)與原型對彖屈性重名的 屈性會怎么樣呢？var boy二new person ();var girl二new person();boy. h3ir_color二red"alert (boy. hair_color) ; /redalert (gir1. haircolor) ; /black

6、alert(object. getprototypeof(boy). hair color); /black由此可見，實(shí)例中聲明的重名屬性會屏蔽的原型對象中的屬性，但也僅僅時(shí)覆蓋, 不會對原型對彖的屬型造成影響(object. getprototypeof (boy). hair_color=black)，也不會對jt他共享原型 對象屬型的實(shí)例對象產(chǎn)生影響(girl. hair_color=black) 0與此同時(shí)，可以使用 delete操作符刪除實(shí)例對象聲明的屬性來撤銷掉屏蔽效果。我們可以使用 hasownpropertyo驗(yàn)證一個(gè)屬型是存在于實(shí)例的(true),還是存在于原型對 象的(fa

7、lse) o alert(boy.hasownproperty(hair_color)； /true可以使用object. keys()來枚舉屬性。var kcy=objcct keys(person. prototype);alert (key);學(xué)習(xí)了這些，我們會發(fā)現(xiàn)，使用上面的寫法來聲明原型對象會出現(xiàn)一個(gè)問題， constructor不再指向person 了，這與我們說的原型對象的constructor屬性 默認(rèn)指向含prototype屬性的函數(shù)背道而馳，這是因?yàn)椋好縿?chuàng)建一個(gè)函數(shù)會自 動創(chuàng)建一個(gè)prototype對象，這個(gè)對象會默認(rèn)創(chuàng)建constructor。所以，此處我 們的本質(zhì)是對默

8、認(rèn)的prototype進(jìn)行了重寫，因此新的consrtuctor也變成了指 向object函數(shù)，不再指向person函數(shù)。若constructor真的很重要，那么需要 寫上 constructor: person.z后，我們需要知道原型的動態(tài)性，改變原型對彖中的屬性會反應(yīng)到實(shí)例中，不 管實(shí)例的創(chuàng)建在原型對象的屬型改變前面或者后面function pcrson() person. prototype=first_name:guo，hair_color:city:zhengzhou",act: function() alert (z，catting); ;var boy二new pers

9、on();person, prototype. hobby二basketbal1;var girl二new pcrsono ; alert (boy. hobby); /basketball上面這段性碼可見，即使對原型對象屬性的修改發(fā)生在實(shí)例創(chuàng)建的后面，boy實(shí) 例亦然共享了 person, prototype, hobby.但是，這種情況僅僅發(fā)生在原型對象屬型的修改，當(dāng)對原型對象屬性進(jìn)行完全重 寫時(shí)，實(shí)例的創(chuàng)建必須放在原型對彖屈性重寫的后而，否則會出錯(cuò)。function person() var girl二new person();person, prototype first_name:g

10、uo， hair_color:，zblackz，, city:"zhengzhou", act:function() alert (/zeatting)； ;var boy=new persono ;person, prototype, hobby二basketball"alert(boy. hobby) ; /basketbal1 alert(girl, first_nomc); /undefined再回到“屏蔽”這一問題上，我們前而了解到了創(chuàng)建實(shí)例對彖的屈性(與原型對 彖中的某一屬性重名)會屏蔽掉原型對象的該屬性，但不影響其他實(shí)例對象。這 里冇一個(gè)錯(cuò)誤，這個(gè)情

11、況只適用于基本數(shù)據(jù)類型，當(dāng)屈性的值引用類型時(shí)，會出 現(xiàn)一個(gè)大問題，看如下代碼。function person() person. prototypc= f irst_name:，zguoz，, hair_color:，zblack/z, friends:"nick, "john", city: z，zhe ngzhou", act: function () alert (zzeatting);var boy=new person();boy.friends. push("mike"); var girl二new pcrsono ;al

12、ert (boy. friends); /nick, john, mikealert (girl, friends); /nick, john, mike可見，上面這句話不適用了，原因是friends是存在于原型對象中的，而不是 boy中，所以他的修改會影響到這個(gè)環(huán)境。(我們口j以通過boy. frindes二來創(chuàng) 建一個(gè)boy實(shí)例的屈性)那么，我們就需要引入組合使用構(gòu)造函數(shù)模式與原型模 式。function person(hair_color, city)this.hair color=hair color;this. city=city;this. friends=/，john，/, &q

13、uot;nick" person. prototype= construetor:person，first_name:guo,act:function() al ert(eatting)；;var boy二new person (blnckzhengzhou"); var girl二new person(:red，shenyang)； boy. friends, push("nick");alert(girl, fricnds);alert(boy. friends);該模式是目前ecmascript屮使用最廣泛，認(rèn)同最高的創(chuàng)建自定義類型的方法， 甚至可以作為一種默認(rèn)模式。但