segmentfault官方|深入挖掘原型链

北京联盟_本文原题：深入挖掘原型链
本文转载于 SegmentFault 社区
作者：forceddd
1.原型对象，实例对象与构造函数
如果想要深入理解原型链，首先需要明确知道什么时原型对象，什么是实例对象，以及原型对象，实例对象与构造函数三者之间的关系。
首先，实例对象是指通过关键字new ，由构造函数构造出的对象实例对象可以有多个，并且实例对象会继承它的原型对象上的所有属性。

functionFoo( ) {}varf1= newFoo; varf2= newFoo;
f1与f2就是由构造函数Foo通过关键字new创建的两个实例对象。
同一个构造函数的实例对象的原型对象是同一个，是构造函数的prototype属性，在实例对象上可以通过__proto__属性获取。即：

console.log(f1.__proto__ === Foo.prototype); //trueconsole.log(f2.__proto__ === Foo.prototype); //trueconsole.log(f1.__proto__ === f2.__proto__); //true因此当我们在原型对象上添加属性或方法时，所有的实例对象都会继承该属性或方法，我们可以将一些公用的方法定义在Foo.prototype上。
2.原型对象，实例对象和构造函数三者的关系
每个实例对象的原型对象上都有一个constructor属性，这个属性指向实例对象的构造函数，实例对象可以从它的原型对象上继承该属性。
三者的关系听起来十分绕口，但是用代码体现就很清晰了：
实例对象f1 ，构造函数Foo ，原型对象Foo.prototype===f1.__proto__

console.log(Foo.prototype. constructor=== Foo); //trueconsole.log(f1.__proto__. constructor=== Foo); //trueconsole.log(f1. constructor=== Foo); //trueconsole.log(f1. constructor=== f1.__proto__. constructor); //true3.Java的原型链规则
1.js中规定，所有的对象都有自己的原型对象，原型对象和和函数也是对象，所以他们也有自己的原型对象(__proto__) ，因此会形成原型链。
2.js中读取属性和方法的规则：js引擎会首先在对象本身查找属性和方法，如果找不到就会沿着原型链逐层向上查找，最终找不到就会返回undefined 。如果找到了就不会再继续查找，所以当一个实例对象和它的原型对象上具有同名属性或方法时，只会查找到对象本身的属性或方法。
使用图示可以更好地理解原型链：

functionFoo( ) { }varf1 = newFoo;
以上这段代码：
首先有实例对象，构造函数和原型对象
原型对象的constructor指向构造函数，实例对象继承的constructor也是指向构造函数，实例对象和构造函数的__proto__和prototype指向同一个原型对象。

本文插图
【segmentfault官方|深入挖掘原型链】

然后，因为Foo.prototype也是一个对象，他也具有自身的原型对象__proto__,由三者关系我们可以知道,Foo.prototype.__proto__.constructor应该指向Foo.prototype的构造函数，输出结果是Object,即Foo.prototype.__proto__.constructor===Object ，并且Object.prototype也应该有自己的原型对象，输出为null 。
所以有：

本文插图

再然后，构造函数Foo和Object也是实例对象，他们也应该由自己的原型对象__proto__ ，而所有的函数都是由构造函数Function构造的，所以Object.__proto__===Function.prototype ， Foo.__proto__===Function.prototype,Object.__proto__===Foo.__proto__,并且Function.prototype也有自己的原型对象__popto__ ，指向了Object.prototype,可以画出: