一张图彻底掌握prototype、__proto__、constructor之前的关系（JS原型、原型链）

一、先上图

二、prototype、proto、constructor规则

规则一：实例没有prototype，实例的constructor指向构造函数，实例的__proto__指向上一层的原型(也就是构造函数的prototype)。

规则二 ：Object、构造函数、Function都是Function的实例。

实例：结合这两条规则，图中的f1是Foo的实例，Foo、Object、Function均为Function的实例。指向就非常明确了。

规则三：函数的原型的__proto__指向上一层的原型（也就是Fun.prototype.proto 指向Object.prototype）

规则四：函数的原型的constructor指向函数本身（可以理解为prototype和constructor抵消了）

实例：结合三四规则，下图的也走通了。

三、上代码

function Fun(){
    

}

const f1 = new Fun()

console.log(f1.constructor === Fun)
console.log(f1.__proto__ === Fun.prototype)
console.log(Function.prototype === Function.__proto__)
console.log(Fun.prototype.constructor === Fun)
console.log(Fun.prototype.__proto__ === Function.__proto__.__proto__)
console.log(Fun.constructor.__proto__ === Function.prototype)
console.log(Object.constructor === Function)
console.log(Function.constructor === Function)
console.log(Function.prototype.__proto__ === Object.prototype)
console.log(Object.prototype.__proto__ === null)

//结果全部为true

总结：当图中的关系已经印在脑海中的时候，可以尝试自己写出三者之间的转换等式，以及各种嵌套。
例如：new Fun().constructor.proto.proto === Object.prototype