【四】原型链

前言

本篇章主要讲述原型链相关知识点，为后续的函数篇章先铺垫一定的前缀知识，也承接了引用类型篇章的知识。

面试回答

1.原型链：原型链主要有三部分构成：原型、构造函数、实例，实例可以通过new构造函数获取，构造函数可以通过实例的constructor或者原型的constructor获取，原型可以通过实例的__proto__或者构造函数的prototype获取。原型也可以通过__proto__获取父级元素的原型，直到最终拿到null。

知识点

1.原型链

图片为我对于原型链的理解，一起让我们由易入难去理解，原型链中的三个主体：原型、构造函数、实例对象。

原型

可以简单理解为储存方法和属性的对象（JS万物皆可为对象）

构造函数

只要被new过的函数就可以被称为构造函数，每个函数都有一个prototype属性，它指向该函数的原型，构造函数也是如此。构造函数里有两个特殊的存在：Object、Function，前者在所有的JS对象的原型链上，后者则是所有的构造函数（包括它自己）的都是Function的实例对象，所以

Function instanceof Function
Function.__proto__===Function.prototype 
//PS：这里的Function不是function Function(){}，而是本身内置的Function

实例对象

由于不同的创建方式有差异，因此从创建方式来理解，一个为字面量方式；一个为构造器方式；一个为Object.create方式。三者的差异在于不同的创建方式的原型不同。

字面量方式：let a={} ,原型为function Object的prototype，相当于new Object()

构造器方式：let p = new Person(),原型为Person函数的prototype

Object.create()方式：let a={} let b=Object.create(a) ，原型为a

按照上述理解，可以构建出如下思维导图：

然后再梳理一下实例对象、构造函数、原型之间的转换:

let A = function(){};     //构造函数
let a = new A();  // 实例对象
console.log(a.__proto__) // 原型


A === a.constructor
A === a.__proto__.constructor
a.__proto__ === A.prototype

可得，如下思维导图：

由于__proto__是任何对象都有的属性，而JS中万物皆可为对象，因此可以通过__proto__不断连接其父级原型对象，到了父级原型对象这一步，同样也会有新的原型圈（就是下图的闭环），最后会到达顶层Object.prototype，它的 __proto__指向null结束，这条链路就被称为原型链，同时JS引擎查找属性时也会按照原型链的方向逐层去查找直到找到为止。

按照上述理解，并添以简单代码加以理解，可得思维导图：

1.var A = function(){};      //构造函数
2.var a = new A();    // 实例对象
3.a.__proto__ // 原型
4.a.__proto__.__proto__  // 原型的原型：Object.prototype
5.a.__proto__.__proto__.__proto__  // 原型链的终点：null

当然，其中还有不明确的点，那么就需要自己去搜索理解，搞明白每一个点所代表的意义和作用，给个原型链的经典图用以检验，从左至右的三列分别对应的是实例、构造函数、原型：

最后

走过路过，不要错过，点赞、收藏、评论三连~