全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

如何讲清楚JS原型链?

发布时间:2022-10-10 15:59:40
发布人:qyf

  先看一个典型的单向链表

1

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

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

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

2

  不过这和原型链有什么关系呢?

  目前还没有关系。

  原型对象从哪来?

3

  分析上面这段代码

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

  这toString方法是哪里来的呢?

  再比如我们的数组对象

4

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

  我们可以使用 对象.__proto__ 的形式把原型对象打印出来

5

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

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

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

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

  例如看下面这个例子

6

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

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

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

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

  · 4.原型对象跟继承有什么关系?

  · 5.原型链又是怎么来的?

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

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

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

7

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

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

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

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

8

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

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

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

9

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

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

  我们再来试验一下

10

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

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

11

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

  请你再思考一个问题

  如果原型也是一个对象

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

  我们可以通过 p1.__proto__.__proto__ 进行访问

12

  我们把图画的再简单一点

13

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

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

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

14

相关文章

Flutter和 qt的区别都有什么?

Flutter和 qt的区别都有什么?

2023-10-14
rnn和lstm中batchsize和timestep的区别是什么?

rnn和lstm中batchsize和timestep的区别是什么?

2023-10-14
什么是OA服务器?

什么是OA服务器?

2023-10-14
常用的渗透测试工具都有哪些?

常用的渗透测试工具都有哪些?

2023-10-14

最新文章

常见网络安全面试题:Windows常用的命令有哪些?

常见网络安全面试题:Windows常用的命令有哪些?

2023-10-09
常见网络安全面试题:根据设备告警如何展开排查?

常见网络安全面试题:根据设备告警如何展开排查?

2023-10-09
常见网络安全面试题:mysql加固呢?(数据库加固)

常见网络安全面试题:mysql加固呢?(数据库加固)

2023-10-09
常见网络安全面试题:windows和linux加固?(操作系统加固)

常见网络安全面试题:windows和linux加固?(操作系统加固)

2023-10-09
在线咨询 免费试学 教程领取