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

0次阅读

共计 1133 个字符,预计需要花费 3 分钟才能阅读完成。

最近在我的项目中常常遇到,且与共事常常探讨对于 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 原型上的所有办法,是因为实例对象应用的所有办法,都会顺着原型链一层一层往下来寻找,晓得找到 第一个 匹配的办法,否则就会报错。这也是咱们须要理解原型链的意义之一,同时咱们还能够利用原型链这个特点,找到更多自定义的办法来解决咱们理论开发中的问题。

正文完
 0