构造函数、实例、原型之间的关系

弄明白这三者之间的关系关键是理解 prototype、proto、constructor 之间的的联系：

在JavaScript中，每个函数都有一个prototype属性，当一个函数被用作构造函数来创建实例时，该函数的prototype属性值将被作为原型赋值给所有对象实例（设置实例的proto属性），也就是说，所有实例的原型引用的是构造函数的prototype属性。同时在原型对象中，包含一个"constructor"属性，这个属性对应创建所有指向该原型的实例的构造函数（有点拗口，就是constructor属性指向构造函数）。这三者的关系可以用下面的示例图表示：

所以构造函数通过 prototype 属性指向自己的原型。 构造函数的实例在创建后通过 proto 属性指向构造函数的 prototype 的对象，即实例函数也指向原型。构造函数和实例都通过属性指向了原形。

代码示例：

 function Person () {}
 let manPerson = new Person()
 manPerson.proto === Person.prototype // true
 Person.prototype.constructor === Person // true
 manPerson.constructor === Person.prototype.constructor // true

反过来原型和构造函数是没有指向实例的引用，因为一个构造函数会有N个实例。javascript通过实例的 proto 属性来访问共同的原形。

 foo instanceof Function // true
 too instanceof Function // true
 foo.proto === too.proto // true
 foo.proto === Function.prototype // true foo是Function的实例

所以too、foo都是Function的实例，他们的_proto指向的是Function构造函数的原型。

通过上面的示例代码分析，这里主要涉及到 prototype 、proto、constructor 这3个属性的关系。

我们再次梳理一下:

所以上面的关系图其实可以于理解为：

题外话：

 Function.prototype === Function.proto

先有鸡还是先有蛋？怎么 Function 作为构造函数 与 Function 作为实例对象的原型相等

对于这类问题也可以不用深究。

constructor

原型的constructor属性指向对应的构造函数

 function Person() {
 }
 console.log(Person === Person.prototype.constructor); // true

原型链

当理解了原形的概念后，原形链就比较好理解了。

因为每个对象和原型都有原型，对象的原型指向对象的父，而父的原型又指向父的父，这种原型层层连接起来的就构成了原型链。.JavaScript 对象通过proto指向原型对象的链。原形链的概念不难理解，当访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾，找到就返回该属性的值否则就返回undefind（原形链的末端是 null）。

关于 javascript 中各数据类型原形之间的关系可以参考下图理解：

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

React-router v4使用步骤详解

nodejs express配置自签名https服务器步骤详解