一张图让本身搞懂(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的三角关系