DHTML基礎教學(8)--程式基本概念之物件導向篇

物件導向的領域很廣，不是在一篇中三言兩語就能說完的，本篇主要說明的是在 JavaScript 中會用到的觀念

物件導向主要是要將現實生活中的物件(物品)觀念帶入程式語言中

例如冷氣機是一個物件，它有顏色，有造型，有送風、吹冷氣、除濕等功能，若我們不是製造冷氣機的人，那我們不需要知道它是如何送風、吹冷氣、以及除濕，我們只要知道怎麼用它即可，冷氣機自己不會知道現在要送風還是要除濕，而是要等人們去開了送風的開關時，它才會送風

上面一段話就有表達出一個物件所具備有的東西

物件的顏色、造型…等等，即是物件的特徵，在程式語言中稱之為屬性(Property)，例如上述的冷氣機可看作它有兩個屬性，一個是顏色，一個是造型

物件的功能，例如上述的送風、吹冷氣、除濕等功能，在程式語言中稱之為方法(Method)，也就是這個物件能做些什麼事情

而上述中，當開了送風的開關後，冷氣機就開始送風，這種「當做了什麼動作後，會發生什麼事情」，就是程式語言中所謂的事件(Event)

因此，上述的概念運用到程式語言中，程式就不再只是一行一行的程式碼，而是已經被物件化了

另外，程式中的物件感覺起來可以比現實生活中的物件更加的廣泛，在現實生活中所稱的物件，一般是指我們看得見的東西，例如鍋碗瓢盆，而像聲音、時間等等這種不可見的，一般我們不會說它是個物件，但是在程式裡的物件導向中，任何東西都可以看成是物件，也就是在程式中會包含了「可見物件」與「不可見物件」兩種

接著我們以程式語言的角度來看看物件導向

在資料型態篇中有提到了程式語言中的一些常用的型態，也提到了在物件導向中可以自訂型態

資料型態可以看作是存放資料的規格，當我們將資料存放到電腦中時，實際上只是寫入了一些 0 與 1 的內容而已，那麼在這麼一大堆 0 與 1 的資料中，電腦如何知道哪些中合在一起看作一份資料的？主要就是運用這個資料型態

字串有字串的規格，數字有數字的規格，因此，只要我們能提供一個可用的規格給電腦，那就相當於是我們自訂了一個型態了，在物件導向中即是透過建立類別(Class)來自訂型態，在型態中，我們可以定義這個型態具備有哪些屬性及方法

型態並不是我們的資料，它只是規格而已，例如「字串」是型態，是規格，而 "abc" 這才是我們的資料

類別型態的資料，通常稱之為實體(instance)，一般來說都需要用類別的建構子(constructor)才能產生這個類別的 instance

不同的程式語言，其用以呼叫 Constructor 來產生 instance 的語法會有不同，我拿 JavaScript 中的 Date 型態來當例子，我們要產生一個 Date 的實體，語法如下
<script> var d = new Date(); alert(d); </script>
在第 1 行中的 Date() 就是 Date 型態的 Constructor，而 new 是 JavaScript 中用以呼叫 Constructor 來產生 instance 的一個關鍵字，所以 d 代表的就是一個 Date 型態的 instance，即是我們的資料，要記得，就算 d 代表的是 Date 物件，但 d 仍然是個變數，只不過是個 Date 型態的變數而已

再者，上面有提到了物件可能會有屬性、方法、及事件，這些東西通常稱之為物件的成員(members)，每種程式語言對於存取屬性或呼叫方法等的語法不盡相同，但也大同小異，例如 JavaScript 的語法如下

物件變數名.成員名

也就是若要存取物件的屬性時，則為

物件變數名.屬性名

例如假設 MyClass 這個型態有個 name 屬性，則存取語法為
var o = new MyClass(); o.name = "abc"; var s = o.name;
物件的屬性(Property)，其實跟變數非常類似，只不過我們必須透過物件才能存取到它而已，在上例中，第 2 行是在給 name 屬性一個值，而第 3 行則是讀取 name 的屬性值

再看一個實際的 JavaScript 例子
<script> var s = "abc"; var length = 1; alert(s); alert(length); alert(s.length); </script>
第 1 行及第 2 行分別宣告了 s 及 length 這兩個變數，故第 3 行及第 4 行 alert 的訊息分別為 "abc" 及 1，而 s 是一個字串物件，它有個 length 屬性，值為該字串的長度(即字元數)，故第 5 行 alert 的訊息會是 3，s 的 length 屬性與第 2 行中宣告的 length 變數完全沒有關係，所以值也不會互相覆蓋

呼叫 Method 的語法也差不多，語法如下

物件變數名.方法名() 物件變數名.方法名(參數)

在 JavaScript 中，呼叫 Method 時，必須在 Method 名之後加上括號

物件的方法(Method)與函數(Function)也非常類似，同樣是呼叫它時，會執行內含在 Method 或 Function 中的一段程式碼，只不過我們必須透過物件才能呼叫它而已

有些 Method 或 Function 會定義必須傳入一些值給它處理，這些值即叫做參數(Argument)，傳入參數的語法就是將參數值寫在括號內

有些 Method 或 Function 則會定義執行它後，它會回傳一個值，一般稱為回傳值(return value)，例如回傳 Method 內的程式處理後的結果

假設 MyClass 這個型態有個 setName 及 getName 方法，則呼叫的語法為
var o = new MyClass(); o.setName("abc"); var s = o.getName();
第 2 行是呼叫 setName 這個 Method，並將 "abc" 這個字串傳進去給它處理，而第 3 行是在呼叫 getName 這個 Method ，並取得它的回傳值

再看一個實際的 JavaScript 例子
<script> function toLocaleString(){ return "some thing"; } var d = new Date(); var s1 = toLocaleString(); var s2 = d.toLocaleString(); alert( s1 ); alert( s2 ); </script>
第 1~3 行是 JavaScript 中用來宣告函數的語法，這裡單純的只是回傳 "some thing" 這個字串，第 5 行即是在呼叫它，並且讓 s1 這個變數接收函數所回傳的值，故第 7 行 alert 的訊息會是 "some thing"
另外，第 4 行宣告了一個 d 變數，而 Date 物件有個 toLocaleString 的方法，會回傳這個日期物件所代表的日期字串，所以第 8 行 alert 的訊息就會是一個日期(及時間)，同樣的，d 的 toLocaleString 方法與第 1~3 行中宣告的 toLocaleString 函數完全沒有關係，所以也不會有衝突

再者，除非我們是定義(開發)類別型態的人，又或者我們有它的原始程式，否則一般來設我們不會知道 Method 內實際上做了哪些事，只知道使用它後會有什麼結果，這其實是個好處，我們使用的人通常並不會也不需要去知道它內部的運作，只須要知道如何用它，以及使用它後能獲得什麼效果，就好像我們知道如何使用電話，也知道可用電話跟遠處的人通話，但很少人會去關心電話的原理，所以有一些公司或組織就會開發一些好用的類別給大家用，而我們也只要會用就好

而事件(Event)通常是可與使用者互動(可被操作)的可見物件才會有的，也就是當使用者對這個物件做了什麼事時，才會觸發相對應的事件，但這不是絕對的

Event 其實跟 Method 很像，同樣是呼叫它時，會執行內含在 Event 中的一段程式碼，差別在於 Method 是我們寫程式去呼叫的，而事件則是在某個狀況時會自動被執行的，這裡所謂自動被執行，是對於我們在使用這個物件的人而言的，幕後當然它也是由某些程式碼去呼叫的，只是因為這些動作不是我們寫的，我們看不到這些動作，故感覺上就是在某個狀況時會自動被執行

--gs--
{DHTML基礎教學}

沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。