在JavaScript中應用Object
JavaScript是一種客戶端腳本語言,在大多數情況下,它被用來制作在 Web頁面上飛來飛去的對象,或用于確認HTML 表單中的輸入數據合法性。但是,如果你超越這些表象深入挖掘,就會發現,這種簡單易學的語言還有許多許多其它用途。比如,JavaScript中面向對象(Object)的結構體系。你還不知道在JavaScript中面向對象是怎么一回事情吧?沒有關系,請跟我來。
JavaScript的對象模型所提供的功能和靈活性并不如Java 和 Perl語言那樣多,但是,你很快就能看到,即便是有限的功能有時候也能用得非常方便順手。并且,如果考慮得再多一點,開發人員使用 JavaScript對象可以明顯地減少用于代碼開發和測試方面的時間。當然,由此構造的精巧美妙網頁,還能贏得同事的尊重和隔壁漂亮女孩的愛慕 :
一. 對象概覽
介紹對象結構之前,首先給快速瀏覽一下對象的世界里面都有什么?
在 JavaScript中,一個“對象構造器”只是一套程序語句,它們用于完成一項特殊任務:它們為一個對象設置基本規則,規定它能夠做什么,不能做什么。一個典型的對象構造器包含變量和函數,并且作為模板,從中產生出對那個對象的特殊例示。
每個從模板中構造出的對象具有一些特征或“屬性”,還有一些預先定義的函數或“方法”,這些屬性和方法直接對應于對象定義中的變量和函數。
對象被定義之后,JavaScript就允許你根據自己的需要生成許多例示。這些例示中的每一個都是一個完全獨立的對象,具有自己的屬性和方法,而且可以獨立于其它對象進行操作。
現在你可能疑惑:這是不是有點多余?因為JavaScript允許創建自定義函數,并在代碼中需要的地方使用它們。這難道還不夠嗎?是的,如果只想生成一個對象,那么函數就可以完成這項任務。
但是,常常要為一個對象生成多于一個的例示。例如,多個菜單樹,多個圖象交換。在這種情況下,最好使用對象,這樣每個例示都有其自己的變量和函數,不需影響程序中的其它變量就能夠進行操作。
對象還有助于保持代碼的模塊化。你可以在一個單獨的文件中定義一個對象構造器,只在使用到這個對象的頁面中包含這個文件。這樣,就大大地簡化了代碼的修改,因為只需要編輯一個文件就能向生成的所有對象中增加新的功能。
二. 定義對象構造器Sumthing
這以前你可能已經遇到過JavaScript對象了,比如下面的代碼創建了圖象對象的一個新例示:
<script language="JavaScript"> a = new Image(); </script>
下面的代碼創建了日期對象的一個新例示:
<script language="JavaScript"> x = new Date(); </script>
JavaScript自帶了許多內置對象,每個對象都有預先定義的方法和屬性。但是如果想創造滿足自己需要的,又該如何呢?這也不是很困難的,事實上,這與編寫一個JavaScript函數完全相同:
<script language="JavaScript"> // object constructor function Sumthing() { } </script>
這樣,就可以使用下面的代碼來創建一個 Sumthing 對象的例示:
<script language="JavaScript"> // object instance obj = new Sumthing(); </script>
注意這里的非常重要的關鍵字 "new",JavaScript 就是通過這個關鍵字確定是想要創建一個對象的例示而不是僅僅運行一個函數。
上面的代碼為Sumthing 對象創建一個叫做 "obj" 的例示。通過添加彈出 alert()對話框的代碼,可以驗證它確實是一個對象:
<script language="JavaScript"> obj = new Sumthing(); alert(obj); </script>
運行。
三. 定義屬性
現在對Sumthing函數進行些修改,讓它接受一些變量:
<script language="JavaScript"> // object constructor function Sumthing(num1, num2) { // object properties this.alpha = num1; this.beta = num2; } </script>
現在 Sumthing對象有了兩個屬性:alpha和 beta。有了這兩個屬性,就有可能創建 Sumthing對象的一個例示,并向它傳遞兩個參數("num1" 和 "num2"),然后將這兩個參數作為對象屬性存儲("alpha" 和 "beta")。注意 關鍵字"this" 的用法,它簡化了使用對象構造器“本地”變量(和函數)的代碼。
接著使用下列代碼測試一下:
<script language="JavaScript"> obj = new Sumthing(2, 89); alert("alpha is " + obj.alpha); alert("beta is " + obj.beta); </script>
運行。
四. 定義方法
同定義對象屬性一樣,我們也可以定義對象的方法,本質上就是簡單的JavaScript函數。下面對 Sumthing函數再進行一些修改,添加一個Add() 方法,它負責增加存儲在 "alpha" 和"beta"中的值:
<script language="JavaScript">
// object constructor function Sumthing(num1, num2) {
// object properties this.alpha = num1; this.beta = num2;
// object methods this.Add = Add; }
// object method Add() - add arguments function Add() { sum = this.alpha + this.beta; return sum; }
</script>
這里有兩個有趣的事情。首先,對象的方法Add() 實際上是在對象構造器模塊的外部定義的,而且還可以使用"this"關鍵字來引用對象屬性。其次,就象對象屬性是用"this"定義的一樣,對象方法也需要用同樣方法來定義。
運行下面的測試代碼,看看它是如何工作的:
<script language="JavaScript"> obj = new Sumthing(2, 89); alert("The sum of " + obj.alpha + " and " + obj.beta + " is " + obj.Add()); </script>
輸出結果。
到此對象構造器就準備好了。下面快速演示一下如何用對象構造器為同一個對象生成多個例示,以及每個例示都能彼此獨立運行:
<script language="JavaScript"> // one object obj1 = new Sumthing(2, 89); alert("The sum of " + obj1.alpha + " and " + obj1.beta + " is " + obj1.Add());
// another one obj2 = new Sumthing(546, 67); alert("The sum of " + obj2.alpha + " and " + obj2.beta + " is " + obj2.Add());
// and a third one obj3 = new Sumthing(2364237, 283457); alert("The sum of " + obj3.alpha + " and " + obj3.beta + " is " + obj3.Add()); </script>
|