The NoteBook of EricKong

            BlogJava :: 首頁 :: 聯系 :: 聚合  :: 管理
            611 Posts :: 1 Stories :: 190 Comments :: 0 Trackbacks
          怎么在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這樣的腳本語言,由于太靈活,所以,高手寫出的是天使,而新手寫的,可能是魔鬼!
          posted on 2010-07-21 14:03 Eric_jiang 閱讀(229) 評論(0)  編輯  收藏 所屬分類: JavaScript
          主站蜘蛛池模板: 巴彦县| 鄂托克前旗| 河北区| 汕头市| 桂阳县| 余江县| 秦安县| 聊城市| 福贡县| 浮梁县| 青岛市| 青铜峡市| 阜城县| 海伦市| 黑龙江省| 南康市| 平阳县| 郧西县| 盖州市| 马鞍山市| 盘山县| 陇西县| 会同县| 虎林市| 屏边| 张家界市| 交口县| 临泽县| 磐石市| 夏河县| 洛宁县| 辛集市| 濮阳县| 思南县| 玉门市| 洛南县| 依兰县| 乾安县| 尚志市| 沁源县| 灵丘县|