編輯“通過prototype屬性建立面向?qū)ο蟮腏avaScript”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>導(dǎo)航:</strong> [[Ajax學(xué)習(xí)教程#Ajax學(xué)習(xí)教程|上一頁]] | {{template:開發(fā)語言導(dǎo)航}}</span>
<div style="clear:both;"></div>

JavaScript通過一種鏈接機(jī)制來支持繼承，而不是通過完全面向?qū)ο笳Z言（如Java）所支持的基于類的繼承模型。每個JavaScript對象都有一個內(nèi)置的屬性，名為prototype。prototype屬性保存著對另一個JavaScript對象的引用，這個對象作為當(dāng)前對象的父對象。 <br>

當(dāng)通過點(diǎn)記法引用對象的一個函數(shù)或?qū)傩詴r，倘若對象上沒有這個函數(shù)或?qū)傩裕藭r就會使用對象的prototype屬性。當(dāng)出現(xiàn)這種情況時，將檢查對象prototype屬性所引用的對象，查看是否有所請求的屬性或函數(shù)。如果prototype屬性引用的對象也沒有所需的函數(shù)或?qū)傩?，則會進(jìn)一步檢查這個對象（prototype屬性引用的對象）的prototype屬性，依次沿著鏈向上查找，直到找到所請求的函數(shù)或?qū)傩?，或者到達(dá)鏈尾，如果已經(jīng)到達(dá)鏈尾還沒有找到，則返回undefined。從這個意義上講，這種繼承結(jié)構(gòu)更應(yīng)是一種“has a”關(guān)系，而不是“is a”關(guān)系。<br>

如果你習(xí)慣于基于類的繼承機(jī)制，那么可能要花一些時間來熟悉這種prototype機(jī)制。prototype機(jī)制是動態(tài)的，可以根據(jù)需要在運(yùn)行時配置，而無需重新編譯。你可以只在需要時才向?qū)ο笤黾訉傩院秃瘮?shù)，而且能動態(tài)地把單獨(dú)的函數(shù)合并在一起，來創(chuàng)建動態(tài)、全能的對象。對prototype機(jī)制的這種高度動態(tài)性可謂褒貶不一，因?yàn)檫@種機(jī)制學(xué)習(xí)和應(yīng)用起來很不容易，但是一旦正確地加以應(yīng)用，這種機(jī)制則相當(dāng)強(qiáng)大而且非常健壯。<br>

這種動態(tài)性與基于類的繼承機(jī)制中的多態(tài)概念異曲同工。兩個對象可以有相同的屬性和函數(shù)，但是函數(shù)方法（實(shí)現(xiàn)）可以完全不同，而且屬性可以支持完全不同的數(shù)據(jù)類型。這種多態(tài)性使得JavaScript對象能夠由其他腳本和函數(shù)以統(tǒng)一的方式處理。<br>

圖5-15顯示了實(shí)際的prototype繼承機(jī)制。這個腳本定義了3類對象：Vehicle、Sports-
Car和CementTruck。Vehicle是基類，另外兩個類由此繼承。Vehicle定義了兩個屬性：wheelCount和curbWeightInPounds，分別表示Vehicle的車輪數(shù)和總重量。JavaScript不支持抽象類的概念（抽象類不能實(shí)例化，只能由其他類擴(kuò)展），因此，對于Vehicle基類，wheelCount默認(rèn)為4，curbWeightInPounds默認(rèn)為3 000。<br>

[[Image:image0150.jpg]]

圖5-15　Vehicle、SportsCar和CementTruck對象之間的關(guān)系<br>

注意，這個UML圖展示了SportsCar和CementTruck對象覆蓋了Vehicle的refuel和mainTasks函數(shù)，因?yàn)橐话愕腣ehicle、SportsCar（賽車）和CementTruck（水泥車）會以不同的方式完成這些任務(wù)。SportsCar與Vehicle的車輪數(shù)相同，所以SportsCar的wheelCount屬性不會覆蓋Vehicle的wheelCount屬性。CementTruck的車輪數(shù)和重量都超過了Vehicle，所以CementTruck的wheelCount和curbWeightInPounds屬性要覆蓋Vehicle的相應(yīng)屬性。<br>

代碼清單5-2包含了定義這3個類的JavaScript代碼。要特別注意如何在對象定義中對屬性和函數(shù)附加prototype關(guān)鍵字，還要注意每個對象由一個構(gòu)造函數(shù)定義，構(gòu)造函數(shù)與對象類型同名。<br>

代碼清單5-2　
 inheritanceViaPrototype.js<br>
 /* Constructor function for the Vehicle object */<br>
 function Vehicle() { }<br>
 /* Standard properties of a Vehicle */<br>
 Vehicle.prototype.wheelCount = 4;<br>
 Vehicle.prototype.curbWeightInPounds = 4000;<br>
 /* Function for refueling a Vehicle */<br>
 Vehicle.prototype.refuel = function() {<br>
    return "Refueling Vehicle with regular 87 octane gasoline";<br>
 }<br>
 /* Function for performing the main tasks of a Vehicle */<br>
 Vehicle.prototype.mainTasks = function() {<br>
    return "Driving to work, school, and the grocery store";<br>
 }<br>
 /* Constructor function for the SportsCar object */<br>
 function SportsCar() { }<br>
 /* SportsCar extends Vehicle */<br>
 SportsCar.prototype = new Vehicle();<br>
 /* SportsCar is lighter than Vehicle */<br>
 SportsCar.prototype.curbWeightInPounds = 3000;<br>
 /* SportsCar requires premium fuel */<br>
 SportsCar.prototype.refuel = function() {<br>
    return "Refueling SportsCar with premium 94 octane gasoline";<br>
 }<br>
 /* Function for performing the main tasks of a SportsCar */<br>
 SportsCar.prototype.mainTasks = function() {<br>
    return "Spirited driving, looking good, driving to the beach";<br>
 }<br>
 /* Constructor function for the CementTruck object */<br>
 function CementTruck() { }<br>
 /* CementTruck extends Vehicle */<br>
 CementTruck.prototype = new Vehicle();<br>
 /* CementTruck has 10 wheels and weighs 12,000 pounds*/<br>
 CementTruck.prototype.wheelCount = 10;<br>
 CementTruck.prototype.curbWeightInPounds = 12000;<br>
 /* CementTruck refuels with diesel fuel */<br>
 CementTruck.prototype.refuel = function() {<br>
    return "Refueling CementTruck with diesel fuel";<br>
 }<br>
 /* Function for performing the main tasks of a SportsCar */<br>
 CementTruck.prototype.mainTasks = function() {<br>
    return "Arrive at construction site, extend boom, deliver cement";<br>
 }<br>

代碼清單5-3是一個很小的Web頁面，展示了這3個對象的繼承機(jī)制。這個頁面只包含3個按鈕，每個按鈕創(chuàng)建一個類型的對象（Vehicle、SportsCar或CementTruck），并把對象傳遞到describe函數(shù)。describe函數(shù)負(fù)責(zé)顯示各個對象的屬性值，以及對象函數(shù)的返回值。注意，describe方法并不知道它描述的對象是Vehicle、SportsCar，還是CementTruck，它只是認(rèn)為這個對象有適當(dāng)?shù)膶傩院秃瘮?shù)，并由這個對象返回自己的值。<br>

代碼清單5-3　
 inheritanceViaPrototype.html<br>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br>
  <nowiki>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></nowiki><br>
 <nowiki><html xmlns="http://www.w3.org/1999/xhtml"></nowiki><br>
 <head><br>
 <title>JavaScript Inheritance via Prototype</title><br>
 <script type="text/javascript" src="inheritanceViaPrototype.js"></script><br>
 <script type="text/javaScript"><br>
 function describe(vehicle) {<br>
    var description = "";<br>
    description = description + "Number of wheels: " + vehicle.wheelCount;<br>
    description = description + "\n\nCurb Weight: " + vehicle.curbWeightInPounds;<br>
    description = description + "\n\nRefueling Method: " + vehicle.refuel();<br>
    description = description + "\n\nMain Tasks: " + vehicle.mainTasks();<br>
    alert(description);<br>
 }<br>
 function createVehicle() {<br>
    var vehicle = new Vehicle();<br>
    describe(vehicle);<br>
 }<br>
 function createSportsCar() {<br>
    var sportsCar = new SportsCar();<br>
    describe(sportsCar);<br>
 }<br>
 function createCementTruck() {<br>
    var cementTruck = new CementTruck();<br>
    describe(cementTruck);<br>
 }<br>
 </script><br>
 </head><br>
 <body><br>
  <nowiki> <h1>Examples of JavaScript Inheritance via the Prototype Method</h1></nowiki><br>
  <nowiki><br/><br/></nowiki><br>
  <nowiki><button onclick="createVehicle();">Create an instance of Vehicle</button></nowiki><br>
  <nowiki><br/><br/></nowiki><br>
  <nowiki><button onclick="createSportsCar();">Create an instance of SportsCar</button></nowiki><br>
  <nowiki><br/><br/></nowiki><br>
  <nowiki><button onclick="createCementTruck();">Create an instance of CementTruck</button></nowiki><br>
 </body><br>
 </html><br>

分別創(chuàng)建3個對象，并用describe函數(shù)描述，結(jié)果如圖5-16所示。<br>

[[Image:image0160.jpg]]

圖5-16　創(chuàng)建Vehicle、SportsCar和CementTruck 對象并使用describe函數(shù)分別描述的結(jié)果<br>
[[category:Ajax]]