如何讲清楚JS原型链?

深藏阁楼爱情的钟 2022-11-30 12:38 151阅读 0赞

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

![format_png][]

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

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

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

![format_png 1][]

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

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

![format_png 2][]

分析上面这段代码

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

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

再比如我们的数组对象

![format_png 3][]

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

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

![format_png 4][]

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

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

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

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

例如看下面这个例子

![format_png 5][]

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

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

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

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

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

![format_png 6][]

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

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

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

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

![format_png 7][]

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

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

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

![format_png 8][]

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

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

我们再来试验一下

![format_png 9][]

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

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

![format_png 10][]

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

请你再思考一个问题

如果原型也是一个对象

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

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

![format_png 11][]

我们把图画的再简单一点

![format_png 12][]

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

对象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

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

![format_png 13][]

[format_png]: /images/20221123/10be25ad13a24301a22193022708f62b.png
[format_png 1]: /images/20221123/c5654a30236647b982c160d933d230c0.png
[format_png 2]: /images/20221123/8e89ab912a894ba883cdcc43e115a2d4.png
[format_png 3]: /images/20221123/f324894904504dc1a1e774106369e898.png
[format_png 4]: /images/20221123/4a2d2d11727846ae94123a738f30ec4c.png
[format_png 5]: /images/20221123/7a8db8f8e0f04b9d90d495d5d5cbe22e.png
[format_png 6]: /images/20221123/4390ba6f80704dc9bfab4441803461d9.png
[format_png 7]: /images/20221123/cfa2a1c1850d48a8b470163c55596fc0.png
[format_png 8]: /images/20221123/1ebecc4e698c4dae8b6c1d95fc8476c8.png
[format_png 9]: /images/20221123/560b7f50d12b4b00a5279a9a531f591a.png
[format_png 10]: /images/20221123/f8f1d554e3284413b647431b2a737ef4.png
[format_png 11]: /images/20221123/85f6db0f92a9441dbf43ed8c24207f0e.png
[format_png 12]: /images/20221123/92066515f03d4354aeffaae7584cc425.png
[format_png 13]: /images/20221123/ae7aea191665495dbe90a5b82e4a8891.png