原型链（又称变态遗传链,不讲武德，耗子尾汁吧）

谁践踏了优雅 2022-12-23 09:57 136阅读 0赞

**JS中的原型链**  
希望能帮你理清Javascript对象与\_\_proto\_\_、prototype和原型链之间的关系。如果暂时看不懂也没关系，这篇文章让你从0变成1。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70_pic_center]

## 原型链“德罗斯特效应” ##

如果你打开浏览器的控制面板，随便输入一个JS内置的构造器函数，比如Array，控制台输出的是一个名为Array的函数体，这好像并没有什么稀奇的，但是，当你接着输入Array.prototype，控制面板输出了一堆我们经常用到的Array构造器的方法，把目光转移到最下方，有一个叫\_\_proto\_\_的属性，好奇的点开。

![在这里插入图片描述][20201124160437563.gif_pic_center]

咦~？列表列出的不是Object构造器的方法么，里边有我们非常熟悉的hasOwnProperty还有toString等方法。我们常说的一切皆对象，一切对象皆null这么玄妙的编程界哲理和这种嵌套会不会有什么关系呢？更神奇的在下边。  
![在这里插入图片描述][20201124160516283.gif_pic_center]

继续深入思考，Array是构造器，那么控制台输出的Array.prototype的所有属性中的constructor(翻译：构造器)又是指向什么？点开看看，之后就像身处德罗斯特效应中一样，\_\_proto\_\_和constructor，还有Array构造器中常用的方法名不断的出现，一层套一层，一层层展开，没有尽头。

## 一堂证明题课 ##

当你也发现了JS里这种循环往复、不断嵌套的规律后，仍然不相信自己的眼睛，于是决定亲自证明一下，哦不，是好几下。（对于初学者只靠空想太烧脑，于是帅华君录制GIF演示帮助读者理解。）

**1**.怎么证明你就是你？  
这个问题可难不倒JS中的构造器们，一个证明秒秒钟证明“我就是我”，是颜色不一样的烟火。

拿Array举例，Array.prototype中有一个constructor属性，这个属性的值就是Array构造器自己。  
![在这里插入图片描述][20201124160717975.gif_pic_center]

所有的JS内置构造器都本是对象，这要从long long ago说起。可是从什么线索开始向过去前进呢，原型链（我给他起了一个名字叫遗传进化链）就是突破口。所有JS构造器（当然不止构造器有）都有一个\_\_proto\_\_属性，这是原型链指针，指向进化成它的“那个”。(就像我的\_\_proto\_\_指针指向我父母，我父母各自的\_\_proto\_\_指向他们的父母… …鬼知道最尽头的Ta经历了什么！？（手动黑人问号脸）。在进化的过程中，父母的遗传物质（属性、方法）被我的\_\_proto\_\_指针引用着，同时我也变异出了自己的能力（属性、方法），然后我的子代的\_\_proto\_\_指针又引用我的遗传物质。额！为毛突然莫名脸红~)

![在这里插入图片描述][20201124160738914.gif_pic_center]

从上图中发现，JS内置构造器其中之一的Array原本就是一个函数，而这个函数就是Function的prototype，所以Function.prototype有的方法，JS内置构造器都有，比如call()、apply()、bind()等（其实我们自定义的函数也是继承自Function.prototype，所以我们自己也可以定义构造器，创造属于自己的小小王国）。(所以在编程的世界里模拟一个宇宙系统是有可能的，说不定我们本来就生活在被设定好的编程世界里哦。)

而Function.prototype的进化链指针又指向了Object.prototype。

\*\*2.\*\*证明到头来一切都是空???  
不管你从那个属性开始，连续引用\_\_proto\_\_的指针，最后输出的那个值就是null。  
![在这里插入图片描述][20201124160835545.gif_pic_center]

万物都是从无生出来的???Hey boy 老聃的道德经han庄子读多了吧

**4.证明所有JS内置构造器和自定义函数都是Function构造器的原型(prototype)**  
不断强化这一认知，实践出真知。

①、String构造器的进化链指针\_\_proto\_\_指向Function构造器的原型

//String构造器
    String.__Proto__ === Function.prototype  //true

![在这里插入图片描述][20201124161758982.gif_pic_center]

②、Number构造器的进化链指针\_\_proto\_\_指向Function构造器的原型

/Number构造器
    Number.__Proto__ === Function.prototype

![在这里插入图片描述][20201124161858861.gif_pic_center]

③、Boolean构造器的进化链指针\_\_proto\_\_指向Function构造器的原型

//Boolean构造器
    Boolean.__Proto__ === Function.prototype

![在这里插入图片描述][2020112416214774.gif_pic_center]

④、Array构造器的进化链指针\_\_proto\_\_指向Function构造器的原型

//Array构造器
    Array.__Proto__ === Function.prototype

![在这里插入图片描述][20201124162218983.gif_pic_center]  
⑤、没错，Function构造器的进化链指针\_\_proto\_\_也指向自己的原型

//Function构造器
    Function.__Proto__ === Function.prototype

![在这里插入图片描述][20201124162321939.gif_pic_center]  
⑥、Date构造器的进化链指针\_\_proto\_\_指向Function构造器的原型

//Date构造器
    Date.__Proto__ === Function.prototype

![在这里插入图片描述][20201124162700863.gif_pic_center]

⑦；、Error构造器的进化链指针\_\_proto\_\_指向Function构造器的原型

//Error构造器
    Error.__Proto__ === Function.prototype

![在这里插入图片描述][20201124162711607.gif_pic_center]

⑧、Object构造器的进化链指针\_\_proto\_\_指向Function构造器的原型

//Object构造器
    Object.__Proto__ === Function.prototype

![在这里插入图片描述][20201124162905187.gif_pic_center]

⑨、RegExp构造器的进化链指针\_\_proto\_\_指向Function构造器的原型

//RegExp构造器
    RegExp.__Proto__ === Function.prototype

![在这里插入图片描述][20201124162918815.gif_pic_center]  
⑩、Event构造器的进化链指针\_\_proto\_\_指向Function构造器的原型

//Event构造器
    Event.__Proto__ === Function.prototype

![在这里插入图片描述][20201124163117130.gif_pic_center]  
**注意**：所有构造器的prototype都是对象(object)类型，只有Function.prototype是函数(function)类型，这是为了保证函数构造器们的\_\_proto\_\_指向的都是函数。

**结语**：当你弄清楚了原型链（我喜欢叫他进化链）proto，prototype之间的关系，还有Javascript中12个内置对象，其中10个函数类型，2个对象类型。再来学习这12个内置对象的属性和属性方法是不是如鱼得水，心里跟明镜似的。

对于Javascrip初学者，一时半会肯定还是搞不清楚，唯一的办法就是多观察、多思考、多模仿、多创新、多总结、多分享，学习的本质无非就是学会了这些，教育的本质无非就是教会你用学习的本质，学习你所感兴趣的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/e03a7e598fbc4ee1a07b6203c9ffb48a.png
[20201124160437563.gif_pic_center]: /images/20221120/f40ccf1cfe0d4cce95280214411bbd93.png
[20201124160516283.gif_pic_center]: https://img-blog.csdnimg.cn/20201124160516283.gif#pic_center
[20201124160717975.gif_pic_center]: https://img-blog.csdnimg.cn/20201124160717975.gif#pic_center
[20201124160738914.gif_pic_center]: https://img-blog.csdnimg.cn/20201124160738914.gif#pic_center
[20201124160835545.gif_pic_center]: https://img-blog.csdnimg.cn/20201124160835545.gif#pic_center
[20201124161758982.gif_pic_center]: https://img-blog.csdnimg.cn/20201124161758982.gif#pic_center
[20201124161858861.gif_pic_center]: https://img-blog.csdnimg.cn/20201124161858861.gif#pic_center
[2020112416214774.gif_pic_center]: https://img-blog.csdnimg.cn/2020112416214774.gif#pic_center
[20201124162218983.gif_pic_center]: https://img-blog.csdnimg.cn/20201124162218983.gif#pic_center
[20201124162321939.gif_pic_center]: https://img-blog.csdnimg.cn/20201124162321939.gif#pic_center
[20201124162700863.gif_pic_center]: https://img-blog.csdnimg.cn/20201124162700863.gif#pic_center
[20201124162711607.gif_pic_center]: https://img-blog.csdnimg.cn/20201124162711607.gif#pic_center
[20201124162905187.gif_pic_center]: https://img-blog.csdnimg.cn/20201124162905187.gif#pic_center
[20201124162918815.gif_pic_center]: https://img-blog.csdnimg.cn/20201124162918815.gif#pic_center
[20201124163117130.gif_pic_center]: https://img-blog.csdnimg.cn/20201124163117130.gif#pic_center