prototype 原型链
一、prototype 由来
我一直很难理解Javascript语言的继承机制，它没有"子类"和"父类"的概念，也没有"类"（class）和"实例"（instance）的区分，全靠一种很奇特的"原型链"（prototype chain）模式，来实现继承。
如果真的是一种简易的脚本语言，其实不需要有"继承"机制。但是，Javascript里面都是对象，必须有一种机制，将所有对象联系起来。所以，Brendan Eich最后还是设计了"继承"。但是，他不打算引入"类"（class）的概念，因为一旦有了"类"，Javascript就是一种完整的面向对象编程语言了，这好像有点太正式了，而且增加了初学者的入门难度。
他考虑到，C++和Java语言都使用new命令，生成实例。
C++的写法是：
ClassName *object = new ClassName(param);
Java的写法是：
Foo foo = new Foo();
因此，他就把new命令引入了Javascript，用来从原型对象生成一个实例对象。但是，Javascript没有"类"，怎么来表示原型对象呢？
这时，他想到C++和Java使用new命令时，都会调用"类"的构造函数（constructor）。他就做了一个简化的设计，在Javascript语言中，new命令后面跟的不是类，而是构造函数。
举例来说，现在有一个叫做DOG的构造函数，表示狗对象的原型。
function DOG(name) { this.name = name; }
对这个构造函数使用new，就会生成一个狗对象的实例。
var dogA = new DOG('大毛'); alert(dogA.name); //大毛
注意构造函数中的this关键字，它就代表了新创建的实例对象。用构造函数生成实例对象，有一个缺点，那就是无法共享属性和方法。
比如，在DOG对象的构造函数中，设置一个实例对象的共有属性species。
function DOG(name) { this.name = name; this.species = '犬科'; }
然后，生成两个实例对象：
var dogA = new DOG('大毛'); var dogB = new DOG('二毛');
这两个对象的species属性是独立的，修改其中一个，不会影响到另一个。
dogA.species = '猫科'; alert(dogB.species); //显示"犬科"，不受dogA的影响
每一个实例对象，都有自己的属性和方法的副本。这不仅无法做到数据共享，也是极大的资源浪费。
考虑到这一点，Brendan Eich决定为构造函数设置一个prototype属性。
这个属性包含一个对象（以下简称"prototype对象"），所有实例对象需要共享的属性和方法，都放在这个对象里面；那些不需要共享的属性和方法，就放在构造函数里面。
实例对象一旦创建，将自动引用prototype对象的属性和方法。也就是说，实例对象的属性和方法，分成两种，一种是本地的，另一种是引用的。
还是以DOG构造函数为例，现在用prototype属性进行改写：
function DOG(name) { this.name = name; } DOG.prototype = { species : '犬科' }; var dogA = new DOG('大毛'); var dogB = new DOG('二毛'); alert(dogA.species); //犬科 alert(dogB.species); //犬科
现在，species属性放在prototype对象里，是两个实例对象共享的。只要修改了prototype对象，就会同时影响到两个实例对象。
DOG.prototype.species = '猫科'; alert(dogA.species); //猫科 alert(dogB.species); //猫科
二、 Laruence 讲 Javascript 原型链和原型的一个误区
之前我对Javascript的原型链中,，原型继承与标识符查找有些迷惑，如如下的代码：
function Foo() {}; var foo = new Foo(); Foo.prototype.label = "laruence"; alert(foo.label); //output: laruence alert(Foo.label);//output: undefined
也就是说， 函数对象的prototype并不作用于原型链查找过程中，
今天在firefox下发现(因为firefox通过__proto__暴露了[[prototype]])， 真正参与标识符查找的是函数对象的__proto__
function Foo() {}; var foo = new Foo(); Foo.__proto__.label = "laruence"; alert(Foo.label); //output: laruence alert(foo.label); //output: undefined
而，显然的：
function Foo() {}; alert(Foo.__proto__ === Foo.prototype); //output: false
另外，也解释了：
alert(Object.forEach); //undefined Function.prototype.forEach = function(object, block, context) { for (var key in object) { if (typeof this.prototype[key] == "undefined") { block.call(context, object[key], key, object); } } }; alert(Object.forEach); alert(Function.forEach); alert(Object.forEach === Function.forEach); //true
三、new的过程
我们先看看这样一段代码：
<script type="text/javascript"> var Person = function () { }; var p = new Person(); </script>
很简单的一段代码，我们来看看这个new究竟做了什么？我们可以把new的过程拆分成以下三步：
<1> var p = {}; 也就是说，初始化一个对象p。
<2> p.__proto__ = Person.prototype;
<3> Person.call(p); 也就是说构造p，也可以称之为初始化p。
关键在于第二步，我们来证明一下：
<script type="text/javascript"> var Person = function () { }; var p = new Person(); alert(p.__proto__ === Person.prototype); </script>
这段代码会返回true。说明我们步骤2的正确。
__proto__是什么？
我们在这里简单地说下。每个对象都会在其内部初始化一个属性，就是__proto__，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去__proto__里找这个属性，这个__proto__又会有自己的__proto__，于是就这样一直找下去，也就是我们平时所说的原型链的概念。
按照标准，__proto__是不对外公开的，也就是说是个私有属性，但是Firefox的引擎将他暴露了出来成为了一个共有的属性，我们可以对外访问和设置。
好，概念说清了，让我们看一下下面这些代码：
<script type="text/javascript"> var Person = function () { }; Person.prototype.Say = function () { alert("Person say"); } var p = new Person(); p.Say(); </script>
这段代码很简单，相信每个人都这样写过，那就让我们看下为什么p可以访问Person的Say。
首先var p=new Person()；可以得出p.__proto__=Person.prototype。那么当我们调用p.Say()时，首先p中没有Say这个属性，于是，他就需要到他的__proto__中去找，也就是Person.prototype，而我们在上面定义了Person.prototype.Say=function(){}; 于是，就找到了这个方法。
好，接下来，让我们看个更复杂的。
<script type="text/javascript"> var Person = function () { }; Person.prototype.Say = function () { alert("Person say"); } Person.prototype.Salary = 50000; var Programmer = function () { }; Programmer.prototype = new Person(); Programmer.prototype.WriteCode = function () { alert("programmer writes code"); }; Programmer.prototype.Salary = 500; var p = new Programmer(); p.Say(); p.WriteCode(); alert(p.Salary); </script>
我们来做这样的推导：
var p=new Programmer()可以得出p.__proto__=Programmer.prototype;
而在上面我们指定了Programmer.prototype=new Person();我们来这样拆分，var p1=new Person();Programmer.prototype=p1;
那么:
p1.__proto__=Person.prototype;
Programmer.prototype.__proto__=Person.prototype;
由根据上面得到p.__proto__=Programmer.prototype。可以得到p.__proto__.__proto__=Person.prototype。
好，算清楚了之后我们来看上面的结果,p.Say()。由于p没有Say这个属性，于是去p.__proto__，也就是Programmer.prototype，也就是p1中去找，由于p1中也没有Say，那就去p.__proto__.__proto__，也就是Person.prototype中去找，于是就找到了alert(“Person say”)的方法。
其余的也都是同样的道理。
这也就是原型链的实现原理。
最后，其实prototype只是一个假象，他在实现原型链中只是起到了一个辅助作用，换句话说，他只是在new的时候有着一定的价值，而原型链的本质，其实在于__proto__！
四、prototype 实例详解
JavaScript是基于对象的，任何元素都可以看成对象。
| 例子代码 | 说明 | |
| 1 |
Object.prototype.Property = 1;
Object.prototype.Method = function () { alert(1);
}
var obj = new Object();
alert(obj.Property);
obj.Method();
|
可以在类型上使用proptotype来为类型添加行为。这些行为只能在类型的实例上体现。 JS中允许的类型有Array, Boolean, Date, Enumerator, Error, Function, Number, Object, RegExp, String |
| 2 |
var obj = new Object();
obj.prototype.Property = 1; //Error obj.prototype.Method = function() { //Error
alert(1);
}
|
在实例上不能使用prototype，否则发生编译错误 |
| 3 |
Object.Property = 1;
Object.Method = function() {
alert(1);
}
alert(Object.Property);
Object.Method();
|
可以为类型定义“静态”的属性和方法，直接在类型上调用即可 |
| 4 |
Object.Property = 1;
Object.Method = function() {
alert(1);
}
var obj = new Object();
alert(obj.Property); //Error
obj.Method(); //Error
|
实例不能调用类型的静态属性或方法，否则发生对象未定义的错误。 |
| 5 |
function Aclass() {
this.Property = 1; this.Method = function() { alert(1);
} }
var obj = new Aclass();
alert(obj.Property);
obj.Method();
|
这个例子演示了通常的在JavaScript中定义一个类型的方法 |
| 6 |
function Aclass() {
this.Property = 1; this.Method = function() { alert(1);
} }
Aclass.prototype.Property2 = 2;
Aclass.prototype.Method2 = function {
alert(2);
}
var obj = new Aclass();
alert(obj.Property2);
obj.Method2();
|
可以在外部使用prototype为自定义的类型添加属性和方法。 |
| 7 |
function Aclass() {
this.Property = 1; this.Method = function() { alert(1);
} }
Aclass.prototype.Property = 2;
Aclass.prototype.Method = function() {
alert(2);
}
var obj = new Aclass();
alert(obj.Property);
obj.Method();
|
在外部不能通过prototype改变自定义类型的属性或方法。
该例子可以看到：调用的属性和方法仍是最初定义的结果。
|
| 8 |
function Aclass() {
this.Property = 1; this.Method = function() { alert(1); } }
var obj = new Aclass();
obj.Property = 2;
obj.Method = function() {
alert(2);
}
alert(obj.Property);
obj.Method();
|
可以在对象上改变属性。（这个是肯定的）
也可以在对象上改变方法。（和普遍的面向对象的概念不同）
|
| 9 |
function Aclass() {
this.Property = 1; this.Method = function() { alert(1);
} }
var obj = new Aclass();
obj.Property2 = 2;
obj.Method2 = function() {
alert(2);
}
alert(obj.Property2);
obj.Method2();
|
可以在对象上增加属性或方法 |
| 10 |
function AClass() {
this.Property = 1;
this.Method = function() { alert(1);
}
}
function AClass2() {
this.Property2 = 2;
this.Method2 = function() {
alert(2);
}
}
AClass2.prototype = new AClass();
var obj = new AClass2();
alert(obj.Property);
obj.Method();
alert(obj.Property2);
obj.Method2();
|
这个例子说明了一个类型如何从另一个类型继承。 |
| 11 |
function AClass() {
this.Property = 1;
this.Method = function() { alert(1);
}
}
function AClass2() {
this.Property2 = 2;
this.Method2 = function() {
alert(2);
}
}
AClass2.prototype = new AClass();
AClass2.prototype.Property = 3;
AClass2.prototype.Method = function() {
alert(4);
}
var obj = new AClass2();
alert(obj.Property);
obj.Method();
|
这个例子说明了子类如何重写父类的属性或方法。 |
可见JavaScript能够实现的面向对象的特征有：
- 公有属性(public field)
- 公有方法(public Method)
- 私有属性(private field)
- 私有方法(private field)
- 方法重载(method overload)
- 构造函数(constructor)
- 事件(event)
- 单一继承(single inherit)
- 子类重写父类的属性或方法(override)
- 静态属性或方法(static member)
参考：http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html
http://hi.baidu.com/fegro/item/be0576940c77b5b083d29592
http://blog.csdn.net/chaojie2009/article/details/6719353
http://www.laruence.com/2010/05/13/1462.html
