JaveScript中的幾個關鍵概念的理解-原型鏈的構建

Javascript中所有function中都有一個prototype屬性，並且這個prototype屬性是一個object類型的對象，所有由該function構造出來的對象都具有這個prototype上的特性，也就是說可以用構造出來的對象直接存取prototype上的屬性和方法。
下面一段代碼示範prototype的使用方法：
複製代碼 代碼如下:
function Staff(name) {
this.name = name;
}
Staff.prototype.say = function() {
alert(this.name + " say hello");
}
var staff1 = new Staff("hunter");
var staff2 = new Staff("dangjian");
staff1.say();
staff2.say();

運行如上的程式，可知prototype上的屬性和方法可以通過建立的對象之間調用，更重要的是prototype中的屬性和方法是在同類型的對象中是共用的
複製代碼 代碼如下:alert( staff1.say == staff2.say);

prototype另外一個常用的特性是通過prototype構建對象的繼承關係，通過把基類對象賦給子類的prototype的方式可以類比物件導向中的繼承關係，這就是大家經常說的JavaScript的物件導向機制。如下的程式碼片段示範了利用這一特性構建對象的繼承關係:
複製代碼 代碼如下:
function Staff(name) { // 基類
this.name = name;
}
Staff.prototype.say = function() {
alert(this.name + " say hello");
}
function ManStaff(name, age) { // 子類
this.name = name;
this.age = age;
}
ManStaff.prototype = new Staff(); // 建立繼承關係
var manStaff1 = new ManStaff("hunter", 22);
var manStaff2 = new ManStaff("dangjian", 32);
manStaff1.say();
manStaff2.say();

運行代碼可知，ManStaff對象中具有了基類Staff中的Say方法，這種繼承方式在JavaScript中是通過prototype鏈來實現的。大家可能熟悉以上的prototype用法，可是作為程式員，我們不光要知道其用法，我們更應該理解其可是prototype的內部機制。下面我們來分析prototype的原理以及prototype鏈的實現。
要理解prototype的機制就必須要瞭解JavaScript中function的建立方式。
當代碼執行到function Staff(name) {this.name = name;}時，相當於執行var Staff = new Function(“name”, "this.name = name”)解譯器將使用預定義好的Function() constructor，來建立一個function類型的object出來，即Staff。

隨後給建立好的Staff對象添加__proto__屬性，並賦值為Function的構造器的prototype，這一步是所有對象建立過程中都有的步驟，在執行類似var x = new X()方式是，都會把X的prototype賦值給x的__proto__，類似如下的賦值：
複製代碼 代碼如下:
Staff.__proto__ = Function.prototype;

接下來給Staff建立prototype屬性，這一步是建立function類型的對象具有的步驟，建立的過程如下虛擬碼：
複製代碼 代碼如下:
var o = new Object();
o.constructor = Base;
Staff.prototype = o;

如上的分析我們可知，當建立對象時，會建立一個私人屬性__proto__，當建立function是會建立一個prototype屬性。因為Staff是一個function類型的對象，所以會同時具有這兩個屬性。
這兩個屬性是構建原型鏈的關鍵屬性。我們來分析執行代碼 var staff1 = new Staff(“hunter”)時，原型是如何傳遞的。
根據如上分析，staff1.__proto__ = Staff.prototype，而Staff.prototype又是一個由Object建立的對象，即Staff.prototype.__proto__ = Object.prototype，所以staff1.__proto__ .__proto__ 指向的是Object.prototype，即staff1.__proto__ .__proto__ == Object.prototype，這就是原型鏈，當要讀取某個對象的屬性時，JS首先找對象本身是否有這個屬性，如果沒有就會順著原型鏈一直尋找這個屬性。
知道了原型鏈的原理，那麼就很容易根據這個原理來構建Javascript中的對象繼承。
由如上的分析，我們可知原型鏈的頂端都是Object.prototype，這就意味著在構建的繼承關係中Object是所有對象的基類，可以運行如下的代碼驗證。
複製代碼 代碼如下:
Object.prototype.location = "China";
function Staff(name) { // 基類
this.name = name;
}
Staff.prototype.say = function() {
alert(this.name + " say hello");
}
var ManStaff1 = new Staff("hunter");
var ManStaff2 = new Staff("dangjian");
alert(ManStaff1.location);
alert(ManStaff2.location);

運行結果知道，Object是Staff的基類，那麼要如何構建一個Staff的子類呢？
理解了上面函數的建立原理，我們很容易寫出如下的代碼：
複製代碼 代碼如下:
function Staff(name) { // 基類
this.name = name;
}
Staff.prototype.say = function() {
alert(this.name + " say hello");
}
function ManStaff(name, age) { // 子類
Staff.call(this,name);
this.age = age;
}
ManStaff.prototype = new Staff(); // 建立繼承關係
var ManStaff1 = new ManStaff("hunter", 22);
var ManStaff2 = new ManStaff("dangjian", 32);
ManStaff1.say();
ManStaff2.say();

建立繼承關係的就是這句：ManStaff.prototype = new Staff(); ，繼承關係推算如下：ManStaff1.__proto__ = =ManStaff.prototype， ManStaff.prototype.__proto__ = Staff.prototype, Staff.prototype.__proto__ == Object.prototype；則ManStaff1.__proto__.__proto__.__proto__ == Object.prototype。
javascript中的這種繼承關係比較傳統物件導向的繼承關係更鬆散，構建方式也比較難以理解，但是作為指令碼語言，其功能已經是非常強大了。