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