JavaScript高级之prototype、__proto__和原型链

一、概述

1. _proto_（隐式原型）和constructor是对象特有的属性。
2. prototype（显式原型）是函数特有的属性，由于函数也是一种特殊的对象，所有函数同时有这三个属性。
3. 原型链指的是：在查找对象的某个属性时，先在其本身内查找，若没有则沿着__proto__属性向上查找，直到__proto__的值为null，若仍没有查到则返回undefined。这条”链路“就是原型链，由于沿着__proto__查找，也叫隐式原型链。

二、prototype属性

构造函数的变量属性通常存放在自身内部，方法存放在prototype中。prototype中存放的属性，可被该函数实例化的对象们共享。函数的prototype属性都指向一个空的对象，这个对象当然也就是Object的实例。

三、__proto__和constructor属性

对象的隐式原型指向其构造函数的显式原型。对象中的constructor指向其构造函数。如下图所示：

注意：

1. Function.__proto__===Function.prototype，即Function的显式原型和隐式原型都指向它的显式原型。这是由于Function是通过var Function=new Function()创建的。
2. Object函数对象是通过var Object=new Function()创建的，因此Object.__proto__===Function.prototype。而Function.prototype如前所示是一个空对象，是Object对象的实例，因此Function.prototype.__proto__===Object.prototype。
3. Object.prototype.__proto__===null，是原型链的尽头。
   下面这张图可以概括以上内容：

四、原型链

在查找对象属性的时候，会沿着对象的__proto__向上查找直到null。A instanceof B就是沿着原型链查找，若A的原型链中有B.prototype，则返回true。因此 Object.prototype instanceof Object会返回false。
需要注意的是，当设置属性时，不会参考原型链，若对象本身有这个属性，则会给其赋值，否则创建属性并赋值，不管它的原型链上有没有这个属性。如下所示：

function Foo(){}
Foo.prototype.a=1
var foo=new Foo()
foo.a=2
console.log(foo.__proto__.a)//1

打印foo会发现其自身和原型链上共有两个a属性：

五、一个问题

function Foo() { }
Foo.prototype.a = 1
var foo1 = new Foo()
Foo.prototype = {
    a: 11,
    b: 22
}
var foo2 = new Foo()
console.log(foo1.a)//1
console.log(foo1.b)//undefined
console.log(foo2.a)//11
console.log(foo2.b)//22

原型链图（只画了关键部分）：

在foo生成时，其构造函数Foo将其__proto__属性带到Foo.prototype，然后就自己跑路了，指向了新对象，只留下foo自己孤零零指向原来的对象。

参考资料：
https://blog.csdn.net/cc18868876837/article/details/81211729