开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第1天,点击查看活动详情
希望对你理解原型和原型链有帮助,尽量说的通俗易懂
先琢磨一下字面意思
原型 和 原型。。链?
字面意思是原型这个东西,串起来,就是原型链了?
可以先这样先理解着
那原型又是什么呢?
不急,我们从这三个方面去理解
-
关于原型
-
关于原型链
-
函数也是对象
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
说到着,希望你应该能更明白一些什么是原型和原型链了,如果觉得我说的还不够到位也可以去看看更优秀的人的文章。
参考文章: