js __proto__、prototype、constructor的关系

一、 前言

这篇文章涉及到js的原型和原型链，对这块内容不熟悉的同学，可以移步：js 的原型和原型链 这篇文章先了解一下。

二、什么是constructor?

constructor 是每个引用类型（数组，对象，函数）都会拥有的一个属性，而且这个属性指向了创建当前这个实例对象的构造函数（类）。

class Foo{};
let f1 = new Foo();
console.log(f1);  //  {} 是一个空对象 
console.log(f1.__proto__); // {constructor: ƒ}   指向原型对象
console.log(f1.constructor);  // class Foo{}    
console.log(f1.__proto__.constructor)  // class Foo{}
console.log(f1.constructor === f1.__proto__.constructor );  // true   
console.log(f1.__proto__ ===  Foo.prototype)  // true    由此可得 f1的constructor属性是继承父类所得

解读：1、实例对象 f1是由类Foo所创建的，所以f1.constructor 指向了类Foo；
2、f1的constructor属性是继承父类所得。

在 js 的原型和原型链 这篇文章中提到：
1、__ proto__ 属性，也叫隐式原型，它是一个普通的对象，所有引用类型都有该属性（数组，对象，函数）；
2、prototype属性，这也叫显式原型，它也是一个普通的对象，是函数所独有的属性。
3、对象的__ proto__属性指向它的构造函数的prototype属性。

三、constructor、__ proto__、prototype关系图解

如图：

解读：
1、f1是Foo实例化所得;
f1.__ proto__指向 Foo.prototype;
Foo.prototype__ proto__指向Object.prototype;
Object.prototype.__ proto__ 指向 null； （原型链的流程）
2、constructor属性就是指向该对象的构造函数；
f1.constructor 继承于Foo.prototype并指向构造函数（类） class Foo；
Foo.constructor 继承于 Function.prototype 并指向构造函数（类）Function();
3、__ proto__属性是“隐式原型”，对象的__ proto__属性指向它的构造函数的prototype属性，所以f1.__ proto__ === Foo.prototype；
prototype属性，是“显式原型”，它的作用就是包含所有实例共享的属性和方法，也就是让该构造函数所实例化的对象们都可以在这里找到公用的属性和方法；
任何函数在创建的时候，其实会默认同时创建该函数的prototype对象；