可视化理解constructor、prototype、__proto__形成的指向图

Person类和person实例

首先给出一段js代码：

function Person() {}
const person = new Person()

根据以下规则：

• 每个实例都有一个__proto__指向其原型对象。
• 每个构造函数都有一个prototype属性指向其实例的原型对象
• 每一个原型都有一个prototype指向其实例的构造函数。

于是就有以下指向图：

 

 

原型也是实例

原型也是实例，那么"Person实例的原型.__proto__"指向什么呢？

引入新的规则：

• 任何原型都是构造函数Object的实例。
• Object实例的原型也是构造函数Object的实例，但是它的__proto__指向null。

于是就有以下指向图：

 

构造函数也是实例

构造函数也是实例，根据以下规则：

• 所有构造函数都是Function的实例。（Person.__proto__===Function.prototype结果为true）
• Function也是Function自身的实例。（Function.__proto__===Function.prototype结果为true）

于是就有以下关系图：

原型、构造函数都是实例 

观察上图，其实构造函数、原型都是实例，它们都有一个__proto__指向一个原型，直到null。