关于前端:JavaScript的原型链详解

最近在我的项目中常常遇到,且与共事常常探讨对于js原型链的常识。发现其实很多工作教训好多年的共事也记不太分明原型链的整个环节,明天在这里专门的把链图画进去,并且加以解说,心愿可能帮到更多前端的敌人。

原型链其实就是一个三角关系,如下图所示,咱们编写了一个构造函数Student,通过构造函数创立了对象s1const s1 = new Student()),也就是咱们常常说的s1是构造函数Student实例

此时构造函数Student和实例对象s1的原型都指向Student的原型对象,只是叫法不一样,构造函数上指向原型对象的地址名叫做prototype,实例对象s1指向原型对象的地址名叫做__proto__,这些属性名其实在咱们日常开发时常常会见到。同时原型对象中的constructor又指向构造函数Student

整体形成了构造函数的三角关系,那么原型链是什么呢,还要持续往上走,咱们能够分明的看到,即使是原型对象,它始终还是一个对象,它也有本人的__proto__属性(所有对象都有__proto__这个属性,什么是对象?typeof 变量/常量 === 'object'),如下图所示。

Student的原型对象的__proto__属性,指向了Object的原型对象,这就是为什么你平时创立的对象字面量,或者是生成的实例对象能够应用Object上所有办法的起因(这个起因咱们最初赘述)
同时咱们反推能够晓得,Object原型对象肯定是Object构造函数的prototype

以下这块内容不太容易看懂的话能够多品尝 构造函数 -> 实例对象 -> 原型对象,这个单层的三角关系
这时候咱们会不太了解为什么Object构造函数为什么指向了Student的原型对象,是因为所有的对象都是通过构造函数生成的,所以在创立构造函数Student时,Object构造函数就同时成了一个原型对象,这个原型对象被地址名为Student的构造函数所援用,同时与s1也产生了关联。

当咱们持续顺着Object原型对象再往上找__proto__时,你会发现,Object原型对象的__proto__null,如下图

有趣味的话,大家能够一层一层的找找看。

那么咱们常说的原型链其实就是图中右侧所有被__proto__关联起来的一条链,这个链就是原型链

这其中还蕴含着继承的概念,继承的概念在本文不再赘述。

咱们最初再说为什么咱们本人创立的所有对象,都能够应用Object原型上的所有办法,是因为实例对象应用的所有办法,都会顺着原型链一层一层往下来寻找,晓得找到第一个匹配的办法,否则就会报错。这也是咱们须要理解原型链的意义之一,同时咱们还能够利用原型链这个特点,找到更多自定义的办法来解决咱们理论开发中的问题。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据