持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

前言

也许不是最详细的，但一定是最用心的关于原型链的讲解

原型介绍

函数的prototype

prototype

每个函数在创建的时候都会创建一个prototype属性，这个属性就是原型属性。这个原型属性中存储的是一个空对象(是一个对象的引用)，指向当前函数的原型对象。
prototype属性只有在函数被构造调用的时候才会有效(如果是普通函数的调用不会生效，如果是通过new这种调用才会有效)也就是只有函数的实例化对象可以使用到当前函数的prototype属性。
一般用在构造函数上，每一个内置的构造函数也都有自带的prototype属性
我们可以给添加或修改内置的构造函数的prototype

constructor

每一个实例化对象都可以通过constructor属性访问到他的构造器
因为每一个实例化对象都有constructor，所以为了共享，会把constructor属性放在构造函数的原型对象上
原型对象的constructor属性指向其构造函数

实例的proto属性

当你的构造函数被调用时，创建一个实例之后，该实例的内部会自动包含一个属性，指向构造函数的原型对象。
构造函数的prototype属性和构造函数实例化出来的对象___proto__属性指向的是同一个对象。
如果查询构造函数的实例对象的属性时，本对象中没有这个属性那么会找本实例对象的 __proto__是否有该属性，如果有就自动调用__proto__。

显式原型和隐式原型

每一个函数都有一个prototype属性，即显式原型

函数的prototype在创建函数的时候自动添加上，在访问实例化对象的属性的时候可能使用，每一个对象都有一个__proto__属性，即隐式原型

每一个对象都有一个proto属性，即隐式原型

__ proto__在实例化对象的时候添加，指向构造函数的prototype，当获取对象上的属性或方法找不到的时候，会自动调用__proto__ ,对象的隐式原型指向其所在构造函数的显式原型。

图.png

原型链

作用域链查找变量的过程，用来描述对象通过隐式原型对象查找属性的过程。

具体介绍

所有的实例对象都有__proto__属性, 它指向的就是其构造函数的原型对象
这样通过__proto__属性就形成了一个链的结构，我们把这个结构称作为原型链
当给对象属性赋值时不会使用原型链, 而只是在当前对象中进行操作

操作代码示例

通过隐式原型最终都能找到原型链的终点null

function Person(name){
    this.name = name
    }
 var p = new Person('lucky')
  console.log(Object.prototype.__proto__) //null
  console.log(Person.prototype.__proto__.__proto__) //null
  console.log(p.__proto__.__proto__.__proto__) //null

验证上述代码打印，原型链查找过程图解

原型.png

最后画一个终极原型链图

终极原型链.png

好了，以上就是本篇文章的分享，感谢阅读！

JavaScript | 最用心原型链讲解

前言