愛德華日誌

除了 Design Patterns 之外，近年來物件導向設計領域還開始講究 OO principle. 像是從前年開始流行起來的 micro kernel framework -- PicoContainer 及 Spring Framework 所講究的 dependency inversion，本身也是一種 principle。而 RMI, EJB 及 Jini 等遠端物件技術，則符合另一 principle -- Program to an interface, not an implementation. 這些 principle 之所以存在，最主要的目的就是讓我們在設計系統時，可以增加系統的擴充性與維護性。對這些 principle 有與趣者，可以到 Object Mentor 尋找相關資料。

由於昨天部門讀書會剛好討論到這個議題，我便就這個主題發表一下我的看法。像是這個讓人覺得矛盾的 Open Closed Principle， 也就是 Open for Extension, Closed for Modification，到底 Open (開放)了什麼東西，Closed (禁制)了什麼東西。用簡單的話來講，這項原則強調：

* 在設計一類別時，應保留足夠的彈性，讓採用此類別的程式，透過擴充的手法，即可新增或變更系統功能。
* 在設計一類別時，應具有適當的封閉性，避免讓採用者直接修改類別原始程式，才可達成其功能。

我想寫過稍大一點程式的朋友一定會這種經驗，當我們在程式中採用一個類別時，有時候發現該類別少了許多我們所要的特性或功能，這時候我們可能採取以下幾種作法，來達到呼叫者所要的功能：

* 你可能動手直接修改該類別某個 method 的實作
* 你可能在該類別中新增你所須要的 method
* 你可能透過建立一個該類別的子類別，再採用其子類別，來達到你所需要的功能
* 你可能將該類別的某些職責(responsibilities)，透過 composition 或 delegation，交給別的物件處理，就可以達到你所需要的功能

究竟採取何種作法，除了視採用者個人的偏好外，還與原始類別設計的好壞有關。各位可以看到，上面的這幾種方法中，越上面的方法，對你原本系統的程式修改越多，而越下面的方法，對原程式的修改越少。因此如果一個類別的設計，能讓採用者越喜好使用下面的方法來達成其功能，則原始類別的設計，就越符合 Open Closed Principle。

我再舉一個 JDK 的例子，在我們使用 JDK 裡面的 API 時，就不太可能會想要動手去修改 API 裡面的實作。例如：當你發現 JButton 少了你所需要的屬性時，你大概不會動手修改 JButton 的原始碼；反之，你可能會新建一個 JButton 的子類別，再於其中加入自己所需的屬性，這就符合了Open Closed Principle (甚至所有的 JComponent 都允許你用 putProperty 的方式，在不用新建子類別的方式之下，動態新增屬性)。還有不少 JDK API 的設計，也都符合這項原則，像是 sort 只要傳入 Comparable，JButton 有 addActionLisenter, JTable 有 TableModel... 不勝枚舉。

這不是一篇教你如何在網頁中應用 JavaScript 的教材。這是一篇讓你明瞭看似簡單的 JavaScript，其實其核心語法功能強大。我將在這篇文章中說明 JavaScript 物件導向的特性，並說明如何透過這些特性，達到傳統程式語言 (C++/Java) 所難以完成的功能。

Written by Edward Hsieh/謝鎮澤

January 04, 2002

Everything is Object in JavaScript

開宗明義：在 JavaScript 中任何東西都是物件：變數是物件、函式是物件，常數也是物件。證明方式：

 alert (typeof('abc')); alert (typeof(123)); var ary = [123, "abc"]; alert (typeof(ary)); 

上面的 typeof 會顯示物件資料型態。得到結果分別是 string, number, object。

Create Objects in JavaScript

既然任何東西都是物件，那建立物件的方法就多了。直接看個例子：

 var main = new Object;     // 建立新物件 main.x = 123; // 設定物件成員變數(屬性)之一 main["y"] = "XYZ"; // 設定物件成員變數(屬性)之二 alert(main["x"]); // 取得物件屬性並輸出 alert(main.y);     

可以看到在 JavaScript 中，main.x 與 main["x"] 這兩種語法是通用的。其實在其他語言中，這兩種表示法的語意並不相同。我稍後再作說明。

List All Members in an Object

這是 JavaScript 的必殺技，使用 JavaScript 的人務必要學會這個技巧。底下函式可以傳回一個物件的所有成員的字串表達式，包括物件中的屬性及方法。在物件導向程式設計中，這種技術叫 reflection。

 functin listMember(main) { var s = ""; for( key in main ) // 使用 in 運算子列舉所有成員 s += key + ": " + main[key] + "n"; return s; } 

範例碼中的 key 會對應到物件中的屬性名稱，如 "x" 或 "y"，而 main[key] 則對應到屬性值。

說這項技巧是必殺技的原因是，你可以透過這項技巧，將物件封裝的黑箱打開來，看看裡面藏有什麼東西。我常用這項技巧來看看 IE 與 Mozilla 的 Dom 物件模型有何不同。試試看下面呼叫範例，就可以知道這項技巧的強大了：

 var ary = [123, "abc"]; alert (listMember(ary)); alert (listMember(document.location));  

Construct Object with Initial Value

要在建立物件的同時指定物件初始值，必須先透過 function 建立一個「原型物件」(或稱為 constructor)，再透過 new 運算子建立新物件。例如以下程式碼會建立一個二維陣列的原型，再產生一個新的二維物件。

 function Array2DVar(x,y) {     // 定義二維陣列原型 this.length = x; this.x = x;        // x 維度長度 this.y = y;        // y 維度長度 for(var i = 0; i < this.length; i++)  // 初始各元素值為 null this[i] = new Array(y);    // this 代表物件本身 }  var a2dv = new Array2DVar(10, 10);   // 建立新的 10*10 的二維陣列 a2dv[1][3] = "ABC";       // 設定二維陣列元素值 a2dv[2][6] = "XYZ"; a2dv[9][9] = 1000;  alert( a2dv[1][3]);  // 取得二維陣列元素值，並顯示出來 alert( a2dv[2][6]); alert( a2dv[9][9]);  

Initial Array Object 在 JavaScript 中陣列也是物件 (其實近代多數語言中陣列也都是物件，只有像 C 或 Assembly 這類古老的語言才不把陣列看成物件)，因此也可以用 constructor 的語法來建構。當然 JavaScript 還提供了 [] 語法，以更方便建構陣列，範例如下：

 a = new Array("abc", "xyz", 1000); // constructor 語法，或 a = ["abc", "xyz", 1000]; // 陣列標準語法  

陣列的元素可以是簡單的資料、其他物件，或是函數。舉個例子來在陣列裡面放函式：

 b = [ // 使用函式作為陣列元素 function () { alert("這個好玩!") }, function () { alert("再按一次離開!") }, function () { alert("再來一次!") }, function () { alert("最後一次!") } ];  for (var i = 0; i < b.length ; i++) b[i]();  

最後一個 for 迴圈是個有趣的應用。由於 b 陣列中現在存放的所有元素都是函式，因此我們可以對 b 的每個元素進行呼叫。

Object as Association Array

關連陣列 (Assocation Array) 又稱作 Map 或 Dictionary，是一種物件容器，其中可以放置許多的 key-value pair，以存取子物件。在JavaScript 中，物件本身就可以作為關連陣列。以關連陣列的方式初始化物件的範例如下：

 obj1 = {"a" : "Athens" , "b" : "Belgrade", "c" : "Cairo"}; alert(obj["a"]); // 顯示 Athens obj2 = { name: "Edward", showName: function() { alert(this.name); }  // 使用函式作為物件屬性 } obj2.showName();  // 顯示 Edward obj2.age = 23; // 屬性可以動態加入 

其 中 obj1 儲存了三個子元素，其鍵 (key) 為 "a", "b" 與 "c"，而值 (value) 為 "Athens", "Belgrade" 與 "Cairo"。obj2 中 showName 鍵所對應的值為 function，因此 obj2.showName() 即為函式呼叫。

Object as Return Value

雖然 Javascript 的函式只能傳回一個變數，但您卻可以將傳回值設定為物件，達到傳回 1個以上變數值的效果

 function a () { return [32, 17]; } b = a(); alert( b ); // 或 alert(a()); 
 function pixel () { return {"x": 32, "y":17}; } 
 point = pixel (); alert (point.x + "n" + point.y); // 或 alert (pixel().x + "n" + pixel().y);  

Delegation Function Object

函式也是物件，只是其中包含的是程式的邏輯。這項特性可拿來作為委任式的程式設計，亦即使用委任函式當作另一函式的參數：

 function doloop(begin, end, func) { // 這個函式是個 iterator for (var i = begin; i < end; i++) {  func(i); } } function func1(i) { // 印出 ** n ** document.writeln("** " + i + " **
 "); } doloop(1, 10, func1); // 印出 1o 行 ** n ** doloop(20, 29, function(i) { // 印出 1o 行 ## n ## document.writeln("## " + i + " ##
 "); }); 

Object = Properties + Behaviors

古有明訓：程式 = 資料結構 + 演算法。而物件是建構程式的基本單位，自然的具有相同的性質。物件除了有屬性 (property)，也可具有操作 (behavior)，也就是函式。

假如我們要使用一維陣列來模擬二維陣列，那麼就無法使用 ary[x][y] 這種表示法來設定或取得陣列成員。不過我可以定義一個 set 方法來設定成員變數，而以 get方法來取得成員變數值。原型函式定義如下：

 function Array2D(x,y){      // 以一維陣列模擬二維陣列的原型物件 this.length = x * y;      // 陣列總長 this.x = x;         // x 維度長度 this.y = y;         // y 維度長度 for(var i = 0; i < this.length; i++)  // 初始各元素值為 null this[i] = null; this.get = function(x,y){      // 成員函式：取得陣列第 [x,y]個元素值    return this[x*this.x + y]; }  this.set = function(x,y,value){  // 成員函式：設定陣列第 [x,y] 個元素值 this[x*this.x + y] = value; } } 

我們接著來使用它：

 var a2d = new Array2D(10, 10);    // 建立新的「二維」陣列  a2d.set(1, 3, "ABC");   // 設定「二維」陣列元素值 a2d.set(2, 6, "XYZ"); a2d.set(9, 9, 1000);  alert( a2d.get(1,3) );  // 取得「二維」陣列元素值，並顯示出來 alert( a2d.get(2,6) ); alert( a2d.get(9,9) );    

Member Function Outside of Constructor

我們也可以將物件成員函式寫於原型物件之外。以下的Array2D物件與上一個範例中的 Array2物件有相同的作用，只不過這次是寫在原型物件之外。

 function Array2D(x,y){      // 以一維陣列模擬二維陣列的原型物件 this.length = x * y;      // 陣列總長 this.x = x;         // x 維度長度 this.y = y;         // y 維度長度 for(var i = 0; i < this.length; i++)  // 初始各元素值為 null this[i] = null; this.get = Array2DGet; // 用這種方式把成員函式掛進來 this.set = Array2DSet; }  function Array2DGet(x,y){      // 成員函式：取得陣列第 [x,y] 個元素值 return this[x*this.x + y]; }  function Array2DSet(x,y,value){    // 成員函式：設定陣列第 [x,y] 個元素值 this[x*this.x + y] = value; } 

Dynamic Object Function

這裡說明如何為一個已定義物件，動態的加上其他操作的方法。

如 果一物件已定義完成，而您也使用它來建立了新的物件，這時候您想為原型物件增加新的操作 (而不修改原型物件的原始碼)，讓所有該物件的複本都能使用該操作，該如何達成呢？方法是使用物件的 prototype 屬性。以下這個例子，為 Array 這類 Object 在執行期加入一個 max 方法，以取得陣列元素之最大值 (修改自微軟 jscript.chm之範例)：

 function array_max(){      // 定義求取 Array 最大值之函式 var i, max = this[0]; for (i = 1; i < this.length; i++){ if (max < this[i])   max = this[i]; } return max; } Array.prototype.max = array_max;   // 在 Array 原型中加入 max 函式 

上面的程式碼，首先建立一個 array_max 方法，以求取陣列之最大元素。接著將這個方法設定給 Array 原型物件。

 var x = new Array(1, 2, 3, 4, 5, 6);  // 透過 Array 建構子建立一陣列                                   // 想求取 x 中某一元素之最大值 var y = x.max( );       // 取得 x 之最大元素 

Dynamic Mix in

假 如物件 dynamic 有 mathod1, method2 兩個函式；而另一物件 main 有 methodA 及 methodB 兩個函式。現在我想把 dynamic 的所有特性 (feature) 匯入到 main 中，我們可以在 main 中加上一個 imports 函式：

 function main(){              // main 之建構子 // ... this.imports = function (object) {   if( typeof object == "object")     for( value in object )       this[value] = object[value]; } // ... } obj = new main(); main.imports(new dynamic());   // 匯入 dynamic 物件之所有功能 

這個 imports 函式可以動態的為 main 加上另一物件的所有操作。這種 Mix in 的功能可是 C++/Java 的 static type 語言所望塵莫及的。

昨日心血來潮，把放在書桌一角，塵封已久的一本書

Object Oriented Analysis (2nd Edition)
by Peter Coad, Edward Yourdon

看了一遍。內容包含:

 Introduction. 1. Improving Analysis with Object-Oriented Techniques. 2. Experiencing an Object Perspective. 3. Identifying Objects. 4. Identifying Structures. 5. Identifying Subjects. 6. Defining Attributes. 7. Defining Services. 8. Moving to Object-Oriented Design.   

在網路上找了一下，哇! 這裡 有不錯的資源...

See also:

• A Road Map for OOA and OOD
• Juicy Studio: Object Oriented Analysis and Design
• Yourdon 的網站: Ed Yourdon's Home Page