JavaScript：prototype屬性使用方法

你的財神爺發表於2017-11-28
JavaScript

一、基本使用方法

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

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

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

      一個簡單的示例如下：

[javascript] view plain copy
  1. Number.prototype.add = function(num){return(this+num);}  

這是對已有類新增方法。這樣寫，可以增強已有類的功能，例如可以給Array類增加push方法如下：

[javascript] view plain copy
  1. Array.prototype.push = function(new_element){  
  2.         this[this.length]=new_element;  
  3.         return this.length;  
  4.     }  

對於自定義的類（或者稱函式物件），也可以這樣寫：

[c-sharp] view plain copy
  1. function MyApplication() {  
  2.     this.counter = 0;  
  3.     this.map = new GMap2(document.getElementById("map_canvas"));  
  4.       this.map.setCenter(new GLatLng(39.917,116.397), 14);  
  5.       GEvent.bind(this.map, "click", this, this.onMapClick);  
  6.     }  
  7.           
  8.     MyApplication.prototype.onMapClick = function() {  
  9.       this.counter++;  
  10.       alert("這是您第 " + this.counter + " 次點選地圖");  
  11.     }  

這裡定義了建立地圖的類，並且為其定義了“單擊”事件的響應函式。

二、prototype的動態特性及弊端

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

      “首先，如果可以動態新增屬性和方法，那麼很容易讓人想到，當我呼叫時，我想要呼叫的屬性或者方法存在不？這是一個很嚴肅的問題，如果當我們呼叫時根本沒有該屬性或者方法，將可能導致我們的指令碼down掉。” 對於這個問題，在使用時我們以後可以按照下面的寫法書寫：

[javascript] view plain copy
  1.  function MyObject(name, size)  
  2.  {  
  3.     this.name = name;  
  4.     this.size = size;  
  5.  }  
  6.   
  7.  MyObject.prototype.height = "2.26 meters";  
  8.  MyObject.prototype.tellHeight = function()  
  9.  {  
  10.     return "height of "+this.name+" is "+this.height;  
  11.  }  
  12.   
  13. ///////使用  
  14. var myobj1 = new MyObject("haha", 3);  
  15. if (myobj1.tellHeight)  
  16. {  
  17.     domDiv.innerHTML += myobj1.tellHeight()+";  
  18. }  

       屬性和方法在不在的問題簡單，可是屬性和方法變不變化的問題可就嚴重了。在不在我們可以檢測，變不變呢？比如，請看下面的程式碼：

[c-sharp] view plain copy
  1. function MyObject(name, size)  
  2. {  
  3.     this.name = name;  
  4.     this.size = size;  
  5. }  
  6.   
  7. MyObject.prototype.color = "red";  
  8. MyObject.prototype.tellColor = function()  
  9. {  
  10.     return "color of "+this.name+" is "+this.color;  
  11. }  
  12.   
  13. var myobj1 = new MyObject("tiddles", "7.5 meters");  
  14. domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";  
  15.   
  16.          
  17.   
  18.        MyObject.prototype.color = "green";  
  19.   
  20.          
  21.   
  22.        domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";  

修改的是類MyObject的color屬性。但是你驚奇的會看到你之前例項化的物件myobj1的屬性值竟然也變化了：
color of tiddles is red
color of tiddles is green
上面是屬性，還有方法，方法也是可以變的！

[javascript] view plain copy
  1. function MyObject(name, size)  
  2. {  
  3.     this.name = name;  
  4.     this.size = size;  
  5. }  
  6.   
  7. MyObject.prototype.color = "red";  
  8. MyObject.prototype.tellColor = function()  
  9. {  
  10.     return "color of "+this.name+" is "+this.color;  
  11. }  
  12.   
  13. var myobj1 = new MyObject("tiddles", "7.5 meters");  
  14. domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";  
  15.   
  16. MyObject.prototype.color = "green";  
  17. MyObject.prototype.tellColor = function()  
  18. {  
  19.     return "your color of "+this.name+" is "+this.color;  
  20. }  
  21.   
  22. domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";  


這段程式碼的結果是：

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

三、prototype的實現機制

可以說，prototype實際上是“引用”，而非“賦值”。也就是給一個類新增一個屬性或者方法，是給它新增了個引用，而非賦值一份給它。看看下面的這個例子：

[javascript] view plain copy
  1. <html>  
  2. <head>  
  3. <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>  
  4. <title>Test "prototype"</title>  
  5. <mce:script type="text/javascript"><!--  
  6.         function ClassA()  
  7.         {  
  8.             alert("a");  
  9.             this.a=function(){alert();};  
  10.         }  
  11.         function ClassB()  
  12.         {  
  13.             alert("b");  
  14.             this.b=function(){alert();};  
  15.         }  
  16.   
  17.         ClassB.prototype.a=new ClassA();        //會導致彈出 a 對話方塊  
  18.         ClassB.prototype.xx = "xx";  
  19.           
  20.         function initialize()  
  21.         {  
  22.             var objB1=new ClassB();                 //彈出 b 對話方塊  
  23.             var objB2=new ClassB();                 //彈出 b 對話方塊  
  24.             alert(objB1.a==objB2.a);                    //true  
  25.             alert(objB1.b==objB2.b);                //false  
  26.             alert("objB1.xx: " + objB1.xx + ", objB2.xx: " + objB2.xx); //objB1.xx: xx, objB2.xx: xx  
  27.             ClassB.prototype.xx = "yy";  
  28.             alert("objB1.xx: " + objB1.xx + ", objB2.xx: " + objB2.xx); //objB1.xx: yy, objB2.xx: yy  
  29.             objB2.xx = "zz";  
  30.             alert("objB1.xx: " + objB1.xx + ", objB2.xx: " + objB2.xx); //objB1.xx: yy, objB2.xx: zz  
  31.         }  
  32.       
  33. // --></mce:script>  
  34. </head>  
  35. <body>  
  36. <mce:script type="text/javascript"><!--  
  37.         initialize();  
  38.       
  39. // --></mce:script>  
  40. </body>  
  41. </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的建構函式。

相關文章