如何理解原型？原型链？

JS中的prototype、__proto__属性，相信很多初学者对这些属性存在许多困惑，容易把它们混淆，本文旨在和大家一起理清他们的关系。

简单来说：

• Object 是所有对象的爸爸，所有对象都可以通过 __ proto__ 找到它；
• Function 是所有函数的爸爸，所有函数都可以通过 __ proto__ 找到它；
• 函数的 prototype 是一个对象；
• 对象的 __ proto__ 属性指向原型， __ proto__ 将对象和原型连接起来组成了原型链；
• 代码示例：

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

以上代码表示创建一个构造函数Foo()，并用new关键字实例化该构造函数得到一个实例化对象f1。虽然是简简单单的两行代码，然而它们背后的关系却是错综复杂的，如下图所示：

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

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

第一，这里我们仅留下 __proto__属性，它是对象所独有的，可以看到__proto__属性都是由一个对象指向一个对象，即指向它们的原型对象（也可以理解为父对象），那么这个属性的作用是什么呢？它的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（可以理解为父对象）里找，如果父对象也不存在这个属性，则继续往父对象的__proto__属性所指向的那个对象（可以理解为爷爷对象）里找，如果还没找到，则继续往上找…直到原型链顶端null（可以理解为原始人。。。），此时若还没找到，则返回undefined（可以理解为，再往上就已经不是“人”的范畴了，找不到了，到此结束），由以上这种通过__proto__属性来连接对象直到null的一条链即为我们所谓的原型链。

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

总结一下：

• ①__proto__和constructor属性是对象所独有的；
  ② prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有__proto__和constructor属性。
• __proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（父对象）里找，一直找，直到__proto__属性的终点null，然后返回undefined，通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链。
• prototype属性的作用就是让该函数所实例化的对象们都可以找到公用的属性和方法，
  即f1.__proto __ === Foo.prototype。

以上部分内容转自：https://blog.csdn.net/cc18868876837/article/details/81211729