原型

[wweggplant]

原型链

构造函数指向原型prototype

function Foo() {}
Foo.prototype.name = 'bar'
var f1 = new Foo()
var f2 = new Foo()
console.log(f1.name) // bar
console.log(f2.name) // bar

在上面这个例子中，Foo就是一个构造函数。f1和f2分别是他创建的两个实例。每个函数都有一个prototype属性，受面向对象思想的影响，会认为这个属性是指向Foo函数。实际上prototype指向的是创建的实例的原型。每个javascript对象都有原型，

       prototype
 Foo ------------>Foo.prototype
(构造函数)

实例指向原型__proto__

以上说的是函数的prototype属性，那么实例与原型的又如何表示呢？一般实例对象都有一个非标准属性__proto__指向对象的原型

       prototype
 Foo ------------>Foo.prototype
构造函数             |
 |                  |
 |                  |
foo -------------__proto__

原型指向构造函数constructor

构造函数可以指向原型，实例也可以指向原型。由于实例是多个的，没有指向实例的情况。那么原型指向构造函数应该是有的吧？没错，prototype中就有指向构造函数的属性constructor。

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

上面的关系图更新为

       prototype
 Foo ------------>Foo.prototype
构造函数<------------|
 |      constructor |
 |                  |
foo -------------__proto__

Object.prototype——原型的终点

既然原型是指向另一个原型的，那么这个指向是否有终点？事实是有的，既然原型是一个对象，那么它就是一个通过Object构造成的实例，我们输入console.log(Foo.prototype.__proto__ === Object.prototype)返回true可以证明这一点。也就是说原型的最终指向到Object.prototype。那么Object.prototype就是终点了呢？根据前面的结论可以在浏览器中运行代码Object.prototype.__proto__看看结果是什么。在Chrome中，结果是null。也就是说到Object.prototype结束了。

       prototype
 Foo ------------>Foo.prototype
构造函数<------------|
 |      constructor |
 |                  |
foo -------------__proto__
                   ...
                    |
                    |
      prototype     |           __proto__
Object------->Object.prototype -----------> null
      <-------
     constructor

形成原型链

数据结构已经有了，接下来就是算法，也就是如果在查找属性，进而进行操作。每当要访问一个属性的时候，首先会在实例上查找，实例上没有的话，就会在该实例对应的原型的查找，递归这个操作，直到查找完Object.prototype才停止。如果在这个过程中，查询成功则返回结果，否则就返回undefined，表示没有查询到。

参考

1. JavaScript深入之从原型到原型链
2. 《你不知道的javascript（上）》