摘要：要搞清这三种关系指向之间的关系拗口，其实也就是要搞懂，构造函数由构造函数操作创造出的实例对象和构造函数的原型对象之间的关系。
写在前面
这篇博客来源于，有天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的三角关系
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/95665.html
摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。 怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...
摘要：由于前端经常会遇到计算位置的问题，那么搞懂等等这些就变得尤为重要。取决于边框的像数值内容区域的宽高，不包括边框宽度值。点击位置距离当前可视区域的，坐标相对于最近的祖先定位元素。 由于前端经常会遇到计算位置的问题，那么搞懂clientWidth,offsetWidth,scrollHeight等等这些就变得尤为重要。放上经典图，一张图让你搞懂clientWidth,offsetWidth...
摘要：而作为构造函数，需要有个属性用来作为以该构造函数创造的实例的继承。 欢迎来我的博客阅读：「JavaScript 原型中的哲学思想」 记得当年初试前端的时候，学习JavaScript过程中，原型问题一直让我疑惑许久，那时候捧着那本著名的红皮书，看到有关原型的讲解时，总是心存疑虑。 当在JavaScript世界中走过不少旅程之后，再次萌发起研究这部分知识的欲望，翻阅了不少书籍和资料，才搞懂...
摘要：这正是我们想要的太棒了毫不意外的，这种继承的方式被称为构造函数继承，在中是一种关键的实现的继承方法，相信你已经很好的掌握了。 你应该知道，JavaScript是一门基于原型链的语言，而我们今天的主题 -- 继承就和原型链这一概念息息相关。甚至可以说，所谓的原型链就是一条继承链。有些困惑了吗？接着看下去吧。 一、构造函数，原型属性与实例对象 要搞清楚如何在JavaScript中实现继承，...
阅读 811·2021-11-24 09:38
阅读 1043·2021-10-08 10:05
阅读 2534·2021-09-10 11:21
阅读 2778·2019-08-30 15:53
阅读 1787·2019-08-30 15:52
阅读 1900·2019-08-29 12:17
阅读 3366·2019-08-29 11:21
阅读 1568·2019-08-26 12:17
