一文让你理解Javascript中的原型和原型链

导文

很多新人朋友，甚至有工作一段时间的朋友，都很容易把Javascript中的原型和原型链搞混，甚至不清楚它们之间是什么关系。今天看完这篇文章你就明白了，我这边尽量使用通俗的话语给大家表述。

实例、构造函数、原型对象的三角关系

大家以往接收到的知识都是实例、构造函数、原型对象是三角关系，但是不清楚他们之间又是什么存在的；前段时间看到一个博主的视频以及红宝书上的知识，这种就很好理解，下面我们先上一张图。

首先我们要明白，实例、构造函数、选型对象是三个不同的对象。首先说实例，它是通过new关键字实现的，new关键字的第一个就是在内存中创建一个新对象，那么这就和构造函数属于不同的对象了， 那么接下来原型对象和构造函数这两者也是不同的对象。我们可以通过下面的代码来看看是不是如上图所示。

function Person() {}
const Person1 = new Person()
console.dir(Person)
console.dir(Person1)

首先打印构造函数Person，不难发现，通过prototype就能访问到它的原型对象，而原型对象上的constructor又指回了构造函数Person。

打印实例Person1，不难发现，实例是一个对象，打开就只有原型对象， 通过展开原型对象，在原型对象上的constructor就指向的构造函数Person。

原型链

通过上述描述的，我们知道每一个构造函数都有一个原型对象，原型有一个属性(prototype)指向构造函数，实例也有一个内部指针指向原型。而我们通过__proto__就能获取到这个原型， 那么原型上又会有这么一个指针指向另外一个原型，如此往复向前，那么就形成了一条链，就是所谓的原型链。原型链当找上去时，最顶层的原型对象就是null。

通过上面三张图，就可以看出原型链的情况。

总结

这里我们需要明白：
1.实例、原型对象、构造函数属于三个不同的对象；
2.实例和构造函数没有必然的联系，都是通过原型对象进行联系起来的；
3.原型对象本身有一个指针指向另外一个原型，如此就形成了一条原型链；
4.查找到最顶层时就是null。