type
status
date
slug
summary
category
password
tags
icon
一起手画原型链！
原型和原型链一直是所有前端工程师都必须掌握的重要知识，也是一个难点，想死背是很困难的，只有理解原型和原型链才能真正画出完整的原型链。
原型链
画原型链之前，想的第一个问题就是：对象哪儿来的？
最简单的回答就是：所有的对象都是new出来的。
比如这里有一个函数A：
那么这个对象a就是通过函数A new出来的，所以说对象就是new出来的。
有人就纳闷了，那么再看下面对象b：
这哪里是new出来的啊？其实这里也是new，只不过new的是Object，{}这个只是语法糖而已，本质上这里就是
const b = new Object()好，我们现在知道了：所有对象都是new出来的，那么原型链就可以从这个对象a开始了：
用蓝色圆角矩形表示对象。
然后我们马上就要想，这个对象a从哪儿来的，来自new了一个函数A：
用紫色箭头表示通过new产生了一个对象。
这个时候核心知识来了：每一个函数除了本身之外，带有一个天生的对象，这个对象就是函数原型。
比如函数A的原型对象：
所以当前原型链又多了一个东西：
这个函数原型对象也是对象所以用蓝块proto表示吧，用红色箭头表示这个函数的原型对象。
好了，现在有三个东西了，函数A、通过A new出来的对象a、函数A的原型对象。
这里注意，不是所有函数都有原型对象，比如箭头函数，那个很特殊这里不做讨论。
非非常重要的点来了：
对象a有一个隐式原型对象，它指向函数A的原型对象：
因此，这里还有一个箭头：
这个就是原型链典型的三角关系，画出完整原型链就在于给你一个对象a，思考它的来源，从而得到这个三角关系，只要能画出这个三角关系，那么就能推出完整的原型链。
那么接下来无非就是无限推导到尽头呗，思考a的原型对象proto是哪儿来的啊？函数A又是哪儿来的啊？
先来看对象a的proto吧，它是啥，不也是对象嘛，所以它哪儿来的？new出来的，new的是Object，Object是啥，有人可能说是字面意思是对象了，但这里其实指的是Object构造函数，
他其实是函数，也有一个原型对象proto，因此又一个三角关系出来了。
为了后面的扩展，把这个三角关系画在右边。
第一个特殊点来了，函数Object的原型对象proto（最顶上的proto）又是哪儿来的呢？不可能还是通过Object new出来的吧？当然不是，不然死循环了。所以哪儿来的？没有哪儿来的，它是JS引擎在处理的时候直接放在内存里面的。那它的隐式原型呢？就是null，这是规定的，记住。
原型链已经出来了，就是蓝色的这一长链，所以访问对象a的成员，如果找不到，会沿着这条链一直找，直到找到或者到达尽头null。
接下来继续扩展，函数Object是个啥？函数啊，那函数又是啥？
欸，函数怎么也能添加属性啊？其实，按照MDN官方文档解释，函数的本质就是一个可以被调用的对象。
既然函数也是对象，那么函数new的是谁？
Function这里举个例子，通过function关键词创建函数实际上和new Function是等价的。
他们效果完全一样：
所以Object就是通过new Function产生的，那Function是啥？也是函数啊，所以它也有一个原型，因此Object的隐式原型又指向Function的原型，又又一个三角关系：
再来研究，那Function的proto来自哪儿呢？跟函数A的proto一样，来自Object，因此又一个紫色箭头从Object指向Function的proto。
又因为Object new出了Function的proto，Object又有一个proto，因此Function的proto的隐式原型指向Object的proto，又一个三角关系。
再看函数A和函数Function，函数A怎么来的？new Function出来的，因此又一条紫色箭头从Function指向A，那A、Function和Function的proto又是一个三角关系。
到这儿，函数A的原型链就出来了，这也解释了很多现象，比如函数A有cal、apply、bind等Function的方法，也有toString、valueOf等Object的方法，因为他的原型链含有Function和Object的原型。
至此，原型链已经完成99%了，还有1%在哪儿？
这是第二个特殊点，Function哪儿来的？它也没有来源，它也是直接放在内存里面的，但是Function的隐式原型可不是null，它的隐式原型直接指向自身的原型。
也就是：
就这两个地方特殊，特别记一下，其他的就是一直找三角关系。
原型链就此画完！
欢迎您在底部评论区留言，一起交流~
- 作者:NotionNext
- 链接:https://lsnx.top/article/entire-prototype-chain
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。