【JavaScript】图解JavaScript原型和原型链

阳光穿透心脏的1/2处 2022-04-13 13:23 384阅读 0赞

来看一个例子：

var n = new Number(1)
    var s = new String('s')
    var b = new Boolean(true)
    var o = new Object()

这几个对象在内存中是这个样子：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70]  
大家都知道js中的对象有一些共有的方法，如valueOf（），toString（）  
如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 1]  
想一个问题，咱们只是声明了一个对象，没有添加这些方法，那么这些方法是从哪里来的呢？  
如果让你给这些对象添加这些默认的方法，你会怎么做呢？

#### 第一种方法就是给每个对象本身添加一个valueOf， toString等方法 ####

如下图示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 2]

你有没有觉得这种方法很SB？每个对象有这么多属性不是很占内存吗？  
每个对象的这些方法都一模一样，你为什么不把这些方法放在一个公有的属性中呢？

于是就有了这张图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 3]  
当你调用对象的valueOf方法时，我就去这个公共的对象中去拿这些方法。

#### 那么JS是如何做的呢？ ####

### 他用一个隐藏的属性\_\_proto\_\_，来存这个公有对象的地址， 如下图： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 4]

来看这张图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 5]

toSting方法在哪里呢？？？ 把这个\_\_proto\_\_点开就有了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 6]

这样，当你访问你一个对象的某个方法时，他会先检查自身有没有这个方法，没有的话就去\_\_proto\_\_中去找这个方法，如果自身有这个方法，则使用自身的方法。

JS就是通过\_\_proto\_\_来组织各个对象之间的关系

### 思考一个难一点的问题：上面声明的数字对象n中不只有toString，还有toFixed方法，还有自己专有的toString方法，而对象o是没有这个方法的，那么toFixed方法在哪里呢？？ ###

方法就是给数字类型的对象专门加一个公有的对象，使其\_\_proto\_\_指向这个对象。来看图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 7]

这时候当你调用toFixed方法时，他会现在地址为90的对象中找这个方法，找到了直接使用。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 8]

类似的，String对象也一样:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 9]

#### 我们通常吧这些公有属性叫做原型，也就是Number.prototype, String.prototype, Object.prototype， 而你找某个对象的方法，不停的找，形成的这条链子就是原型链。他们之间就是通过该\_\_proto\_\_来连接的 ####

来看代码：

![在这里插入图片描述][20181129161156976.png]  
![blog.csdnimg.cn/20181129160801559.png)][blog.csdnimg.cn_20181129160801559.png]

完。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70]: /images/20220413/7191e9a71c2f4dfc8210522a74899f3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 1]: /images/20220413/72f7cc095d334a1fa805228ad410199e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 2]: /images/20220413/14ee8f38e76a499192595dfb407b2a40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 3]: /images/20220413/52556ec323bc4ac9871e2de2d1e9f72f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 4]: /images/20220413/3c930d764ce74233a88cb99cef996806.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 5]: /images/20220413/f1e4d4215f9744db8396301415515a29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 6]: /images/20220413/1c443c08bb1b47b498882b14fb059340.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 7]: /images/20220413/db5343e6f5fe4b8fbc59420ede92721d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 8]: /images/20220413/409c0a2b211d4654813a27148d9770e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 9]: /images/20220413/1b4a5db193ee4629add8e93176587e7c.png
[20181129161156976.png]: /images/20220413/3600746abf2441c3a04143953e27c0e2.png
[blog.csdnimg.cn_20181129160801559.png]: /images/20220413/864f9aeaf16a43a1b10a128ab1519385.png