如何讲清楚JS原型链?

亦凉 2023-10-06 14:33 7阅读 0赞

### 先看一个典型的单向链表 ###

![3f7c97b87c404652bd9c509f3e0263c1.png][]

上面这段代码，是一个典型的**单向链表**

我们只能通过**n.next**来找到下一个节点

但是没有办法从当前节点找到上一个节点

![54cb4d1eb84343df925821603eff5b1c.png][]

不过这和原型链有什么关系呢？ 目前还没有关系。

### 原型对象从哪来？ ###

![fd049ecc8ddf47f6b34d856c70865d32.png][]

分析上面这段代码

为什么**obj**明明是空的,却还能调用**toString**方法?

这**toString**方法是哪里来的呢?

再比如我们的数组对象

![0febb6df4b284cf2b298362767b549a0.png][]

其实,这些方法都来自于一个叫做原型的家伙

我们可以使用 对象**.\_\_proto\_\_** 的形式把原型对象打印出来

![7a0633369ef34373b24f803e40bda0d9.png][]

这是所有对象的一个隐式属性, 也就是正常情况下打印对象, 我们是看不到这个属性的

但我们依然可以通过**\_\_proto\_\_** 这样一个比较奇怪的属性名字来访问原型对象

这个属性名称访问起来确实不够方便,实际上它还有另外一种访问方式

也是一种比较正式的访问方式, 就是通过函数名来访问

例如看下面这个例子

![0cea6b109492447d8cc56704cdf830ec.png][]

### 现在我们大概有了一些疑问 ###

*  1.原型对象中的所有属性,实例对象都能随便访问吗?
 *  2.每个实例对象都有自己的原型对象, 还是大家共用一个?
 *  3.实例对象自己的属性和原型的属性冲突了, 会访问谁呢?
 *  4.原型对象跟继承有什么关系?
 *  5.原型链又是怎么来的?

### 我们依次来解决这几个疑问 ###

*  **原型对象中的所有属性,实例对象都能随便访问吗?**

废话不多说, 我们来试验一下, 就知道结果

![0812fdb8fb694d9c86dca61bb177380a.png][]

在上面的代码中,我们创建一个构造函数 **Phone**

同时我们给原型对象,添加了 **price、color**两个属性

同时添加了 **playmusic、phonecall**两个方法

接下来我们通过实例对象来访问一下这些内容

![745b2b214c6244e8bcb9f1d2e8e2f407.png][]

#### 可以看到,原型中的属性和方法都可以被实例对象直接访问! ####

*  **每个实例对象都有自己的原型对象, 还是大家共用一个?**

这是一道非常简单的数学证明题,证明过程如下:

![format_png][]

### 最终结论是, 所有实例对象共享同一个原型对象 ###

*  **实例对象自己的属性和原型的属性冲突了, 会访问谁呢?**

我们再来试验一下

![e005531a02564346bb34c1154e4811d9.png][]

可以看到, 如果对象本身存在这个属性或方法, 会优先访问自己的

如果没有, 则访问原型的属性, 访问过程如下图

![de5e6d8ca189412284b72da9c67f7b10.png][]

*  **原型对象跟继承有什么关系呢 ?**

请你再思考一个问题

如果原型也是一个对象

那么它必然也应该有自己的原型对象,不是吗?

我们可以通过 **p1.\_\_proto\_\_.\_\_proto\_\_** 进行访问

![b150d84db3174a81917a913d6d497f73.png][]

我们把图画的再简单一点

![be14a1b3a2cc4a0187efb69ee949e641.png][]

从图中可以看出,只要原型对象一直存在

对象P1就拥有了所有原型对象的能力, 我们也管这个叫做 **继承**

而这些原型对象之间是什么关系呢?

p1
    p1.__proto__
    p1.__proto__.__proto__
    p1.__proto__.__proto__.__proto__

原型链, 因此而得名

### 需要补充的问题 ###

> **原型对象真的没有尽头吗?**

当然不是的, 原型对象由浏览器自动创建, 当然也有它自己的规则

规则如下:

> **1.每个构造函数在诞生的时候, 都会创建一个该函数的实例对象作为默认原型**

相当于 Phone.prototype = new Phone();

> **2.而这个原型对象的原型, 则默认指向Object.prototype**

相当于 Phone.prototype.\_\_proto\_\_ = Object.prototype;

> **3.当然, Object.prototype 也是它自己的实例**

相当于 Object.prototype = new Object();

> **4. 但是, Object.prototype不再拥有原型对象**

相当于 Object.prototype.\_\_proto\_\_ = null

> **5. 因此,原型对象是有上限的**

p1.\_\_proto\_\_ 可访问

p1.\_\_proto\_\_.\_\_proto\_\_ 可访问

p1.\_\_proto\_\_.\_\_proto\_\_.\_\_proto\_\_ 为null

### 原型的最重要的作用就是扩展能力 ###

![df505302bd184627878b7fcfe78831b8.png][]

[3f7c97b87c404652bd9c509f3e0263c1.png]: https://img-blog.csdnimg.cn/3f7c97b87c404652bd9c509f3e0263c1.png
[54cb4d1eb84343df925821603eff5b1c.png]: https://img-blog.csdnimg.cn/54cb4d1eb84343df925821603eff5b1c.png
[fd049ecc8ddf47f6b34d856c70865d32.png]: https://img-blog.csdnimg.cn/fd049ecc8ddf47f6b34d856c70865d32.png
[0febb6df4b284cf2b298362767b549a0.png]: https://img-blog.csdnimg.cn/0febb6df4b284cf2b298362767b549a0.png
[7a0633369ef34373b24f803e40bda0d9.png]: https://img-blog.csdnimg.cn/7a0633369ef34373b24f803e40bda0d9.png
[0cea6b109492447d8cc56704cdf830ec.png]: https://img-blog.csdnimg.cn/0cea6b109492447d8cc56704cdf830ec.png
[0812fdb8fb694d9c86dca61bb177380a.png]: https://img-blog.csdnimg.cn/0812fdb8fb694d9c86dca61bb177380a.png
[745b2b214c6244e8bcb9f1d2e8e2f407.png]: https://img-blog.csdnimg.cn/745b2b214c6244e8bcb9f1d2e8e2f407.png
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi0yMmI5ODIzZTBmMjdkYzA4NjA0OTdhNWUzMTY0ZDA3MV83MjB3LmpwZw?x-oss-process=image/format,png
[e005531a02564346bb34c1154e4811d9.png]: https://img-blog.csdnimg.cn/e005531a02564346bb34c1154e4811d9.png
[de5e6d8ca189412284b72da9c67f7b10.png]: https://img-blog.csdnimg.cn/de5e6d8ca189412284b72da9c67f7b10.png
[b150d84db3174a81917a913d6d497f73.png]: https://img-blog.csdnimg.cn/b150d84db3174a81917a913d6d497f73.png
[be14a1b3a2cc4a0187efb69ee949e641.png]: https://img-blog.csdnimg.cn/be14a1b3a2cc4a0187efb69ee949e641.png
[df505302bd184627878b7fcfe78831b8.png]: https://img-blog.csdnimg.cn/df505302bd184627878b7fcfe78831b8.png