深刻理解JavaScript系列（10）：JavaScript核心（晉級高手必讀篇）

原型鏈

 1 //prototype-chain  原型鏈--共用--繼承
 2 var a = {
 3    x : 15,
 4    caculate : function(z){
 5        return this.x + this.y + z;
 6    }
 7 };
 8 
 9 var b = {
10     y : 5 ,
11     z : 20 ,
12     __proto__ : a
13};
14 
15 var c = {
16     y : 5 ,
17     z : 20 ,
18      __proto__ : a
19 };
20 
21 //調用繼承過來的方法
22 a.caculate(22);    

說明：this這個值在一個繼承機制中，仍然是指向它本來屬於的對象，而不是從原型鏈上找到它時，它所屬於的對象。例如，以上的例子，this.y是從b和c中獲取的，而不是a。固然，你也發現了this.x是從a取的，由於是經過原型鏈機制找到的。

原型鏈一般將會在這樣的狀況下使用：對象擁有 相同或類似的狀態結構(same or similar state structure) （即相同的屬性集合）與 不一樣的狀態值(different state values)。在這種狀況下，咱們可使用 構造函數(Constructor) 在 特定模式(specified pattern) 下建立對象。

 1 // 構造函數
 2 function Foo(y) {
 3   // 構造函數將會以特定模式建立對象：被建立的對象都會有"y"屬性
 4   this.y = y;
 5 }
 6  
 7 // "Foo.prototype"存放了新建對象的原型引用
 8 // 因此咱們能夠將之用於定義繼承和共享屬性或方法
 9 // 因此，和上例同樣，咱們有了以下代碼：
10  
11 // 繼承屬性"x"
12 Foo.prototype.x = 10;
13  
14 // 繼承方法"calculate"
15 Foo.prototype.calculate = function (z) {
16   return this.x + this.y + z;
17 };
18  
19 // 使用foo模式建立 "b" and "c"
20 var b = new Foo(20);
21 var c = new Foo(30);
22  
23 // 調用繼承的方法
24 b.calculate(30); // 60
25 c.calculate(40); // 80
26  
27 // 讓咱們看看是否使用了預期的屬性
28  
29 console.log(
30  
31   b.__proto__ === Foo.prototype, // true
32   c.__proto__ === Foo.prototype, // true
33  
34   // "Foo.prototype"自動建立了一個特殊的屬性"constructor"
35   // 指向a的構造函數自己
36   // 實例"b"和"c"能夠經過受權找到它並用以檢測本身的構造函數
37  
38   b.constructor === Foo, // true
39   c.constructor === Foo, // true
40   Foo.prototype.constructor === Foo // true
41  
42   b.calculate === b.__proto__.calculate, // true
43   b.__proto__.calculate === Foo.prototype.calculate // true
44  
45 );

文章源自Tom大叔博客JavaScript核心篇  http://www.cnblogs.com/TomXu/archive/2012/01/12/2308594.html