JavaScript原型链顶层原理

野性酷女 2022-01-26 02:47 221阅读 0赞

**首先**声明一点，关于原型链已经有很多文章介绍了，但是绝大部分都是讲的普通对象(自定义对象)在原型链中的理解，本篇文章的重点是关于原型链顶层原理，所以还不知道原型链是什么的小伙伴可以先看一下别人的文章。

好了，现在进入正题，先把“教科书版本”的原型链图放出来

![哇~好乱][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70]  
**一看这图是不是就想关掉了页面了？** 哈哈 O(∩\_∩)O 先别急嘛~

**还有一个更简单的图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 1]  
**这个是不是清晰多了**  
从这个简化图可以看出Object.prototype指向的是null （嗯？？？！！！） 自有了Object.prototype之后自然就有了Object了

而Function.prototype是由Object.prototype构造的，有了Function.prototype之后自然就有了Function了

简单地说，Object.prototype是JS世界中最早出来的，然后由其生出了Object和Function.prototype（再生成了Function），js世界的其他对象、方法(函数) 就由Object和Function生成了。。。

**然而**，事情并没有那么简单。虽然上面说的是对的，但是还有一些细节没有体现出来~ 下面附上我对于原型链顶层理解的图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 2]  
**在这里我直接总结了**

*  Object.prototype是由上层对象创建的 (一些静态语言，像C++和Java)，在这里为了不引起误会将其指向了null
 *  Object.prototype创造了Function.Prototype
 *  Function.prototype创造了Function
 *  Function创造了Object(注意这里的Object的 **proto** 指向的是Function.prototype，想一想原型链的知识就明白了)
 *  Object创造了其他对象(window, document, 自定义对象)

**注意**

*  要理解原型链顶层要和原型链其他地方的理解有一些不同，这里Object和Function及其原型要分开看，不能将原型和本身看作是理所当然的关系
 *  **Object.prototype和Object的关系**  
    Object.prototype是JS世界中最早生成的，理论上有了原型(Object.prototype)就会有本身(Object)，然而Object的内容却是由Function构成的~~用通俗一点的话来解释就是，有了Object.prototype就有了Object的肉体，然而Object的灵魂却是由Function构成的

第一次写博客，文笔不是很好，而且我也不是大牛，我只不过是一个还在学习前端的小白罢了\_  
如果这篇文章能帮助到你那就是最好的了，如果你发现什么问题或者有什么疑惑欢迎私信我与我讨论~

Wish you godspeed!

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70]: /images/20220126/5abe540ac1a341bcae171d2279e4f11b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 1]: /images/20220126/5c16156ad58a4e13a98aa0c6e7e39420.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 2]: /images/20220126/668a545d628141d895dafa401bbb2e53.png