深入理解JavaScript原型与原型链

构造函数与对象

我们先使用构造函数创建对象：

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

在上面的例子中，Person就是一个构造函数，使用new创建了一个实例对象person。

当然除了上面示例所示创建实例对象外，也可以使用JavaScript的内置对象（Object、Array、Date等需要new来创建实例对象的内部对象）创建一个对象。在这里，内置对象就是构造方法：

var person = new Object()

prototype（显式原型）

每个函数都有一个prototype属性，函数的这个属性指向的其创建的实例对象的原型。

function Person() {}
Person.prototype.name = 'Anjou'
var person = new Person()
console.log(person.name)  // Anjou

在这里构造函数Person的prototype属性指向的就是实例对象person的原型。

那么原型又是什么呢？我们可以这样理解，JavaScript创建对象（null除外）时就是与另一个对象产生关联，这个对象就是我们所说的原型，创建的对象都会从原型中“继承”属性。

既然构造函数可以通过prototype属性访问实例对象的原型，那么实例对象怎样去访问它的原型呢？

__proto__（隐式原型）

在JavaScript中每一个对象（null除外）都会有一个__proto__属性,这个属性会指向对象的原型，即：

function Person() {}
var person = new Person()
console.log(person.__proto__ === Person.prototype)  //true

所以构造函数与实例对象都可以访问实例对象的原型：

既然构造函数与实例对象都可以访问实例对象的原型，那么原型是否可以访问构造函数与实例对象呢？

constructor

因为构造函数可以创建多个实例对象，所以原型无法访问具体的实例对象，但是原型可以借助constructor属性去访问构造函数。

即每一个原型都有一个constructor属性：

function Person() {}
var person = new Person()
console.log(Person.prototype.constructor === Person)  //true

所以构造函数、实例对象与原型存在下列关系：

实例对象的原型

前面我们已经说过创建实例对象时会从原型中“继承”属性，那这种“继承”又是如何表现出来的呢？

function Person() {}
Person.prototype.name = 'Anjou'
var person = new Person()
person.name = 'Anpoly'
consoLe.log(person.name)  // Anpoly
delete person.name
console.log(person.name)  // Anjou

当读取实例属性时，如果在实例中找不到，就会查找与实例关联的原型中是否有该属性，如果还找不到，就会查找原型的原型，一直查找到最顶层。

既然如果查不到会查找原型的原型，那么原型的原型又是什么呢？

原型的原型

前面我们已经说过，每一个对象（null除外）都会有一个__proto__属性，这个属性会指向对象的原型。 既然实例对象的原型也是对象，那么它会不会也存在原型呢？

我们可以使用前面提到的原型的constructor属性来辅助测试：

function Person() {}
console.log(Person.prototype.__proto__.constructor)  //ƒ Object(){}

我们不难发现原来原型也是有原型的,所以原型的原型是由Object构造函数生成的：

function Person() {}
console.log(Person.prototype.__proto__ === Object.prototype)  // true

看到这里，我们会思考那么Object.prototype是否也有它的原型呢？

function Person() {}
console.log(Person.prototype.__proto__.__proto__)  // null

我们看到Object.prototype的原型是null，那么null代表了什么呢？

null 表示“没有对象”，即该处不应该有值。

所以我们可以理解为Object.prototype已经没有原型了。

构造函数的原型

既然实例对象与原型都有自己的原型，构造函数也是对象，那么构造函数是否也有自己的原型呢？

function Person() {}
console.log(Person.__proto__)  //  ƒ () {}

我们发现代码执行的结构为 ƒ () {}，这说明构造函数也是有原型的，那这个ƒ () {}究竟代表什么呢？

function Person() {}
console.log(Person.__proto__ === Function.prototype)  // true

我们发现构造函数的原型是Function.prototype，我们再看一下内置对象的原型：

console.log(Number.__proto__ === Function.prototype)  // true
console.log(Boolean.__proto__ === Function.prototype)  // true
console.log(String.__proto__ === Function.prototype)  // true
console.log(Object.__proto__ === Function.prototype)  // true
console.log(Function.__proto__ === Function.prototype)  // true
console.log(Array.__proto__ === Function.prototype)  // true
console.log(RegExp.__proto__ === Function.prototype)  // true
console.log(Error.__proto__ === Function.prototype)  // true
console.log(Date.__proto__ === Function.prototype)  // true

特别注意的是Function内置对象的原型也是Function.prototype。

Function.prototype也是一个对象，我们继续看它的原型：

console.log(Function.prototype.__proto__ === Object.prototype)  //true

最终Function.prototype的原型指向了Object.prototype。

通过上面的观察我们发现这样一个现象：

console.log(Object.__proto__ === Function.prototype)  // true
console.log(Function.prototype.__proto__ === Object.prototype)  //true

即：

console.log(Object.__proto__.__proto__ === Object.prototype)  // true

所以我们最终的关系图为：

原型链

通过上面的讲解，我们已经明白了实例对象、构造函数与原型之间的关系。接下来我们来了解原型链，什么是原型链？

由相互关联的原型组成的链状结构就是原型链，如下图的蓝色线条：