JS中的prototype、__proto__与constructor是怎么用的

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

创新互联建站坚信：善待客户，将会成为终身客户。我们能坚持多年，是因为我们一直可值得信赖。我们从不忽悠初访客户，我们用心做好本职工作，不忘初心，方得始终。10年网站建设经验创新互联建站是成都老牌网站营销服务商,为您提供网站设计、成都网站建设、网站设计、H5技术、网站制作、品牌网站设计、成都微信小程序服务,给众多知名企业提供过好品质的建站服务。

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

function Foo() {...};
let f1 = new Foo();

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

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

2. _ _ proto _ _ 属性

  首先，我们需要牢记两点：①__proto__和constructor属性是对象所独有的；② prototype属性是函数所独有的。但是由于JS中函数也是一种对象，所以函数也拥有__proto__和constructor属性，这点是致使我们产生困惑的很大原因之一。上图有点复杂，我们把它按照属性分别拆开，然后进行分析：

3. prototype属性

  第二，接下来我们看 prototype 属性：

以上就是JS中的prototype、__proto__与constructor是怎么用的，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。