一張圖讓本身搞懂(mēng)原型&原型鏈

寫在前面

這篇博客來源於，有天mentor忽然傳給我了這張祖傳的圖片，而且發誓必定要給我講清楚，然鵝在他的一番激情講解以後，他本身也被繞懵了...
因而後來我決定整理一下彷佛還有點清晰的思路，記錄一下我對這張圖的理解。做爲一個小白，對於js中這些比較複雜的概念的理解仍是頗有可能出現誤差的，若是哪裏出現了各類錯誤TUT請各位大神不吝賜教！
感受本身寫的是真的很繞...啊..惆悵...

先上一張圖再說

prototype & _proto_ & constructor 之間的關係

這張圖乍看起來有些複雜，咱們先看圖中的一小部分：這部分出現了三種關係指向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中的繼承思想，一個實例對象能夠繼承到它的原型鏈上的全部原型對象的屬性和方法。

參考資料

1. 紅寶石
2. 一張圖理解prototype、proto和constructor的三角關係