亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

一張圖讓自己搞懂(mēng)原型&原型鏈

CntChen / 3556人閱讀

摘要：要搞清這三種關(guān)系指向之間的關(guān)系拗口，其實(shí)也就是要搞懂，構(gòu)造函數(shù)由構(gòu)造函數(shù)操作創(chuàng)造出的實(shí)例對(duì)象和構(gòu)造函數(shù)的原型對(duì)象之間的關(guān)系。

寫(xiě)在前面

這篇博客來(lái)源于，有天mentor突然傳給我了這張祖?zhèn)鞯膱D片，并且發(fā)誓一定要給我講清楚，然鵝在他的一番激情講解之后，他自己也被繞懵了...
于是后來(lái)我決定整理一下似乎還有點(diǎn)清晰的思路，記錄一下我對(duì)這張圖的理解。作為一個(gè)小白，對(duì)于js中這些比較復(fù)雜的概念的理解還是很有可能出現(xiàn)偏差的，如果哪里出現(xiàn)了各種錯(cuò)誤TUT請(qǐng)各位大神不吝賜教！
感覺(jué)自己寫(xiě)的是真的很繞...啊..惆悵...

先上一張圖再說(shuō)

prototype & _proto_ & constructor 之間的關(guān)系

這張圖乍看起來(lái)有些復(fù)雜，我們先看圖中的一小部分：這部分出現(xiàn)了三種關(guān)系指向prototype,_proto_,constructor。

要搞清這三種關(guān)系指向之間的關(guān)系(拗口...)，其實(shí)也就是要搞懂，構(gòu)造函數(shù)、由構(gòu)造函數(shù)new操作創(chuàng)造出的實(shí)例對(duì)象、和構(gòu)造函數(shù)的原型對(duì)象之間的關(guān)系。

prototype是函數(shù)(關(guān)系中的構(gòu)造函數(shù)Foo)的屬性

_proto_和constructor都是對(duì)象的屬性

_proto_是對(duì)象(關(guān)系中的實(shí)例對(duì)象f1，f2)的屬性

constructor也是對(duì)象(關(guān)系中的原型對(duì)象Foo.prototype)的屬性

就拿圖里面例子來(lái)說(shuō)：

f2，f1是由構(gòu)造函數(shù)Foo()構(gòu)造出的實(shí)例對(duì)象。

Foo是一個(gè)構(gòu)造函數(shù)，他的prototype屬性則是一個(gè)指針，指針指向了Foo的原型對(duì)象,Foo.prototype，之所以要費(fèi)這么大勁指向一個(gè)原型對(duì)象呢？就是為了共享原型對(duì)象里所包含的屬性和方法呀～通過(guò)Foo構(gòu)造出的f1，f2就同時(shí)擁有了原型對(duì)象里的屬性和方法。

Foo.prototype在Foo的prototype屬性指向它之時(shí)，它所包含的constructor屬性也指向回了它的構(gòu)造函數(shù)Foo.

構(gòu)造函數(shù)new操作出的實(shí)例對(duì)象和構(gòu)造函數(shù)之間是沒(méi)有直接的指向關(guān)系的，實(shí)例對(duì)象被new出來(lái)的時(shí)候，它的_proto_屬性直接指向了構(gòu)造函數(shù)的原型對(duì)象。

圖里還包含了其他這樣的"三角關(guān)系":

這張圖描述的是Object(js中最基本的對(duì)象)和它的實(shí)例、構(gòu)造函數(shù)之間的關(guān)系。
o1,o2是Object的實(shí)例對(duì)象，Object()是Object對(duì)象的構(gòu)造函數(shù)。
此時(shí)～注意紅框框標(biāo)注出的部分，由于Object是js中最基本的對(duì)象(兜底對(duì)象...),所以Object的_proto_指向的是null

函數(shù)也是對(duì)象！

咦？這組關(guān)系就有點(diǎn)奇怪了，我們中出現(xiàn)了一個(gè)叛徒！Foo()這個(gè)構(gòu)造函數(shù)為什么也有_proto_屬性？

因?yàn)樵趶V闊的js世界中～函數(shù)也是一個(gè)對(duì)象～函數(shù)也會(huì)有_proto_屬性，并且這個(gè)_proto_屬性指向了是函數(shù)的原型對(duì)象Function.prototype，而它的構(gòu)造函數(shù)則是大Function()。即小function其實(shí)是由大Function()new操作出的實(shí)例！

然鵝不要忘了我們的大Function()同志也是個(gè)構(gòu)造函數(shù)呀、也是個(gè)函數(shù)實(shí)例呀、也有_proto_屬性，并且同樣指向了function們的共同原型Function.prototype.(相當(dāng)?shù)睦@...)

原型鏈

最后再整體看一遍這張圖，這些對(duì)象之間的原型指向最終連成了一條原型鏈，指向基礎(chǔ)對(duì)象Object

f1,f2是對(duì)象，它的_proto_屬性指向了Foo.prototype。而Foo.prototype也是對(duì)象，它的_proto_屬性指向了兜底中的Object.prototype,形成了一條原型鏈。

function Foo()是函數(shù)也是對(duì)象，它的_proto_屬性指向著函數(shù)共同的原型Function.prototype。Function.prototype是對(duì)象，它也有_proto屬性，而這個(gè)屬性最終也會(huì)指向我們的兜底Object.prototype，這又是另一條原型鏈。

原型鏈在js中的作用就相當(dāng)于java中的繼承思想，一個(gè)實(shí)例對(duì)象可以繼承到它的原型鏈上的所有原型對(duì)象的屬性和方法。

參考資料

紅寶石

一張圖理解prototype、proto和constructor的三角關(guān)系

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/95665.html

相關(guān)文章

  • JavaScript深入淺出

    摘要：理解的函數(shù)基礎(chǔ)要搞好深入淺出原型使用原型模型，雖然這經(jīng)常被當(dāng)作缺點(diǎn)提及，但是只要善于運(yùn)用，其實(shí)基于原型的繼承模型比傳統(tǒng)的類繼承還要強(qiáng)大。中文指南基本操作指南二繼續(xù)熟悉的幾對(duì)方法，包括，，。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。 怎樣使用 this 因?yàn)楸救藢儆趥吻岸耍虼宋闹兄豢炊?8 成左右，希望能夠給大家?guī)?lái)幫助....（據(jù)說(shuō)是阿里的前端妹子寫(xiě)的） this 的值到底...

    blair 評(píng)論0 收藏0

  • 一張圖搞懂clientWidth,offsetWidth,scrollHeight

    摘要：由于前端經(jīng)常會(huì)遇到計(jì)算位置的問(wèn)題，那么搞懂等等這些就變得尤為重要。取決于邊框的像數(shù)值內(nèi)容區(qū)域的寬高，不包括邊框?qū)挾戎怠｜c(diǎn)擊位置距離當(dāng)前可視區(qū)域的，坐標(biāo)相對(duì)于最近的祖先定位元素。 由于前端經(jīng)常會(huì)遇到計(jì)算位置的問(wèn)題，那么搞懂clientWidth,offsetWidth,scrollHeight等等這些就變得尤為重要。放上經(jīng)典圖，一張圖讓你搞懂clientWidth,offsetWidth...

    khs1994 評(píng)論0 收藏0

  • JavaScript 原型中的哲學(xué)思想

    摘要：而作為構(gòu)造函數(shù)，需要有個(gè)屬性用來(lái)作為以該構(gòu)造函數(shù)創(chuàng)造的實(shí)例的繼承。 歡迎來(lái)我的博客閱讀：「JavaScript 原型中的哲學(xué)思想」 記得當(dāng)年初試前端的時(shí)候，學(xué)習(xí)JavaScript過(guò)程中，原型問(wèn)題一直讓我疑惑許久，那時(shí)候捧著那本著名的紅皮書(shū)，看到有關(guān)原型的講解時(shí)，總是心存疑慮。 當(dāng)在JavaScript世界中走過(guò)不少旅程之后，再次萌發(fā)起研究這部分知識(shí)的欲望，翻閱了不少書(shū)籍和資料，才搞懂...

    sugarmo 評(píng)論0 收藏0

  • 徹底搞懂JavaScript中的繼承

    摘要：這正是我們想要的太棒了毫不意外的，這種繼承的方式被稱為構(gòu)造函數(shù)繼承，在中是一種關(guān)鍵的實(shí)現(xiàn)的繼承方法，相信你已經(jīng)很好的掌握了。 你應(yīng)該知道，JavaScript是一門(mén)基于原型鏈的語(yǔ)言，而我們今天的主題 -- 繼承就和原型鏈這一概念息息相關(guān)。甚至可以說(shuō)，所謂的原型鏈就是一條繼承鏈。有些困惑了嗎？接著看下去吧。 一、構(gòu)造函數(shù)，原型屬性與實(shí)例對(duì)象 要搞清楚如何在JavaScript中實(shí)現(xiàn)繼承，...

    _ivan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<