JavaScript：prototype屬性使用方法

參考：
http://bokee.shinylife.net/blog/article.asp?id=455
http://dev.csdn.net/article/84222.shtm
http://www.cnblogs.com/goody9807/archive/2007/04/16/715109.html

一、基本使用方法

prototype屬性可算是JavaScript與其他面嚮對象語言的一大不同之處。

簡而言之，prototype就是“一個給類的對象添加方法的方法”，使用prototype屬性，可以給類動態地添加方法，以便在JavaScript中實現“繼承”的效果。

具體來說，prototype 是在 IE 4 及其以後版本引入的一個針對於某一類的對象的方法，當你用prototype編寫一個類後，如果new一個新的對象，瀏覽器會自動把prototype中的內容替你附加在對象上。這樣，通過利用prototype就可以在JavaScript中實現成員函數的定義，甚至是“繼承”的效果。

一個簡單的示例如下：
Number.prototype.add = function(num){return(this+num);}

這是對已有類添加方法。這樣寫，可以增強已有類的功能，例如可以給Array類增加push方法如下：
Array.prototype.push = function(new_element){ this[this.length]=new_element; return this.length; }

對於自定義的類（或者稱函數對象），也可以這樣寫：
function MyApplication() { this.counter = 0; this.map = new GMap2(document.getElementById("map_canvas")); this.map.setCenter(new GLatLng(39.917,116.397), 14); GEvent.bind(this.map, "click", this, this.onMapClick); } MyApplication.prototype.onMapClick = function() { this.counter++; alert("這是您第 " + this.counter + " 次點擊地圖"); }
這裏定義了創建地圖的類，並且爲其定義了“單擊”事件的響應函數。

二、prototype的動態特性及弊端

需要注意的是，prototype爲我們提供了方便，使我們可以在類定義完成之後，仍可以隨時爲其添加方法、屬性，隨時添加隨時使用——也就是prototype的定義具有動態性。但是越靈活的語言出現錯誤的可能性越大。這就需要我們在使用時，必須養成一些良好的習慣。

“首先，如果可以動態添加屬性和方法，那麼很容易讓人想到，當我調用時，我想要調用的屬性或者方法存在不？這是一個很嚴肅的問題，如果當我們調用時根本沒有該屬性或者方法，將可能導致我們的腳本down掉。” 對於這個問題，在使用時我們以後可以按照下面的寫法書寫：
function MyObject(name, size) { this.name = name; this.size = size; } MyObject.prototype.height = "2.26 meters"; MyObject.prototype.tellHeight = function() { return "height of "+this.name+" is "+this.height; } ///////使用 var myobj1 = new MyObject("haha", 3); if (myobj1.tellHeight) { domDiv.innerHTML += myobj1.tellHeight()+"; }

屬性和方法在不在的問題簡單，可是屬性和方法變不變化的問題可就嚴重了。在不在我們可以檢測，變不變呢？比如，請看下面的代碼：
function MyObject(name, size) { this.name = name; this.size = size; } MyObject.prototype.color = "red"; MyObject.prototype.tellColor = function() { return "color of "+this.name+" is "+this.color; } var myobj1 = new MyObject("tiddles", "7.5 meters"); domDiv.innerHTML += myobj1.tellColor()+" "; MyObject.prototype.color = "green"; domDiv.innerHTML += myobj1.tellColor()+" ";

修改的是類MyObject的color屬性。但是你驚奇的會看到你之前實例化的對象myobj1的屬性值竟然也變化了：
color of tiddles is red
color of tiddles is green
上面是屬性，還有方法，方法也是可以變的！
function MyObject(name, size) { this.name = name; this.size = size; } MyObject.prototype.color = "red"; MyObject.prototype.tellColor = function() { return "color of "+this.name+" is "+this.color; } var myobj1 = new MyObject("tiddles", "7.5 meters"); domDiv.innerHTML += myobj1.tellColor()+" "; MyObject.prototype.color = "green"; MyObject.prototype.tellColor = function() { return "your color of "+this.name+" is "+this.color; } domDiv.innerHTML += myobj1.tellColor()+" ";

這段代碼的結果是：

color of tiddles is red
your color of tiddles is green
Java和C#這些比較嚴格的語言，雖然降低了靈活性，但也減少了犯錯誤的可能。這樣，即使一個新手，他寫出的代碼也不會與高手差太多。但是，像Javascript這樣的腳本語言，由於太靈活，所以，一定要有好的代碼編寫習慣，否則出現了上面的問題，調試時可就難咯！

三、prototype的實現機制

可以說，prototype實際上是“引用”，而非“賦值”。也就是給一個類添加一個屬性或者方法，是給它添加了個引用，而非賦值一份給它。看看下面的這個例子：
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Test "prototype"</title> <mce:script type="text/javascript"></mce:script> </head> <body> <mce:script type="text/javascript"></mce:script> </body> </html>

其執行結果是依次彈出以下窗口：
a
b
b
true
false
objB1.xx: xx, objB2.xx: xx
objB1.xx: yy, objB2.xx: yy
objB1.xx: yy, objB2.xx: zz
相關的解釋已經註釋在代碼中。從上面的代碼可以發現，prototype只是給ClassB添加了ClassA實例的引用。因此，兩個ClassB的實例中的a實例相等。

同時，ClassA的構造函數只在添加引用時被執行一次，此後ClassB的對象實例化時，只執行ClassB的構造函數。

JavaScript：prototype屬性使用方法

JavaScript中的this用法詳解（續）

Symbian OS on E65應用開發手記（1）——搭建開發環境

ASP開發環境配置——IIS配置篇

JavaScript中的function使用方法

C#中的容器們

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結