DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JaveScript中的幾個關鍵概念的理解-原型鏈的構建
JaveScript中的幾個關鍵概念的理解-原型鏈的構建
編輯:關於JavaScript     
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中的這種繼承關系比較傳統面向對象的繼承關系更松散,構建方式也比較難以理解,但是作為腳本語言,其功能已經是非常強大了。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved