DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> (Javascript)prototype的一個優勢也是缺點
(Javascript)prototype的一個優勢也是缺點
編輯:AJAX詳解     

如何在Javascript實現OO編程?恐怕最好的方式就是充分利用prototype屬性。關於prototype的介紹有很多,我就不贅述了。比較基本的原理是,當你用prototype編寫一個類後,當你new一個新的object,浏覽器會自動把prototype中的內容替你附加在object上。這樣,通過利用prototype,你也就實現了類似OO的Javascript。

在Javascript中,object就是一個associative array。一個function就是一個類。當你編寫如下function時,其實就是定義了一個類,該function就是它的構造函數。

function MyObject(name, size)

       {

              this.name = name;

              this.size = size;

       }

之後,你可以方便的通過MyObject類的prototype屬性來方便的擴充它。比如,你可以給他添加其他的屬性和方法。

       MyObject.prototype.tellSize = function()

       {

              return "size of "+this.name+" is "+this.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()+"<br /><br />";

你可以想象,當你調用tellColor()方法後,結果是這樣的:

color of tiddles is red

很方便的是,prototype屬性可以動態添加。比如,你需要往MyObject中加入一個height屬性,並希望其提供一個tellHeight()方法來獲得height屬性的值。你可以在上面的代碼後,繼續添加如下的代碼:

       MyObject.prototype.height = "2.26 meters";

       MyObject.prototype.tellHeight = function()

       {

              return "height of "+this.name+" is "+this.height;

       }

之後,你可以訪問一下myobj1的tellHeight()方法,你可以得到如下的結果:

height of tiddles is 2.26 meters

prototype的這些動態的特性看起來有些迷人,不過我倒是反而覺得有些涼飕飕的。確實,這些特性給你很大的靈活性,可以給與你runtime改變類屬性和方法的能力。不過,稍微發掘一下,會有些不良的習慣產生。

首先,如果可以動態添加屬性和方法,那麼很容易讓人想到,當我調用時,我想要調用的屬性或者方法存在不?這是一個很嚴肅的問題,如果當我們調用時根本沒有該屬性或者方法,將可能導致我們的腳本down掉。

不過也有解決辦法。比如,在上面的代碼中,當還沒有tellHeight()方法時,我們可以如下編寫代碼避免發生錯誤:

       if (myobj1.tellHeight)

       {

              domDiv.innerHtml += myobj1.tellHeight()+"<br /><br />";

       }

注意,一定要在if語句中,不要加方法後面的那對(),否則,直接就down掉了。有興趣的讀者可以打印一下,看看分別訪問myobj1.tellHeight和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()+"<br /><br />";

      

       MyObject.prototype.color = "green";

      

       domDiv.innerHtml += myobj1.tellColor()+"<br /><br />";

該代碼將產生如下結果:

color of tiddles is red
color of tiddles is green

請注意,你修改的是類MyObject的color屬性。但是你驚奇的看到你之前實例化的對象myobj1的屬性值竟然也變化了。天!如果你的項目代碼是多人合作,那麼,也許某個人會在編程時為了圖一己之便,擅自修改你的類。於是,所有人的對象都變化了。於是,你們陷入了漫長的debug過程中。。。。。。(不要說我沒有告訴你啊)

上面是屬性,還有方法:

       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()+"<br /><br />";

      

       MyObject.prototype.color = "green";

       MyObject.prototype.tellColor = function()

       {

              return "your color of "+this.name+" is "+this.color;

       }

      

       domDiv.innerHtml += myobj1.tellColor()+"<br /><br />";

這段代碼的結果是:

color of tiddles is red
your color of tiddles is green

哈?原來方法也能變,汗!

問題來了。Javascript太靈活的編程方式多少讓人不適應。如果整個Team的水平都比較高還可以,沒人會犯這樣的錯誤。但是,當有個毛頭小伙子不知情,擅自修改類,將導致所有的人的對象都發生變化,無論是屬性還是方法。在Javascript代碼變得越來越多的AJax時代,這是一個嚴重的問題。

這說明,編寫Javascript時,好的編程風格更加重要。記得某人曾經說過這樣的話,想Java和C#這些比較嚴格的語言,雖然降低了靈活性,但也減少了犯錯誤的可能。這樣,即使一個新手,他寫出的代碼也不會與高手差太多。但是,像Javascript這樣的腳本語言,由於太靈活,所以,高手寫出的是天使,而新手寫的,可能是魔鬼!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved