图解JavaScript原型与原型链（初学者，你值得拥有）

╰+攻爆jí腚メ 2023-10-08 12:49 50阅读 0赞

一、首先我们先说一下什么是原型：

1.  函数的prototype属性(图)
2.  ![在这里插入图片描述][20210429195154420.png]

*  每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)
 *  原型对象中有一个属性constructor, 它指向函数对象

1.  给原型对象添加属性(一般都是方法)

*  作用: 函数的所有实例对象自动拥有原型中的属性(方法)  
    示例代码：

二、什么是显式原型与隐式原型

1.  每个函数function都有一个prototype，即显式原型(属性)
2.  每个实例对象都有一个\_\_proto\_\_，可称为隐式原型(属性)
3.  对象的隐式原型的值为其对应构造函数的显式原型的值
4.  内存结构(图)
5.  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MDE1ODk3_size_16_color_FFFFFF_t_70]
6.  总结:

*  函数的prototype属性: 在定义函数时自动添加的, 默认值是一个空Object对象
 *  对象的\_\_proto\_\_属性: 创建对象时自动添加的, 默认值为构造函数的prototype属性值
 *  程序员能直接操作显式原型, 但不能直接操作隐式原型(ES6之前)

代码实例：

三、图解原型链(内存原理)

1.  原型链(图解)

*  访问一个对象的属性时，
    
     *  先在自身属性中查找，找到返回
     *  如果没有, 再沿着\_\_proto\_\_这条链向上查找, 找到返回
     *  如果最终没找到, 返回undefined
 *  别名: 隐式原型链
 *  作用: 查找对象的属性(方法)

1.  构造函数/原型/实体对象的关系(图解)
2.  构造函数/原型/实体对象的关系2(图解)

图：(这张图片需透彻理解)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MDE1ODk3_size_16_color_FFFFFF_t_70 1]  
四、两个关于原型链的测试题

测试一的图解：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MDE1ODk3_size_16_color_FFFFFF_t_70 2]  
测试二可参考三号标题中的原型链结构图

希望本文对你有所帮助，加油！

注：本文为作者学习JS高级时，参考B站尚硅谷教程所做，如有疑问可参考视频教程（https://www.bilibili.com/video/BV14s411E7qf?p=15），同时如果你也是初学者欢迎添加我的QQ(Etui:3416252112)，可互相学习讨论！

[20210429195154420.png]: https://img-blog.csdnimg.cn/20210429195154420.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MDE1ODk3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210429195040851.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MDE1ODk3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MDE1ODk3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210429195234575.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MDE1ODk3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MDE1ODk3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210429195603568.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MDE1ODk3,size_16,color_FFFFFF,t_70