資訊專欄INFORMATION COLUMN
摘要：要搞清這三種關(guān)系指向之間的關(guān)系拗口，其實也就是要搞懂，構(gòu)造函數(shù)由構(gòu)造函數(shù)操作創(chuàng)造出的實例對象和構(gòu)造函數(shù)的原型對象之間的關(guān)系。
寫在前面
這篇博客來源于，有天mentor突然傳給我了這張祖?zhèn)鞯膱D片，并且發(fā)誓一定要給我講清楚，然鵝在他的一番激情講解之后，他自己也被繞懵了...
于是后來我決定整理一下似乎還有點清晰的思路，記錄一下我對這張圖的理解。作為一個小白，對于js中這些比較復雜的概念的理解還是很有可能出現(xiàn)偏差的，如果哪里出現(xiàn)了各種錯誤TUT請各位大神不吝賜教！
感覺自己寫的是真的很繞...啊..惆悵...
這張圖乍看起來有些復雜，我們先看圖中的一小部分：這部分出現(xiàn)了三種關(guān)系指向prototype,_proto_,constructor。
要搞清這三種關(guān)系指向之間的關(guān)系(拗口...)，其實也就是要搞懂，構(gòu)造函數(shù)、由構(gòu)造函數(shù)new操作創(chuàng)造出的實例對象、和構(gòu)造函數(shù)的原型對象之間的關(guān)系。
prototype是函數(shù)(關(guān)系中的構(gòu)造函數(shù)Foo)的屬性
_proto_和constructor都是對象的屬性
_proto_是對象(關(guān)系中的實例對象f1，f2)的屬性
constructor也是對象(關(guān)系中的原型對象Foo.prototype)的屬性
就拿圖里面例子來說：
f2，f1是由構(gòu)造函數(shù)Foo()構(gòu)造出的實例對象。
Foo是一個構(gòu)造函數(shù)，他的prototype屬性則是一個指針，指針指向了Foo的原型對象,Foo.prototype，之所以要費這么大勁指向一個原型對象呢？就是為了共享原型對象里所包含的屬性和方法呀～通過Foo構(gòu)造出的f1，f2就同時擁有了原型對象里的屬性和方法。
Foo.prototype在Foo的prototype屬性指向它之時，它所包含的constructor屬性也指向回了它的構(gòu)造函數(shù)Foo.
構(gòu)造函數(shù)new操作出的實例對象和構(gòu)造函數(shù)之間是沒有直接的指向關(guān)系的，實例對象被new出來的時候，它的_proto_屬性直接指向了構(gòu)造函數(shù)的原型對象。
圖里還包含了其他這樣的"三角關(guān)系":
這張圖描述的是Object(js中最基本的對象)和它的實例、構(gòu)造函數(shù)之間的關(guān)系。
o1,o2是Object的實例對象，Object()是Object對象的構(gòu)造函數(shù)。
此時～注意紅框框標注出的部分，由于Object是js中最基本的對象(兜底對象...),所以Object的_proto_指向的是null
咦？這組關(guān)系就有點奇怪了，我們中出現(xiàn)了一個叛徒！Foo()這個構(gòu)造函數(shù)為什么也有_proto_屬性？
因為在廣闊的js世界中～函數(shù)也是一個對象～函數(shù)也會有_proto_屬性，并且這個_proto_屬性指向了是函數(shù)的原型對象Function.prototype，而它的構(gòu)造函數(shù)則是大Function()。即小function其實是由大Function()new操作出的實例！
然鵝不要忘了我們的大Function()同志也是個構(gòu)造函數(shù)呀、也是個函數(shù)實例呀、也有_proto_屬性，并且同樣指向了function們的共同原型Function.prototype.(相當?shù)睦@...)
原型鏈最后再整體看一遍這張圖，這些對象之間的原型指向最終連成了一條原型鏈，指向基礎(chǔ)對象Object
f1,f2是對象，它的_proto_屬性指向了Foo.prototype。而Foo.prototype也是對象，它的_proto_屬性指向了兜底中的Object.prototype,形成了一條原型鏈。
function Foo()是函數(shù)也是對象，它的_proto_屬性指向著函數(shù)共同的原型Function.prototype。Function.prototype是對象，它也有_proto屬性，而這個屬性最終也會指向我們的兜底Object.prototype，這又是另一條原型鏈。
原型鏈在js中的作用就相當于java中的繼承思想，一個實例對象可以繼承到它的原型鏈上的所有原型對象的屬性和方法。
參考資料紅寶石
一張圖理解prototype、proto和constructor的三角關(guān)系
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95665.html
摘要：理解的函數(shù)基礎(chǔ)要搞好深入淺出原型使用原型模型，雖然這經(jīng)常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統(tǒng)的類繼承還要強大。中文指南基本操作指南二繼續(xù)熟悉的幾對方法，包括，，。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。 怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家?guī)韼椭?...（據(jù)說是阿里的前端妹子寫的） this 的值到底...
摘要：由于前端經(jīng)常會遇到計算位置的問題，那么搞懂等等這些就變得尤為重要。取決于邊框的像數(shù)值內(nèi)容區(qū)域的寬高，不包括邊框?qū)挾戎怠｜c擊位置距離當前可視區(qū)域的，坐標相對于最近的祖先定位元素。 由于前端經(jīng)常會遇到計算位置的問題，那么搞懂clientWidth,offsetWidth,scrollHeight等等這些就變得尤為重要。放上經(jīng)典圖，一張圖讓你搞懂clientWidth,offsetWidth...
摘要：而作為構(gòu)造函數(shù)，需要有個屬性用來作為以該構(gòu)造函數(shù)創(chuàng)造的實例的繼承。 歡迎來我的博客閱讀：「JavaScript 原型中的哲學思想」 記得當年初試前端的時候，學習JavaScript過程中，原型問題一直讓我疑惑許久，那時候捧著那本著名的紅皮書，看到有關(guān)原型的講解時，總是心存疑慮。 當在JavaScript世界中走過不少旅程之后，再次萌發(fā)起研究這部分知識的欲望，翻閱了不少書籍和資料，才搞懂...
摘要：這正是我們想要的太棒了毫不意外的，這種繼承的方式被稱為構(gòu)造函數(shù)繼承，在中是一種關(guān)鍵的實現(xiàn)的繼承方法，相信你已經(jīng)很好的掌握了。 你應(yīng)該知道，JavaScript是一門基于原型鏈的語言，而我們今天的主題 -- 繼承就和原型鏈這一概念息息相關(guān)。甚至可以說，所謂的原型鏈就是一條繼承鏈。有些困惑了嗎？接著看下去吧。 一、構(gòu)造函數(shù)，原型屬性與實例對象 要搞清楚如何在JavaScript中實現(xiàn)繼承，...
閱讀 870·2021-11-24 09:38
閱讀 1098·2021-10-08 10:05
閱讀 2593·2021-09-10 11:21
閱讀 2809·2019-08-30 15:53
閱讀 1838·2019-08-30 15:52
閱讀 1979·2019-08-29 12:17
閱讀 3428·2019-08-29 11:21
閱讀 1619·2019-08-26 12:17
