js中難以理解的原型

原型;我們先來看段簡(jiǎn)單的函數(shù)

按照javascript的說法,function定義的這個(gè)Person就是一個(gè)Object(對(duì)象),而且還是一個(gè)很特殊的對(duì)象,這個(gè)使用function定義的對(duì)象與使用new操作符生成的對(duì)象之間有一個(gè)重要的區(qū)別。這個(gè)區(qū)別就是function定義的對(duì)象有一個(gè)prototype屬性,使用new生成的對(duì)象就沒有這個(gè)prototype屬性,我們一般稱為普通對(duì)象!

我們需要理解記憶以下的邏輯順序:

Person是一個(gè)對(duì)象,它有一個(gè)prototype的原型屬性(因?yàn)樗械膶?duì)象都一prototype原型?。﹑rototype屬性有自己的prototype對(duì)象,而pototype對(duì)象肯定也有自己的constuct屬性,construct屬性有自己的constuctor對(duì)象,神奇的事情要發(fā)生了,這最后一個(gè)constructor對(duì)象就是我們構(gòu)造出來的function函數(shù)本身!

這張圖片只是證明了每一個(gè)對(duì)象函數(shù)都有一個(gè)原型對(duì)象而已

再來看看網(wǎng)上流傳最廣的一張描述幫助解釋原型的一張圖片


怎么去理解呢?當(dāng)我們新創(chuàng)建一個(gè)對(duì)象的時(shí)候,這個(gè)對(duì)象會(huì)自動(dòng)生成一個(gè)prototype的屬性,這個(gè)屬性可以是一個(gè)新的對(duì)象。而原型對(duì)象中有constructor指回初始對(duì)象。當(dāng)我們對(duì)這個(gè)對(duì)象進(jìn)行new構(gòu)造函數(shù)的時(shí)候,新構(gòu)造出來的實(shí)例可以是屬性,也可以是函數(shù)對(duì)象,但是這個(gè)實(shí)例中沒有prototype原型屬性,取而代之的是指向原型的_proto_。這意味著原型中的屬性方法在new新實(shí)例中可以找到。

new去新的構(gòu)造一個(gè)實(shí)例的時(shí)候new出來的新實(shí)例之間屬性和方法是不能共享的,它的優(yōu)點(diǎn)和缺點(diǎn)都是這一點(diǎn)。而當(dāng)有多個(gè)實(shí)例的時(shí)候,我們把公共的屬性方法用prototype原型去創(chuàng)建,把私有的屬性方法new去創(chuàng)建。

原型在設(shè)計(jì)之初就是用來解決js中繼承的問題的。js中沒有c++和java的類,js設(shè)計(jì)之初就是借鑒了java和c++中的new方法,去構(gòu)建新的實(shí)例,用prototype原型鏈去彌補(bǔ)new方法中的不足。具體的一些信息建議參考阮一峰的。他的理解很有借鑒性。

會(huì)不會(huì)很抽象?我認(rèn)為挺抽象的。不過別急,我在搜索原型及原型鏈的時(shí)候看到一道對(duì)于我們理解原型很有幫助的一道題目,理解了這道題目,原型什么的題目都不是事啦。但是做題和理解又不一樣,這里我推薦阮一峰的關(guān)于原型的理解;http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html

現(xiàn)在我們來看題。


待我和小伙伴們講完這題,相信大部分小伙伴就可以理解了

首先我們看Foo.getName();這個(gè)我們只需要在上述中尋找相應(yīng)的函數(shù)即可。很明顯,我們找到是2;

getName();這個(gè)我們也可以直接找,找到的是4;

Foo().getName();的意思是Foo()中的getName()方法。。。小伙伴們這樣就可以很快的找到答案了唉,答案就是1;

getName();這個(gè)為什么和上面的getNmae()不一樣了呢?var getName是定義了一個(gè)變量,當(dāng)沒有調(diào)用Foo函數(shù)的時(shí)候,線程直接進(jìn)行到4,而當(dāng)Foo()調(diào)用的時(shí)候,getName變量在Foo()函數(shù)中輸出的是1,整個(gè)線程的getName都變成了1,4被覆蓋了。

new Foo.getName();其實(shí)有沒有new沒有影響,都是2,

最后兩個(gè),new Foo().getName();和new new Foo().getName();是構(gòu)造了兩個(gè)新的getName的對(duì)象,類似于prototype創(chuàng)建。多少個(gè)new是沒有關(guān)系的,所以都是3.

抱歉,關(guān)于原型我試圖去講明白,但是網(wǎng)上講的很抽象,我理解的也抽象,實(shí)在闡述不清楚。如果有能闡述清楚的希望您能指點(diǎn)一二。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持,譯者再次奉上一點(diǎn)點(diǎn)福利:阿里云產(chǎn)品券,享受所有官網(wǎng)優(yōu)惠,并抽取幸運(yùn)大...
    HetfieldJoe閱讀 3,086評(píng)論 4 14
  • 工廠模式類似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式。簡(jiǎn)單...
    舟漁行舟閱讀 8,138評(píng)論 2 17
  • 特別說明,為便于查閱,文章轉(zhuǎn)自https://github.com/getify/You-Dont-Know-JS...
    殺破狼real閱讀 1,257評(píng)論 0 4
  • 一切皆對(duì)象 js中的一個(gè)常見運(yùn)算符 typeof 以上代碼列出了 typeof 輸出的集中類型標(biāo)識(shí), 其中上面的四...
    無跡落花閱讀 2,093評(píng)論 0 5
  • 今夜帶著兒子和女兒一起觀看了《摔跤吧,爸爸》,看后,心情久久不能平靜。這是一部由阿米爾.汗主演的傳記電影,影片講述...
    Angela_Xia閱讀 690評(píng)論 2 4

友情鏈接更多精彩內(nèi)容