[原型&原型链]速通面试“精英怪”

152 阅读3分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第1天,点击查看活动详情

希望对你理解原型和原型链有帮助,尽量说的通俗易懂

先琢磨一下字面意思

原型 和 原型。。链?

字面意思是原型这个东西,串起来,就是原型链了?

可以先这样先理解着

那原型又是什么呢?

不急,我们从这三个方面去理解

  1. 关于原型 

  2. 关于原型链 

  3. 函数也是对象

1. 关于原型 prototype

 在JS中,每个函数类型的数据都有一个属性,就是我们说的原型 prototype,也叫做显式原型,这个属性指向一个对象,也就是我们所说的原型对象,原型对象上存放了实例共用的方法和属性。

而且对于原型对象来说,它的构造函数是函数本身,所以原型对象上有一个constructor属性,指向构造函数。

配合下图理解:

2. 关于原型链 

 原型我们知道是什么了,那要怎么把它们串起来成为原型链呢?

当构造函数new出一个实例的时候,实例的身上会有一个__proto__属性,也是我们俗称的隐式原型,并且这个属性会指向它的构造函数的原型对象prototype

看图:

接着,原型对象也是一个对象!

所以,意味着原型对象也有一个__proto__属性指向****它的构造函数的原型对象,

那么,谁是它的构造函数呢?

**在JS中有一个内置的函数,对象的构造函数是它,**Object()

因此,**原型对象的__proto__指向Object()的原型对象Object().**prototype

配合图食用:

欸~

脖子有点痒,要长脑子了!

那么Object()的原型对象也有__proto__属性吗?

有!

那它的指向是什么?

null

看图:

看!!红色的线把原型串起来了!!

没错! 这就是原型链!

所以,如果某个对象查找属性,自己和原型对象上都没有的话,就会顺着红色的线,也就是通过原型对象上的__proto__属性,渠道自己的构造函数的原型对象上找,要是还没找到,最深可以到Object()函数的原型对象****Object().prototype中去查找,要是还找不到的话,就没有更上一层了,因为更上一层的话是Object().prototype.__proto__,是null

3. 函数也是对象

首先要理解

在js中,函数也是一种对象

所以,函数都有一个__proto__属性,这个属性是指向构造函数的原型对象

那构造函数是谁?

在js中还有一个内置函数,可以看作所有函数的构造函数,Function()

也就是说,函数的__proto__会指向Function()的原型对象Function().prototype

但是Function()本身也是也是函数

所以它不仅仅是其它函数的构造函数,也是自己的构造函数

也就是说,Function().__proto__会指向Function().prototype

说到着,希望你应该能更明白一些什么是原型和原型链了,如果觉得我说的还不够到位也可以去看看更优秀的人的文章。

参考文章: