JS的原型对象和原型链

一、对象的原型（[[prototype]]或者__proto__）

JavaScript 中所有的对象中都包含了一个[[prototype]]内部属性（除了Object.create(null)创建的对象），这个属性值所对应的就是该对象的原型。

[[prototype]]作为对象的内部属性，是不能被直接访问的。所以为了方便查看一个对象的原型，Chrome等大型浏览器厂商提供了__proto__这个非标准对象原型访问器，ECMA 引入了标准对象原型访问器 Object.getPrototype(Object)

二、函数的 prototype

下面两句话很重要

1、每一个函数都有一个prototype属性，但是普通对象是没有的；
prototype下面又有个construetor，指向这个函数（它自己）。

2、每个对象都有一个名为_proto_的内部属性，指向它所对应的构造函数的原型对象，原型链基于_proto_;

不出意外你应该是晕了，没事，我们用图表示一下：

Object是我们的构造对象的顶级函数，它的prototype属性就是Object的原型对象，Object的原型对象的constructor就指向Object函数本身

三、对象__proto__和函数的prototype的关系

3.1、构造函数详解

JS构造函数详解

3.2、构造函数的原理（new之后发生了什么）

官方解释：

1. 创建一个空的简单JavaScript对象（即{}）；
2. 为步骤1新创建的对象添加属性__proto__，将该属性链接至构造函数的原型对象
3. 将步骤1新创建的对象作为this的上下文 ；
4. 如果该函数没有返回对象，则返回this。

咱们的总结：

1、自从用new调用函数后，JS引擎就会在内存中创建一个空对象{}，const newObj = {};
2、将新对象newObj的__proto__属性链接至构造函数的原型对象 newObj.__proto__ = FunctionName.prototype
3、构造函数内部的 this 被赋值为这个新对象（即 this 指向新对象）this = newObj
4、执行构造函数内部代码；
5、如果该函数没有返回对象，则默认返回this。

3.4、构造函数创建实例

const Person = function () {
  this.name = "张三";
};

const p = new Person();

console.log(p.__proto__ === Person.prototype); //true

我们定义了一个函数Person，使用Persong构造函数创建一个p的实例对象，实例p的原型__protp__指向构造函数Person的prototype，所以函数的 prototype 和 对象的 [[Prototype]]或者__proto__ 指向同一个原型对象

那我们继续更新图：

四、原型链

当我们要在一个对象（假设对象 A）上访问一个属性，JavaScript 首先会看对象 A 本身存不存在目标属性，若不存在，则会通过它的 [[Prototype]]或者__proto__ 查看它的原型对象prototype（假设对象 B）存不存，若还是不存在，则继续查找原型对象 B 的原型 [[Prototype]]或者__proto__ （假设对象 C）存不存在目标属性，一直到找到属性或者返回 null（就是找到 Object的原型对象，还是没找到属性）

其中 对象 A —> 对象 B —> 对象 C —> … —> Object 就是原型链的基本模型

最后更新一次关系图：