关于原型链:一文彻底搞懂原型链

前言
原型和继承是js中十分重要的两大概念。深刻理解原型，也是学好继承的前提。

先来看一下构造函数、实例、原型对象之间的关系

「实例与原型对象之间有间接的分割，但实例与构造函数之间没有。」

两个概念
js分为「函数对象」和「一般对象」，每个对象都有__proto__属性，然而只有函数对象且「非箭头函数」才有prototype属性。

属性__proto__是一个对象【实例通过__proto__隐式原型指向其原型对象】，它有两个属性，constructor和__proto__；
原型对象有一个默认的constructor属性，用于记录实例是由哪个构造函数创立；

原型
了解原型
创立一个函数(非箭头函数)，就会依照特定的规定为这个函数创立一个 prototype 属性（指向原型对象）。默认状况下，所有原型对象主动取得一个名为 constructor 的属性，指回与之关联的构造函数。在自定义构造函数时，原型对象默认只会取得 constructor 属性，其余的所有办法都继承自Object。每次调用构造函数创立一个新实例，这个实例的外部[[Prototype]]指针就会被赋值为构造函数的原型对象。脚本中没有拜访这个[[Prototype]]个性的规范形式，但 Firefox、Safari 和 Chrome会在每个对象上裸露__proto__属性，通过这个属性能够拜访对象的原型。

function Person() {}// 阐明：name,age,job这些本不应该放在原型上，只是为了阐明属性查找机制Person.prototype.name = "Nicholas"; Person.prototype.age = 29; Person.prototype.job = "Software Engineer"; Person.prototype.sayName = function() {  console.log(this.name); };let person1 = new Person()let person2 = new Person()// 申明之后，构造函数就有了一个与之关联的原型对象console.log(Object.prototype.toString.call(Person.prototype)) // [object Object]console.log(Person.prototype) // {constructor: ƒ}// 构造函数有一个 prototype 属性援用其原型对象，而这个原型对象也有一个constructor 属性，援用这个构造函数// 换句话说，两者循环援用console.log(Person.prototype.constructor === Person); // true// 构造函数、原型对象和实例是 3 个齐全不同的对象console.log(person1 !== Person); // true console.log(person1 !== Person.prototype); // true console.log(Person.prototype !== Person); // true// 实例通过__proto__链接到原型对象，它实际上指向暗藏个性[[Prototype]] // 构造函数通过 prototype 属性链接到原型对象，实例与构造函数没有间接分割，与原型对象有间接分割，前面将会画图再次阐明这个问题console.log(person1.__proto__ === Person.prototype); // true conosle.log(person1.__proto__.constructor === Person); // true// 同一个构造函数创立的两个实例，共享同一个原型对象 console.log(person1.__proto__ === person2.__proto__); // true// Object.getPrototypeOf()，返回参数的外部个性[[Prototype]]的值 ，用于获取原型对象，兼容性更好console.log(Object.getPrototypeOf(person1) == Person.prototype); // true复制代码

如下图：

Person.prototype 指向原型对象，而 Person.prototype.contructor 指回 Person 构造函数。原型对象蕴含 constructor 属性和其余起初增加的属性。Person 的两个实例 person1 和 person2 都只有一个外部属性指回 Person.prototype，而且两者都与构造函数没有间接分割。

原型层级
在通过对象拜访属性时，会依照这个属性的名称开始搜寻。搜寻开始于对象实例自身。如果在这个实例上发现了给定的名称，则返回该名称对应的值。如果没有找到这个属性，则搜寻会沿着指针进入原型对象，而后在原型对象上找到属性后，再返回对应的值。因而，在调用 person1.sayName()时，会产生两步搜寻。首先，JavaScript 引擎会问：“person1 实例有 sayName 属性吗？”答案是没有。而后，持续搜寻并问：“person1 的原型有 sayName 属性吗？”答案是有。于是就返回了保留在原型上的这个函数。在调用 person2.sayName()时，会产生同样的搜寻过程，而且也会返回雷同的后果。这就是原型用于在多个对象实例间共享属性和办法的原理。

原型链
重温一下构造函数、原型和实例的关系：每个构造函数都有一个prototype指向原型对象，原型对象有一个constructor属性指回构造函数，而实例有一个外部指针指向原型。如果原型是另一个类型的实例呢？那就意味着这个原型自身有一个外部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间结构了一条原型链。这就是原型链的根本构想。

function SuperType() {  this.property = true;}SuperType.prototype.getSuperValue = function () {  return this.property;};function SubType() {  this.subproperty = false;}// 继承 SuperType SubType.prototype = new SuperType();SubType.prototype.getSubValue = function () {  return this.subproperty;};let instance = new SubType();console.log(instance.getSuperValue()); // true复制代码

SuperType 和 SubType这两个类型别离定义了一个属性和一个办法。这两个类型的次要区别是 SubType 通过创立 SuperType 的实例并将其赋值给本人的原型 SubTtype. prototype 实现了对 SuperType 的继承。这个赋值重写了 SubType 最后的原型，将其替换为SuperType 的实例。这意味着 SuperType 实例能够拜访的所有属性和办法也会存在于 SubType. prototype。这样实现继承之后，代码紧接着又给 SubType.prototype，也就是这个 SuperType 的实例增加了一个新办法。最初又创立了 SubType 的实例并调用了它继承的 getSuperValue()办法。

模仿new
应用new时，到底产生了什么？

创立一个空对象，作为将要返回的对象实例
将这个空对象的原型，指向了构造函数的prototype属性
将这个空对象赋值给函数外部的this关键字
开始执行构造函数外部的代码
如果构造函数返回一个对象，那么就间接返回该对象，否则返回创立的对象
也就是说，构造函数外部，this指的是一个新生成的空对象，所有针对this的操作，都会产生在这个空对象上。构造函数之所以叫“构造函数”，就是说这个函数的目标，就是操作一个空对象（即this对象），将其“结构”为须要的样子。

function simulateNew() {  let newObject = null,result = null,    constructor = Array.prototype.shift.call(arguments)  // 参数判断  if (typeof constructor !== 'function') {    console.error('type error')    return  }  // 新建一个空对象，对象的原型为构造函数的 prototype 对象  newObject = Object.create(constructor.prototype)  // 将 this 指向新建对象，并执行函数  result = constructor.apply(newObject, arguments)  // 判断返回对象  const flag =    result && (typeof result === 'object' || typeof result === 'function')  // 判断返回后果  return flag ? result : newObject}/**  测试如下  */function Person(name) {  this.name = name}const p1 = new Person("p1")const p2 = simulateNew(Person, 'p2')console.log("p1",p1, p1 instanceof Person);console.log('p2', p2, p2 instanceof Person)复制代码

模仿instanceof
instanceof 次要的实现原理就是「只有左边变量的」 prototype 「在右边变量的原型链上即可」。因而，instanceof 在查找的过程中会遍历右边变量的原型链，直到找到左边变量的 prototype，如果查找失败，则会返回 false，通知咱们右边变量并非是左边变量的实例。

function instanceOf(leftVaule, rightVaule) {  let rightProto = rightVaule.prototype; // 取右表达式的 prototype 值  leftVaule = leftVaule.__proto__; // 取左表达式的__proto__值  while (true) {    if (leftVaule === null) {      return false;    }    if (leftVaule === rightProto) {      return true;    }    leftVaule = leftVaule.__proto__  }}复制代码

总结
拜访对象的一个属性，先在本身查找，如果没有，会拜访对象的__proto__，沿着原型链查找，始终找到Object.prototype.__proto__。

每个函数都有prototype属性，会指向函数的原型对象。

所有函数的原型对象的__proto__，会指向Object.prototype。

原型链的止境是Object.prototype.__proto__，为null。

最初
如果你感觉此文对你有一丁点帮忙，点个赞。或者能够退出我的开发交换群：1025263163互相学习，咱们会有业余的技术答疑解惑

如果你感觉这篇文章对你有点用的话，麻烦请给咱们的开源我的项目点点star:http://github.crmeb.net/u/defu不胜感激！

PHP学习手册：https://doc.crmeb.com
技术交换论坛：https://q.crmeb.com