详解原型，隐式原型，原型链，prototype、__proto__与constructor

一、 原型与隐式原型

1.所有的引用类型都有一个隐式原型(隐式原型对象) 也就是$\_\_proto\_\_$属性(源于new运算符的创建，括号内容不懂，后面会解释。看完下面new的解释回来再看这句话。)

换句话说，这个$\_\_proto\_\_$属性就是这个引用类型的隐式原型(隐式原型对象)。

这个属性指向的是一个普通的对象

注: 实际上，该属性在ES标准定义中的名字应该是[[Prototype]]，具体实现是由浏览器代理自己实现，谷歌浏览器的实现就是将[[Prototype]]命名为__proto__

总结: 一个引用类型的隐式原型就是一个属性，这个属性的值，是个对象。

2.所有的函数都有一个原型 也就$prototype$属性。

函数的$prototype$属性，就是这个函数的原型

这个属性的值，也是一个对象。

回忆new到底做了什么

为了更好的理解接下来的原型链概念，我们先对构造函数new做一个回忆

function Person(name,age){
	this.name = name;
	this.age = age;
}
const person1 = new Person('Tom',20)
console.log(person1) //Person{name:'Tom',20}

我们先定义了一个构造函数Person,然后用new操作符生成Person构造函数的一个实例，并将其引用赋值给变量 person1然后在控制台打印引出 person1的内容，可以看到该实例对象是Person类型的对象，拥有name和age属性，他们的值，就是我们在调用构造函数时传入的值。

new 到底做了什么呢？
首先
1.创建一个空的对象。{}

2.为步骤1新创建的对象添加属性__proto__,让该空对象{}的__proto__属性指向 构造函数Person的prototype属性

3.将Person构造函数的this指向{}对象，然后由于我们的代码写的是

function Person(name,age){
	this.name = name;
	this.age = age;
}
const person1 = new Person('Tom',20)

so，现在给参数传入的’Tom’与20两个参数，
this指向空对象{}

也就意味着{}的name和age属性等于传入的两个参数。

but，空对象没有name和age属性啊。没有的话会直接创建。不信你看
所以这样 就在空对象里，创建了两个属性，此时他们已经不再是空对象了。

最后将该新创建的对象引用返回，交给const person这个变量，此时person就指向这个对象了。

借用别的大佬一张图片展示

https://blog.csdn.net/cc18868876837/article/details/103149502

原文比本文描述更加清晰。

至此我们知道
一个实例化的对象的__proto__属性是指向构造函数的prototype属性的。

其实不只是这里的一个实例化的对象的__proto__属性是指向构造函数的prototype属性。

而是所有的引用类型的__proto__属性都指向它的构造函数的prototype

再补充一点:创建引用类型的字面量创建方法，等价于 new 构造函数，也就是说

var arr = []//此行为等价于下面
var arr = new Array()

这个arr的变量的构造函数
就是
Array()这个内置的js构造函数
所以我们来看看
arr的__proto__属性是不是Array()的prototype属性。

var arr = []
console.log(arr.__proto__ === Array.prototype);
//打印结果为true

为什么会产生这个结果，就是因为new这个运算符。

原理就在于new 做了什么，也就是我们上面解释的，图片中你所看到的。

正式介绍原型链

有了前面的基础，我们知道了一个对象的隐式原型(__proto__)指向的是创建它的构造函数的原型(prototype)

接下来我们说说对象的隐式原型的作用(__proto__的作用)

__proto__属性的作用是: 当访问一个对象的时候，如果对象内部不存在这个属性，那么就会去它的__proto__属性所指的那个对象的原型(父对象的原型/构造函数的原型)里面找。

比如

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.nationnality = 'China'
var myFather = new Person("John", "Doe", 50, "blue");
console.log(myFather);
console.log(myFather.nationnality);

先说打印结果

第一个打印的结果是
Person {
  firstName: 'John',
  lastName: 'Doe',  
  age: 50,
  eyeColor: 'blue'  
}
第二个是
China

哎哎？不对吧，为什么myFather这个对象里面没有nationnality也能用myFather.nationnality打印出China？

这就是__proto__属性的作用。

还不理解的话再加上大佬的一句话

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的$\_\_proto\_\_$隐式原型上查找，即它的构造函数的$prototype$，如果还没有找到就会再在构造函数的$prototype$的$\_\_proto\_\_$中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。
————————————————
版权声明：本文为CSDN博主「TowYingWang」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xiaoermingn/article/details/80745117

至此为止，上面的概念已经有些了解后，看这图便可透彻的理解原型、原型链了。

上图参考
https://www.cnblogs.com/xiaohuochai/p/5721552.html