1. 前言

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

<span style="color:#000000"><code class="language-javascript"><span style="color:#c678dd">function</span> <span style="color:#61aeee">Foo</span><span style="color:#999999">(</span><span style="color:#999999">)</span> <span style="color:#999999">{</span><span style="color:#669900">...</span><span style="color:#999999">}</span><span style="color:#999999">;</span>
<span style="color:#c678dd">let</span> f1 <span style="color:#669900">=</span> <span style="color:#c678dd">new</span> Foo<span style="color:#999999">(</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
</code></span>

以上代码表示创建一个构造函数Foo()，并用new关键字实例化该构造函数得到一个实例化对象f1。这里稍微补充一下new操作符将函数作为构造器进行调用时的过程：函数被调用，然后新创建一个对象，并且成了函数的上下文（也就是此时函数内部的this是指向该新创建的对象，这意味着我们可以在构造器函数内部通过this参数初始化值），最后返回该新对象的引用，详细请看：详解JavaScript中的new操作符。虽然是简简单单的两行代码，然而它们背后的关系却是错综复杂的，如下图所示：
看到这图别怕，让我们一步步剖析，彻底搞懂它们！
图的说明：右下角为图例，红色箭头表示__proto__属性指向、绿色箭头表示prototype属性的指向、棕色实线箭头表示本身具有的constructor属性的指向，棕色虚线箭头表示继承而来的constructor属性的指向；蓝色方块表示对象，浅绿色方块表示函数（这里为了更好看清，Foo()仅代表是函数，并不是指执行函数Foo后得到的结果，图中的其他函数同理）。图的中间部分即为它们之间的联系，图的最左边即为例子代码。

2. _ _ proto _ _ 属性

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

第一，这里我们仅留下 __proto__ 属性，它是对象所独有的，可以看到__proto__属性都是由一个对象指向一个对象，即指向它们的原型对象（也可以理解为父对象），那么这个属性的作用是什么呢？它的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（可以理解为父对象）里找，如果父对象也不存在这个属性，则继续往父对象的__proto__属性所指向的那个对象（可以理解为爷爷对象）里找，如果还没找到，则继续往上找…直到原型链顶端null（可以理解为原始人。。。），再往上找就相当于在null上取值，会报错（可以理解为，再往上就已经不是“人”的范畴了，找不到了，到此结束，null为原型链的终点），由以上这种通过__proto__属性来连接对象直到null的一条链即为我们所谓的原型链。
其实我们平时调用的字符串方法、数组方法、对象方法、函数方法等都是靠__proto__继承而来的。

3. prototype属性

第二，接下来我们看 prototype 属性：
prototype属性，别忘了一点，就是我们前面提到要牢记的两点中的第二点，它是函数所独有的，它是从一个函数指向一个对象。它的含义是函数的原型对象，也就是这个函数（其实所有函数都可以作为构造函数）所创建的实例的原型对象，由此可知：f1.__proto__ === Foo.prototype，它们两个完全一样。那prototype属性的作用又是什么呢？它的作用就是包含可以由特定类型的所有实例共享的属性和方法，也就是让该函数所实例化的对象们都可以找到公用的属性和方法。任何函数在创建的时候，其实会默认同时创建该函数的prototype对象。

4. constructor属性

最后，我们来看一下 constructor 属性：
constructor属性也是对象才拥有的，它是从一个对象指向一个函数，含义就是指向该对象的构造函数，每个对象都有构造函数（本身拥有或继承而来，继承而来的要结合__proto__属性查看会更清楚点，如下图所示），从上图中可以看出Function这个对象比较特殊，它的构造函数就是它自己（因为Function可以看成是一个函数，也可以是一个对象），所有函数和对象最终都是由Function构造函数得来，所以constructor属性的终点就是Function这个函数。

感谢网友的指出，这里解释一下上段中“每个对象都有构造函数”这句话。这里的意思是每个对象都可以找到其对应的constructor，因为创建对象的前提是需要有constructor，而这个constructor可能是对象自己本身显式定义的或者通过__proto__在原型链中找到的。而单从constructor这个属性来讲，只有prototype对象才有。每个函数在创建的时候，JS会同时创建一个该函数对应的prototype对象，而函数创建的对象.__proto__ === 该函数.prototype，该函数.prototype.constructor===该函数本身，故通过函数创建的对象即使自己没有constructor属性，它也能通过__proto__找到对应的constructor，所以任何对象最终都可以找到其构造函数（null如果当成对象的话，将null除外）。如下：

5. 总结

总结一下：

我们需要牢记两点：①__proto__和constructor属性是对象所独有的；② prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有__proto__和constructor属性。
__proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（父对象）里找，一直找，直到__proto__属性的终点null，再往上找就相当于在null上取值，会报错。通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链。
prototype属性的作用就是让该函数所实例化的对象们都可以找到公用的属性和方法，即f1.__proto__ === Foo.prototype。
constructor属性的含义就是指向该对象的构造函数，所有函数（此时看成对象了）最终的构造函数都指向Function。

原型链----看懂_proto_和prototype相关推荐

从原型链看DOM－－Node类型
前言: 本系列从原型,原型链,属性类型等方面下手学习了DOM文档对象模型,旨在弄清我们在DOM中常用的每一个属性和方法都清楚它从哪里来要到哪里做什么事,这样对于理解代码有一定启发.全靠自己在总结中摸索 ...
c语言命令行参数怎么输入_C语言程序设计——这个函数原型你看懂了吗
虽然过去了好多年,但我仍然清楚地记得自己第一次看到signal函数原型时的惊讶. 学习UNIX环境C编程的朋友都知道,信号是绕不过去的一道坎,而信号处理的第一重要函数就是signal(). 什么都不说 ...
深入理解构造函数和原型链
使用构造函数初始化对象的过程 function Base(){} //函数声明 var base=new Base() //对象初始化执行Base()的过程: 创建一个名为Base的function ...
一篇文章让你搞懂原型和原型链
每一个构造函数在被创建的时候,会自动创建一个相应的对象,这个对象就是原型对象,这个函数有一个指向该对象的指针.举个例子: 下面创建了一个函数person. function person () { } ...
详解链表在前端的应用，顺便再弄懂原型和原型链！
链表在前端中的应用一.链表VS数组二.JS中的链表三.前端与链表:JS中的原型链 1.原型是什么? 2.原型链是什么? 3.原型链长啥样? (1)arr → Array.prototype → ...
原型链，什么是原型链？原型链的作用？prototype和__proto__区别
原型链什么是原型链? 为什么要使用原型链呢? 使用原型链有什么作用? 原型链的特点 __proto__和prototype的区别示例代码控制台测试详解图话说回来,原型链既然是一个链条,那肯定是 ...
javascript es6 属性 __proto__ prototype 原型链简介
目录 prototype __proto__ 原型链构造函数创建对象实例今天同事小英童鞋问了我一个问题: function Foo(firstName, lastName){this.firstN ...
js-4 代理Proxy，object原型链, prototype, 继承，
1代理Proxy 1.什么是代理Proxy拦截? 可以对对象,函数,数组进行拦截,将其原本的函数操作改写. Proxy在目标对象前设一个拦截层,外界对该对象的访问都必须先通过这层拦截,因此提供了一种机 ...
JavaScript -- 对象与原型链 [[Prototype]]
一.第三章:对象 1.属性描述符(数据描述符) 可以使用 Object.getOwnPropertyDescriptor( myObject, "a" ); 获取myObject对 ...

原型链----看懂_proto_和prototype

文章目录