一张图看懂原型链(本人也是从长期的懵逼状态到理解原型链的)

本人也是从长期的懵逼状态到理解原型链的,原型链基本是面试肯定会问的一个问题,自己以前回答这个问题时也是经常说着说着就把自己绕晕了。原型链的尽头是什么,还有Object和Function又有什么关系(注意是首字母大写的),先上个其他地方找到的图:

在这里插入图片描述
乍一看是不是觉得有点晕,我们慢慢来,每条路的来龙去脉我都会说到,首先从最常见的地方说起,我们开发时经常会定义一个函数,如图上的Foo函数

function Foo(){}

先说两个结论
1.每个函数都有它的原型对像,函数的显式属性prototype就指向它的原型对像
2.每个函数都是一个对像,对像肯定是由某个函数生成的,对像的隐式属性__proto__指向它的构造函数的原型对像(Object函数的原型对像例外,它的__proto__,指向null)

这两条结论就意味着每个函数在这图上都会有两条线,Foo函数左边有一条线,右边有一条线,左边的线是说Foo函数是一个对像,它是由另一个函数生成的,没错,Foo函数是由Function函数生成的(Function是JS内置的函数),所以Foo函数__proto__指向Function函数的原型对像。右边的线是说Foo函数的prototype指向它的原型对像

左上角的f1和f2对像是通过Foo函数生成的,故f1和f2的__proto__指向Foo函数原型对像

接下来继续沿着线走,从Foo函数右边的线继续说,上面说到了右边的线是说Foo函数的prototype指向它的原型对像,这个原型对像既然是一个对像,那肯定是通过某个函数生成的,它是通过Object函数生成的(Object是JS内置的函数),所以这个Foo函数的原型对像的__proto__指向Object函数的原型对像

继续走,Object函数的原型对像是一个对像,按照上面说的,是对像,那肯定是通过某个构造函数生成,也就是它肯定有个__proto__指向它的构造函数的原型对像,但如果一直这样就真的是没有尽头了,故右边这条线的尽头是Object的原型对像的__proto__指向null

可以把Object的原型对像看作是一个特殊的对像,它不是通过函数生成的对像,它的__proto__指向null,除此之外,其它所有对像肯定是通过某个函数生成的,即它肯定有一个__proto__指向它的构造函数的原型对像

Foo函数右边的路到尽头了,再来说左边,前面说了Foo函数是由Function函数生成的,故Foo函数__proto__指向Function函数的原型对像,到这里就和上面说到的Foo函数的原型对像的流程是一样的了,Function函数的原型对像的__proto__指向Object的原型对像,Object的原型对像的__proto__指向null

然后我们来说这个特殊的Function函数,Function函数既然是函数,肯定有个prototype属性指向它的原型对像,如上图。前面说了是函数那肯定也是对像,Function函数也是一个对像,是对像,那它肯定是通过某个函数生成的,是对像,那它的__proto__肯定指向它的构造函数的原型对像,确实,Function的__proto__指向Function的原型对像,如图,故
Function对像是通过Function函数生成的,Function可以看成一个函数也可以看成一个对像

综上,我以Foo函数为基点,把它看作是构造函数时把右边这边线说完了,它的起点到终点是
Foo函数的prototype指向Foo函数的原型对像(通过Object生成的一个对像),这个对像的__proto__指向Object的原型对像,Object的原型对像的__proto__指向null,到终点

以Foo函数为基点,把它看作是对像时左边这条线的起点到终点是
Foo对像的__proto__指向Function函数的原型对像(通过Object生成的一个对像),这个对像的__proto__指向Object的原型对像,Object的原型对像的__proto__指向null,到终点

看到这大家应该知道Object和Function什么关系了吧
Object是一个函数又是一个对像,把它看作对像时,Object对像是由Function函数生成的,Object对像的__proto__指向Function函数的原型对像

另外上图还有个constructor没说,不用我说,直接看图,大家也看得出函数通过prototype可以找到它的原型对像,而原型对像也可以通过constructor反过来找到它对应的构造函数

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值