原型链(又称变态遗传链,不讲武德,耗子尾汁吧)

JS中的原型链
希望能帮你理清Javascript对象与__proto__、prototype和原型链之间的关系。如果暂时看不懂也没关系,这篇文章让你从0变成1。
在这里插入图片描述

原型链“德罗斯特效应”

如果你打开浏览器的控制面板,随便输入一个JS内置的构造器函数,比如Array,控制台输出的是一个名为Array的函数体,这好像并没有什么稀奇的,但是,当你接着输入Array.prototype,控制面板输出了一堆我们经常用到的Array构造器的方法,把目光转移到最下方,有一个叫__proto__的属性,好奇的点开。

在这里插入图片描述

咦~?列表列出的不是Object构造器的方法么,里边有我们非常熟悉的hasOwnProperty还有toString等方法。我们常说的一切皆对象,一切对象皆null这么玄妙的编程界哲理和这种嵌套会不会有什么关系呢?更神奇的在下边。
在这里插入图片描述

继续深入思考,Array是构造器,那么控制台输出的Array.prototype的所有属性中的constructor(翻译:构造器)又是指向什么?点开看看,之后就像身处德罗斯特效应中一样,__proto__和constructor,还有Array构造器中常用的方法名不断的出现,一层套一层,一层层展开,没有尽头。

一堂证明题课

当你也发现了JS里这种循环往复、不断嵌套的规律后,仍然不相信自己的眼睛,于是决定亲自证明一下,哦不,是好几下。(对于初学者只靠空想太烧脑,于是帅华君录制GIF演示帮助读者理解。)

1.怎么证明你就是你?
这个问题可难不倒JS中的构造器们,一个证明秒秒钟证明“我就是我”,是颜色不一样的烟火。

拿Array举例,Array.prototype中有一个constructor属性,这个属性的值就是Array构造器自己。
在这里插入图片描述

所有的JS内置构造器都本是对象,这要从long long ago说起。可是从什么线索开始向过去前进呢,原型链(我给他起了一个名字叫遗传进化链)就是突破口。所有JS构造器(当然不止构造器有)都有一个__proto__属性,这是原型链指针,指向进化成它的“那个”。(就像我的__proto__指针指向我父母,我父母各自的__proto__指向他们的父母… …鬼知道最尽头的Ta经历了什么!?(手动黑人问号脸)。在进化的过程中,父母的遗传物质(属性、方法)被我的__proto__指针引用着,同时我也变异出了自己的能力(属性、方法),然后我的子代的__proto__指针又引用我的遗传物质。额!为毛突然莫名脸红~)

在这里插入图片描述

从上图中发现,JS内置构造器其中之一的Array原本就是一个函数,而这个函数就是Function的prototype,所以Function.prototype有的方法,JS内置构造器都有,比如call()、apply()、bind()等(其实我们自定义的函数也是继承自Function.prototype,所以我们自己也可以定义构造器,创造属于自己的小小王国)。(所以在编程的世界里模拟一个宇宙系统是有可能的,说不定我们本来就生活在被设定好的编程世界里哦。)

而Function.prototype的进化链指针又指向了Object.prototype。

**2.**证明到头来一切都是空???
不管你从那个属性开始,连续引用__proto__的指针,最后输出的那个值就是null。
在这里插入图片描述

万物都是从无生出来的???Hey boy 老聃的道德经han庄子读多了吧

4.证明所有JS内置构造器和自定义函数都是Function构造器的原型(prototype)
不断强化这一认知,实践出真知。

①、String构造器的进化链指针__proto__指向Function构造器的原型

//String构造器
String.__Proto__ === Function.prototype  //true

在这里插入图片描述

②、Number构造器的进化链指针__proto__指向Function构造器的原型

/Number构造器
Number.__Proto__ === Function.prototype

在这里插入图片描述

③、Boolean构造器的进化链指针__proto__指向Function构造器的原型

//Boolean构造器
Boolean.__Proto__ === Function.prototype

在这里插入图片描述

④、Array构造器的进化链指针__proto__指向Function构造器的原型

//Array构造器
Array.__Proto__ === Function.prototype

在这里插入图片描述
⑤、没错,Function构造器的进化链指针__proto__也指向自己的原型

//Function构造器
Function.__Proto__ === Function.prototype

在这里插入图片描述
⑥、Date构造器的进化链指针__proto__指向Function构造器的原型

//Date构造器
Date.__Proto__ === Function.prototype

在这里插入图片描述

⑦;、Error构造器的进化链指针__proto__指向Function构造器的原型

//Error构造器
Error.__Proto__ === Function.prototype

在这里插入图片描述

⑧、Object构造器的进化链指针__proto__指向Function构造器的原型

//Object构造器
Object.__Proto__ === Function.prototype

在这里插入图片描述

⑨、RegExp构造器的进化链指针__proto__指向Function构造器的原型

//RegExp构造器
RegExp.__Proto__ === Function.prototype

在这里插入图片描述
⑩、Event构造器的进化链指针__proto__指向Function构造器的原型

//Event构造器
Event.__Proto__ === Function.prototype

在这里插入图片描述
注意:所有构造器的prototype都是对象(object)类型,只有Function.prototype是函数(function)类型,这是为了保证函数构造器们的__proto__指向的都是函数。

结语:当你弄清楚了原型链(我喜欢叫他进化链)proto,prototype之间的关系,还有Javascript中12个内置对象,其中10个函数类型,2个对象类型。再来学习这12个内置对象的属性和属性方法是不是如鱼得水,心里跟明镜似的。

对于Javascrip初学者,一时半会肯定还是搞不清楚,唯一的办法就是多观察、多思考、多模仿、多创新、多总结、多分享,学习的本质无非就是学会了这些,教育的本质无非就是教会你用学习的本质,学习你所感兴趣的。

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值