JS中的原型,__proto__与构造函数是怎么用的 - 行业资讯 - 肥雀云

　　介绍

本篇文章给大家分享的是有关JS中的原型,__proto__与构造函数是怎么用的,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

<强> 1。前言
? ?作为一名前端工程师,必须搞懂JS中的原型,__proto__与构造函数属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点,__proto__属性的两边是各由两个下划线构成(这里为了方便大家看的清,在两下划线之间加入了一个空格:_ _proto_ _),实际上,该属性在ES标准定义中的名字应该是[[原型]],具体实现是由浏览器代理自己实现,谷歌浏览器的实现就是将[[原型]]命名为__proto__,大家清楚这个标准定义与具体实现的区别即可(名字有所差异,功能是一样的)。本文基于谷歌浏览器(版本72.0.3626.121)的实验结果所得。
? ?,现在正式开始!让我们从如下一个简单的例子展开讨论,并配以相关的图帮助理解:
,

 function  Foo (), {…};
　　let  f1 =, new  Foo ();

以上代码表示创建一个构造函数Foo(),并用新关键字实例化该构造函数得到一个实例化对象f1。这里稍微补充一下新操作符将函数作为构造器进行调用时的过程:函数被调用,然后新创建一个对象,并且成了函数的上下文(也就是此时函数内部的这个是指向该新创建的对象,这意味着我们可以在构造器函数内部通过这参数初始化值),最后返回该新对象的引用。虽然是简简单单的两行代码,然而它们背后的关系却是错综复杂的,如下图所示:

看到这图别怕,让我们一步步剖析,彻底搞懂它们!
? ?图的说明:右下角为图例,<强>红色箭头表示__proto__属性指向,<强>绿色箭头表示原型属性的指向,<强>棕色实线箭头表示本身具有的构造函数属性的指向,<强>棕色虚线箭头表示继承而来的构造函数属性的指向,<强>蓝色方块表示对象,浅绿色方块表示函数强(这里为了更好看清,Foo()仅代表是函数,并不是指执行函数Foo后得到的结果,图中的其他函数同理)。图的中间部分即为它们之间的联系,图的最左边即为例子代码。