資源描述:
《javascript 中 prototype的理解 以及原型鏈實(shí)現(xiàn)繼承的原理》由會員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、javascript中prototype的理解以及原型鏈實(shí)現(xiàn)繼承的原理我們經(jīng)常用prototype的方式實(shí)現(xiàn)js對象的繼承,以前一直沒有去細(xì)看過prototype,constructor和對象以及new出來的實(shí)例對象的關(guān)系現(xiàn)在來梳理一下對象,prototype,constructor,實(shí)例對象之間的關(guān)系?Parent對象??1234567891011121314//Parentfunction?Parent(){????this.name="wangzheng";????this.password="123456";}//Parent.prototype?=?object;
2、//這一步其實(shí)可以不用寫Parent.prototype.showMe=function(){????document.write(this.name?+"-"+this.password);};var?parent?=?new?Parent();?alert(Parent.prototype);//[object?Object]alert(Parent.prototype.constructor);//function?Parent(){...}alert(parent.prototype);//undefined通過這段代碼我們可以得出:?1.這個Parent對象本身具
3、有一個prototype屬性,它指向一個獨(dú)立的prototype對象,?2.這個prototype對象又包含一個constractor屬性,它反過來指向了Parent對象的定義function.這一點(diǎn)在代碼的alert輸出中可以看到3.new出來的parent實(shí)例對象她是不具備prototype屬性的所以alert輸出她的prototype是undefined.但是還有一個疑問??,parent實(shí)例對象里沒有prototype屬性,卻可以使用prototype上的showMe方法,這怎么說呢?直接看firebug的信息:parent實(shí)例對象里面有一個屬性__proto__她
4、指向了Parent對象的prototype,這樣一看就真相大白parent實(shí)例對象之所以可以調(diào)用showMe方法,就是因?yàn)檫@個屬性__proto__?通過__proto__實(shí)現(xiàn)的調(diào)用當(dāng)然這個圖中你還可以看到?prototype里包含constructor,constructor指向Parent,Parent包含prototype,prototype包含constructor........互相引用的畫個圖就是這樣的:繼承中的原型鏈下面研究一下繼承的情況?加入一個子類?1234567891011//Sonfunction?Son(){????this.name="jiangw
5、en";????this.password="abcd1234";????this.sonName="wahaha";}Son.prototype?=?parent;Son.prototype.showMeSon=function(){????document.write(this.name?+"-"+this.password+"-"+this.sonName);};var?son?=?new?Son();可以看到Son的prototype指向一個Parent實(shí)例對象?這沒有問題再來看看son實(shí)例對象屬性和方法都沒有問題?但是son對象里面的__proto__屬性指向的是
6、parent實(shí)例對象,但是我覺得應(yīng)該是指向Son里面的prototype,由于Son里面的prototype指向的是parent實(shí)例對象所以fireBug里看起來才像是指向了指向的是parent實(shí)例對象?那么看圖吧:這樣一來對于js用prototype實(shí)現(xiàn)繼承的原理是不是就更加清晰了!