一、JavaScript之原型和原型链

原型

首先创建一个构造函数

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

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

prototype

每个函数都有一个prototype属性，那这个属性到底是指向哪里呢？是这个函数的原型吗？

function Person() {}
Person.prototype.name = 'lilei';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // lilei
console.log(person2.name) // lilei

从这里可以看出，函数Person的prototype熟悉指向了一个对象，这个对象就是正在调用该构造函数而创建的实例的原型，也就是这个例子中的person的原型。
那什么是原型呢？可以这样理解，每个JavaScript对象（null除外）在创建的时候都会关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型继承属性。

proto

每一个JavaScript对象（null除外）都具有的一个属性叫 ‘proto‘ , 这个属性指向该对象的原型。

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

constructor

前面我们已经知道实例对象和构造函数都可以指向原型，那么原型是否有属性指向构造函数或者实例呢？
因为一个构造函数可以生成多个实例，所以原型没有指向实例的属性，，但是原型可以指向构造函数，这就要讲到第三个属性：constructor，每个原型都有一个 constructor 属性指向关联的构造函数。

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

综上我们已经得出

function Person() {}

var person = new Person();

console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

原型链

在前面，我们已经知道什么是原型，下面我们说说原型链。
当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。
那么原型的最顶层是什么呢？请看下面的代码

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

null字面意思：空值，这个值的语义是，希望表示一个对象被人为的重置为空对象，而非一个变量最原始的状态 。
所以 Object.prototype.proto 的值为 null 跟 Object.prototype 没有原型，其实表达了一个意思。
所以查找属性的时候查到 Object.prototype 就可以停止查找了，所以原型的最顶层就是null。
最后用一张图来表示之间的关系：

图中由相互关联的原型组成的链状结构就是原型链，也就是蓝色的这条线。