原型与原型链详解

原型和原型链是 JS 的核心内容之一，首先弄清楚原型、实例、构造函数三者之间的关系。然后再去理解原型链是什么。

1.Constructor 构造函数

与普通函数的区别，函数名首字母大写。

function Animal(){}

2. prototype 原型

通过控制台打印出Animal构造函数的所有属性和属性值，可以看到构造函数内部有一个名为prototype 的属性，通过这个属性就能访问到原型： Animal 就是构造函数， Animal.prototype 就是原型。原型就是一个对象，实例会“继承”这个对象的属性，在原型上定义的属性，通过“继承”，实例身上也就有了这个属性。“继承”在new构造函数的过程中实现。

构造函数内部的 prototype 属性将构造函数和原型联系在了一起

3.instance 实例

首先我们有了构造函数，就可以在原型上创建可以“继承”的属性，通过new一个实例，那么实例就可以“继承”到原型上定义的属性。并且可以通过 instanceof 来检查new出来的对象是否是构造函数的实例。

new 操作符把构造函数和实例联系在了一起

4.proto 隐式原型

实例通过 __proto__ 访问到原型，所以如果是实例，那么就可以通过这个属性直接访问到原型。

隐式原型把实例和原型联系到了一起

5.constructor 构造函数

构造函数可以通过内部的prototype属性访问原型，那么原型也可以通过 constructor 属性访问到构造函数。

注意这里的 constructor 是原型的一个属性，Constructor 指的是真正的构造函数。

原型上的constructor属性可以访问到构造函数

6.实例、构造函数、原型三者之间的关系

构造函数通过 prototype 访问到原型，通过 new 操作符创建一个实例，实例通过 __proto__ 访问到原型。现在构造函数和实例都可以访问到原型了。

原型可以通过 constructor 直接访问到构造函数，但是没有从实例直接访问到构造函数的属性或方法，所以只能借助原型这个中间人，通过 __proto__ 访问到原型，然后再通过constructor访问到构造函数，即 . __proto__.constructor。

另外注意：在读取一个实例的属性的过程中，如果属性在该实例中没有找到，那么就会循着 __proto__ 指定的原型上去寻找，如果还找不到，则尝试寻找原型的原型。

7.原型链

搜索一个实例非自有属性的过程，所形成的链状关系就是原型链。

首先要明白原型同样也可以通过 __proto__ 访问到原型的原型，搜索一个实例非自有属性就是通过 __proto__ 作为桥梁连接起来的一系列原型、原型的原型、原型的原型的原型直到最终找到 Object 构造函数为止。

参考链接：🍭 图解原型和原型链 - 掘金