原型、原型链和继承

​👩‍🚀​ 摘要：本文主要深入介绍了__proto__和prototype这两个属性，顺着这个思路讲解了原型链的形成过程。

---

从一个很迷惑的经典题目开始。

  Object instanceof Function  //true
  Function instanceof Object  //true

---

首先，明确这里的Object和Function都是指JS中的内置函数对象。然后，为了讲透这个关系，我们从两个属性入手，原型__proto__和原型对象prototype。

二者之间的关系是一个对象的__proto__指向创建该对象的构造函数的prototype。

二者的作用是用来实现基于原型的继承。我们通常所说的原型链，就是，一条由__proto__串起来的prototype的链。如果原型链是糖葫芦，__proto__就是木棒，prototype就是山楂。我们来看一个详细的实现继承的例子。

function Parent () {}
function Child () {}
Child.prototype = new Parent();
var instance = new Child();

代码如上，其中最关键的一步就是Child.prototype = new Parent();。这行代码使Child的原型对象的原型指向Parent的原型对象，Child的原型对象可以继承Parent的原型对象上的属性和方法。

画出其中的原型链（蓝线所示），我们来一步步探究上面发生了什么。

图中，蓝色线表示原型链指向，其中，实线是实例对象instance的原型链，虚线是其他对象的原型指向。黄色线是原型对象指向。

• 线【1】：对应var instance = new Child();。当我们用构造函数Child来生成一个实例instance的时候，其内部属性__proto__指向其构造函数Child的原型对象Child.prototype。

• 线【2】：对应Child.prototype = new Parent();。由于我们将Child的原型对象手动更改成了Parent的一个实例，所以Child的原型对象的构造函数编程Parent，它的__proto__指向Parent.prototype。

• 线【3】：对应function Parent(){}。新创建一个函数的时候，相当于通过var Parent = new Object()创建一个对象，所以Parent.prototype的__proto__指向Object.prototype。

• 由函数指向Function.prototype的几条蓝色虚线：内置的一些生成类型对象的函数，例如，Object|Number|Stirng|Array|Function等，以及用function(){}的方式创建的函数以及都相当于通过new Function()得来，所以，其__proto__指向Function.prototype。

• 最后我们看到Function.prototype指向Object.prototype。这也是JS内置的，这也就是我们常说的函数本身也是对象。

• Object.prototype的__proto__是什么呢，不是所有对象都有__proto__么，JS中规定，它的原型是null。原型链到此为止。还有一点需要注意的是，JS内在规定，Funtion.prototype是一个函数。

  console.log(typeof Object.prototype); //object
  console.log(typeof Function.prototype);  //function
  

---

这样顺着图中原型链一找，不难得出Function和Object互相在对方原型链上。