简单清楚搞懂 原型与原型链

网上关于原型与原型链的文章，要么图画的流程太复杂看不懂，要么文字太枯燥，看完依旧一知半解。
这篇文章一定让你彻底搞明白原型与原型链。
(带下划虚线的句子有鼠标悬浮注释，辅助解释。)

认知前提

• 每个实例都有一个__proto__属性

• 每个类/函数都有一个prototype对象，注意 prototype里也有一个__proto__属性，与上一条的__proto__不是一个哦！。

• 所有构造函数都是Function的实例，包括Object和Function。

• prototype对象是Object的实例。

一句话解释原型链

每个实例的__proto__属性都指向它的类的 prototype

举个简单例子来看看有几条原型链

function Parent(){}
//new个实例
let son = new Parent();

请看上图，son是Parent的实例，Parent是Function的实例。而且每个元素都有自己的内置__proto__;每个prototype对象里也有自己的__proto__。
.
比如Parent会包含
白底：Parent.__proto__
红底：Parent.prototype
红底：Parent.prototype.__proto__

• 原型链1 – 橙色线

比如我们要输出console.log(son.a)，看下查找过程。（proto代指__proto__）
1、先在son的属性中找，没有。
2、顺着son.proto找，proto指向类Parent.prototype，结果Parent.prototype中也没有（注意只找红色prototype区域）。
3、顺着Parent.prototype.proto找（注意啦！prototype对象是Object的实例），所以找到了Object.prototype,依旧没有a属性。
4、顺着Object.prototype.proto找，注意啦，es中定义的Object.prototype.proto=null，所以到尽头了，终止查找，没有a属性，输出undefined。

• 原型链2 – 蓝色线

比如我们要输出console.log(Parent.a)，看下查找过程。
1、先在Parent的属性中找，没有。
2、顺着Parent.proto（注意是白色区域，跟Parent.prototype无关哦）找，proto指向Function的Prototype，因为Parent是Function的实例。在Function.prototype中（红色区域）没有找到。
3、顺着Function.prototype.proto找（注意啦！prototype对象是Object的实例），所以找到了Object.prototype,依旧没有a属性。
4、顺着Object.prototype.proto找，同原型链1，undefined

• 原型链3 – 紫色线

比如我们要输出console.log(Object.a)，看下查找过程。
1、先在Object的属性中找，没有。
2、顺着Object.proto（注意是白色区域，跟Object.prototype无关哦）找，proto指向Function的Prototype，因为Object是Function的实例。在Function.prototype中（红色区域）没有找到。
3、同原型链2第3步
4、同原型链1第4步

• 原型链4 没画出来的链

比如我们要输出console.log(Function.a)，看下查找过程。
1、先在Function的属性中找，没有。
2、顺着Function.proto（注意是白色区域，跟Object.prototype无关哦）找，Function指向Function的Prototype，因为Function是Function的实例。在Function.prototype中（红色区域）没有找到。
3、同原型链2第3步
4、同原型链1第4步

总结

通过以上4条原型链，我们发现

• 链条的终点就是Object.prototype.proto=null。
• Object与Function都是Function的实例。所以
  Object.proto === Function.proto === Function.prototype。(此句为直观解释，不要较真这句代码执行为false，请分别两两比较)
• Function.prototype.proto === Object.prototype

###代码测试1

function Parent(){}
//new个实例
let son = new Parent();

console.log(son.__proto__ === Parent.prototype); //true
console.log(son.__proto__=== Parent.__proto__); //false
console.log(Parent.__proto__ === Function.prototype); //true
console.log(Parent.prototype.__proto__ === Object.prototype);//true

###代码测试2 来源于网络

//网上有一道美团外卖的面试题是这样的：
 
Function.prototype.a = 'a';
Object.prototype.b = 'b';
function Person(){};
var p = new Person();
console.log('p.a: '+ p.a); // p.a: undefined
console.log('p.b: '+ p.b); // p.b: b

//问为什么？
该题正好可用上图的原型链1解释，从p一路找到Object.prototype.proto，停止查找，未发现a，但发现了b。则p.a返回undefined。p.b为Object.prototype下的b。

悬浮注释

[prototype对象是Object的实例]: prototype =new Object();prototype.proto=xxx;
[包括Object和Function]: 这俩都是构造函数，用法如 o = new Object(); fn = new Function()
[son是Parent的实例]: son= new Parent()
[Parent是Function的实例]: Parent = new Function()
[Parent是Function的实例]: Parent = new Function()

参考网址：
https://blog.csdn.net/farmwang/article/details/85986737
https://developer.mozilla.org/zh-cn/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype