使用物件導向技術來建立進階 Web 應用程式

轉自:http://msdn.microsoft.com/zh-tw/magazine/cc163419.aspx

 

最近我與一位擁有五年開發 Web 應用程式經驗的軟體開發人員面談。她使用 JavaScript 的經驗已長達四年半的時間，對自己的 JavaScript 技巧有很高的評價，但後來我很快發現，她其實對 JavaScript 一知半解。不過，我並沒有因此而責怪她。這就是 JavaScript 令人意想不到的所在。許多使用者 (直到最近，包括我自己在內喔) 都以為自己很懂得這個語言，只因為他們知道 C/C++/C# 或之前已有一些程式設計經驗。

從某方面來說，這種假設並非完全毫無根據。使用 JavaScript 設計一些簡單的程式很容易。它的學習門檻很低；這個語言比較容許失誤，您不需要深入了解這個語言就可以使用它來設計程式。即使非程式設計師也可以在幾小時內上手，撰寫一些對首頁有用的指令碼。

事實上，直到最近我才發現，我一直靠著對 JavaScript 貧乏的認知，憑藉著 MSDN® DHTML 參考手冊和我的 C++/C# 使用經驗，在勉強應付著。直到我開始設計真正的 AJAX 應用程式之後，才了解自己是如此欠缺 JavaScript 技巧。新一代 Web 應用程式的複雜性和互動性，需要以完全不同的方法來撰寫 JavaScript 程式碼。這些需要真正的 JavaScript 應用程式功力！我們一直以來所撰寫的用完即丟指令碼已經不夠。

物件導向程式設計 (OOP) 是許多 JavaScript 程式庫常用的方法之一，使程式碼基底更容易管理及維護。JavaScript 支援 OOP，但它支援的方式與一般符合 Microsoft® .NET Framework 規格的語言 (如 C++、C# 或 Visual Basic®) 支援的方式大不相同，因此，已長久使用那些語言工作的開發人員，一開始會覺得使用 JavaScript 進行 OOP 的方式很奇怪，違反直覺。我撰寫這篇文章是為了深入探討 JavaScript 語言真正支援物件導向程式設計的方式，以及如何利用此一支援使用 JavaScript 有效進行物件導向開發。讓我們先來討論 (還有別的嗎？) 物件。

 

JavaScript 物件是字典

在 C++ 或 C# 中，當我們說到物件時，指的是類別或結構的執行個體。物件有不同的屬性和方法，視產生它們的範本 (也就是類別) 而定。JavaScript 物件不是這樣。在 JavaScript 中，物件只是名稱/值配對的集合 -- 您可以把 JavaScript 物件想像成含有字串索引鍵的字典。我們可以使用熟悉的 "."(點) 運算子或 "[]" 運算子 (處理字典時通常使用此種運算子) 來取得及設定物件的屬性。下列程式碼片段

複製程式碼

var userObject = new Object(); userObject.lastLoginTime = new Date(); alert(userObject.lastLoginTime); 

的作用與以下完全一樣：

複製程式碼

var userObject = {}; // equivalent to new Object() userObject[“lastLoginTime”] = new Date(); alert(userObject[“lastLoginTime”]); 

我們也可以直接在 userObject 的定義內定義 lastLoginTime 屬性，如下所示：

複製程式碼

var userObject = { “lastLoginTime”: new Date() }; alert(userObject.lastLoginTime); 

請注意它與 C# 3.0 物件初始設定式的相似性。而且，熟悉 Python 的人會發現，我們在第二個和第三個程式碼片段中產生 userObject 的方式，與我們在 Python 指定字典的方式完全一樣。唯一不同的是，JavaScript 物件/字典只接受字串索引鍵，而不像 Python 字典那樣接受可雜湊的物件。

這些範例也顯示 JavaScript 物件的延展性遠大於 C++ 或 C# 物件。lastLoginTime 屬性不一定要事先宣告 -- 如果 userObject 沒有此名稱的屬性，它會直接加到 userObject 中。如果您記得 JavaScript 物件是一個字典的話，就不會對此感到奇怪 - 畢竟，我們總是一直在字典中加入新索引鍵 (及其個別值)。

因此，我們有了物件屬性。那麼物件方法呢？同樣地，JavaScript 也與 C++/C# 不同。為了了解物件方法，首先我需要仔細檢視 JavaScript 函數。

 

JavaScript 函數是高級函數

在許多程式設計語言中，函數和物件通常被視為兩種不同的東西。在 JavaScript 中，此區別是模糊的—JavaScript 函數其實就是含有相關聯可執行程式碼的一個物件。請看下面這個普通函數：

複製程式碼

function func(x) { alert(x); } func(“blah”); 

這是我們一般以 JavaScript 定義函數的方式。但您也可以如下定義相同的函數，亦即先建立匿名函數物件，然後將它指派至變數 func

複製程式碼

var func = function(x) { alert(x); }; func(“blah2”); 

或者，甚至可以像下面這樣使用 Function 建構函式：

複製程式碼

var func = new Function(“x”, “alert(x);”); func(“blah3”); 

這顯示函數其實就是一個支援函數呼叫作業的物件。最後一種使用 Function 建構函式來定義函數的方式並不常用，但它顯露一些有趣的機會，因為，也許您也注意到了，函數主體只是 Function 建構函式的 String 參數。這表示您可以在執行階段建構任意函數。

若要進一步示範函數是物件，您可以在函數中設定或新增屬性，就像您對其他任何 JavaScript 物件所做的一樣：

複製程式碼

function sayHi(x) { alert(“Hi, “ + x + “!”); } sayHi.text = “Hello World!”; sayHi[“text2”] = “Hello World... again.”; alert(sayHi[“text”]); // displays “Hello World!” alert(sayHi.text2); // displays “Hello World... again.” 

就像物件一樣，函數也可以指派給變數，以引數傳遞給其他函數，以其他函數的值傳回，儲存為物件或陣列元素的屬性...等等。[圖 1] 提供這種範例。

 Figure 1 JavaScript 中的函數是高級函數

複製程式碼

// assign an anonymous function to a variable var greet = function(x) { alert(“Hello, “ + x); }; greet(“MSDN readers”); // passing a function as an argument to another function square(x) { return x * x; } function operateOn(num, func) { return func(num); } // displays 256 alert(operateOn(16, square)); // functions as return values function makeIncrementer() { return function(x) { return x + 1; }; } var inc = makeIncrementer(); // displays 8 alert(inc(7)); // functions stored as array elements var arr = []; arr[0] = function(x) { return x * x; }; arr[1] = arr[0](2); arr[2] = arr[0](arr[1]); arr[3] = arr[0](arr[2]); // displays 256 alert(arr[3]); // functions as object properties var obj = { “toString” : function() { return “This is an object.”; } }; // calls obj.toString() alert(obj); 

也就是說，要在物件中加入方法，就像選擇名稱然後指派函數給該名稱那麼容易。因此，我藉由將匿名函數指派至個別方法名稱，在物件中定義三個方法：

複製程式碼

var myDog = { “name” : “Spot”, “bark” : function() { alert(“Woof!”); }, “displayFullName” : function() { alert(this.name + “ The Alpha Dog”); }, “chaseMrPostman” : function() { // implementation beyond the scope of this article } }; myDog.displayFullName(); myDog.bark(); // Woof! 

在 displayFullName 函數內使用 "this" 關鍵字，對於我們這種 C++/C# 開發人員應該不陌生 -- 它指向用來呼叫此方法的物件 (使用 Visual Basic 的開發人員應該也會覺得很熟悉 -- 它在 Visual Basic 中叫做 "Me")。因此，在上面的範例中，displayFullName 中的 "this" 值為 myDog 物件。不過，"this" 值不是靜態的。透過不同物件呼叫之後，"this" 的值也會變成指向該物件，如 [圖 2] 所示。

 Figure 2 當物件變更時，“this” 也會跟著變更

複製程式碼

function displayQuote() { // the value of “this” will change; depends on // which object it is called through alert(this.memorableQuote); } var williamShakespeare = { “memorableQuote”: “It is a wise father that knows his own child.”, “sayIt” : displayQuote }; var markTwain = { “memorableQuote”: “Golf is a good walk spoiled.”, “sayIt” : displayQuote }; var oscarWilde = { “memorableQuote”: “True friends stab you in the front.” // we can call the function displayQuote // as a method of oscarWilde without assigning it // as oscarWilde’s method. //”sayIt” : displayQuote }; williamShakespeare.sayIt(); // true, true markTwain.sayIt(); // he didn’t know where to play golf // watch this, each function has a method call() // that allows the function to be called as a // method of the object passed to call() as an // argument. // this line below is equivalent to assigning // displayQuote to sayIt, and calling oscarWilde.sayIt(). displayQuote.call(oscarWilde); // ouch! 

[圖 2] 的最後一行顯示以物件方法呼叫函數的另一替代方式。請記住，JavaScript 中的函數是物件。每一個函數物件都有一個方法，稱為 call，它會以第一個引數的方法來呼叫該函數。也就是說，我們以第一個引數傳入呼叫的任何物件，將成為函數呼叫的 "this" 值。這將是呼叫基底類別建構函式的技巧，這點我們稍後會做說明。

請記住，絕對不要呼叫只包含 "this" 卻沒有主控物件的函數。如果您這麼做，將踐踏全域命名空間，因為在該呼叫中，"this" 將指向 Global 物件，而這樣會在應用程式中造成嚴重破壞。例如，以下的指令碼會變更 JavaScript 全域函數 isNaN 的行為。絕對不建議這麼做！

複製程式碼

alert(“NaN is NaN: “ + isNaN(NaN)); function x() { this.isNaN = function() { return “not anymore!”; }; } // alert!!! trampling the Global object!!! x(); alert(“NaN is NaN: “ + isNaN(NaN)); 

我們已見識到建立物件的各種方式，包括其屬性和方法。但如果您注意看上面所有的程式碼片段，會發現屬性和方法是以硬式編碼方式加入物件定義本身。如果您想要進一步控制物件的建立方式，該怎麼辦呢？例如，您可能需要根據一些參數來計算物件屬性的值。或者，您可能需要將物件的屬性初始設定為只有在執行階段才會得知的值。或者，您需要建立物件的多個執行個體，這是很常見的需求。

在 C# 中，我們使用類別來產生物件執行個體。但是 JavaScript 不一樣，因為它沒有類別。相反地，就像您即將在下一節看到的，您可以善用函數與 "new" 運算子一起使用時，可扮演建構函式的這個事實。

 

有建構函式但沒有類別

JavaScript OOP 最令人感到奇怪的，如同前述，就是 JavaScript 並沒有像 C# 或 C++ 那樣擁有類別。在 C# 中，當您想要執行如下動作時：

複製程式碼

Dog spot = new Dog(); 

會傳回一個物件，即 Dog 類別的執行個體。但是在 JavaScript 中，根本沒有類別。最接近類別的方式，是定義如下的建構函式：

複製程式碼

function DogConstructor(name) { this.name = name; this.respondTo = function(name) { if(this.name == name) { alert(“Woof”); } }; } var spot = new DogConstructor(“Spot”); spot.respondTo(“Rover”); // nope spot.respondTo(“Spot”); // yeah! 

那麼這裡發生了什麼樣的情況呢？請暫時忽略 DogConstructor 函數定義，先檢查這一行：

複製程式碼

var spot = new DogConstructor(“Spot”); 

"new" 運算子執行的動作很簡單。首先，它會建立新的空白物件。然後，會執行緊接在後面的函數呼叫，並將新的空物件設定為該函數內的 "this" 值。換句話說，上面含有 "new" 運算子的這一行可視為類似下面這兩行：

複製程式碼

// create an empty object var spot = {}; // call the function as a method of the empty object DogConstructor.call(spot, “Spot”); 

就像您在 DogConstructor 主體中所看到的，呼叫此函數會初始設定 “this” 關鍵字在該呼叫期間所參考的物件。如此一來，您就可以建立物件的範本！每當您需要建立類似物件時，只要同時呼叫 “new” 和建構函式，就會傳回完全初始化的物件。這聽起來與類別很像，不是嗎？事實上，通常在 JavaScript 中，建構函式的名稱就是您要模擬的類別名稱，因此，在上面的範例中，請將建構函式 Dog 命名為：

複製程式碼

// Think of this as class Dog function Dog(name) { // instance variable this.name = name; // instance method? Hmmm... this.respondTo = function(name) { if(this.name == name) { alert(“Woof”); } }; } var spot = new Dog(“Spot”); 

在上面的 Dog 定義中，我定義了一個執行個體變數，叫做 name。使用 Dog 做為其建構函式而建立的每一個物件，將擁有自己的執行個體變數名稱 (如同前述，它就等於物件字典中的一個項目)。這是可以預期的；畢竟，每一個物件都需要自己的執行個體才能包含其狀態。但是請看下一行，Dog 的每一個執行個體都有自己的 respondTo 方法，這樣做很浪費，因為您只需要一個 respondTo 執行個體在 Dog 執行個體之間共用而已！如下所示，您可以在 Dog 之外使用 respondTo 的定義，來解決此問題：

複製程式碼

function respondTo() { // respondTo definition } function Dog(name) { this.name = name; // attached this function as a method of the object this.respondTo = respondTo; } 

如此一來，Dog 的所有執行個體 (也就是以建構函式 Dog 建立的所有執行個體) 就只會共用 respondTo 方法的一個執行個體。但隨著方法數量越來越多，會變得越來越難以維護。最後會導致程式庫基底包含很多全域函數，而且隨著「類別」數量的增加，情況會越來越糟，尤其如果它們的方法有類似的名稱。使用原型物件是達成此目的更好的辦法，這就是下一節的主題。

 

原型

原型物件是 JavaScript 物件導向程式設計的中心概念。此名稱來自這樣的概念：在 JavaScript 中，物件是以現有範例 (即原型) 物件的複本形式建立。此原型物件的任何屬性和方法，將視同從該原型建構函式所建立之物件的屬性和方法。您可以說這些物件是繼承其原型的屬性和方法。當您建立如下的新 Dog 物件時

複製程式碼

var buddy = new Dog(“Buddy“); 

buddy 所參考的物件將繼承其原型的屬性和方法，不過，該行程式碼並無法明顯透露原型的來源。buddy 物件的原型是來自建構函式的一個屬性 (以此案例而言，即 Dog 函數)。

在 JavaScript 中，每一個函數都有一個叫做 "prototype" 的屬性，此屬性會參考原型物件。原型物件則有一個叫做 "constructor" 的屬性，這會回頭參考函數本身。這是一種循環參考；[圖 3] 更清楚地說明此循環關係。

圖 3 每一個函數的原型都有一個 Constructor 屬性 

現在，使用一個函數 (如上面範例中的 Dog) 來建立具有 "new" 運算子的物件時，產生的物件將繼承 Dog.prototype 的屬性。您可以在 [圖 3] 中看到，Dog.prototype 物件有一個建構函式屬性，會回頭指向 Dog 函數。因此，每一個 Dog 物件 (繼承 Dog.prototype 的物件) 看起來也有一個回頭指向 Dog 函數的建構函式屬性。[圖 4] 中的程式碼進一步確認這一點。[圖 5] 描繪建構函式、原型物件，以及它們所建立的物件之間的關係。

 Figure 4 物件看起來具有其原型屬性

複製程式碼

var spot = new Dog(“Spot”); // Dog.prototype is the prototype of spot alert(Dog.prototype.isPrototypeOf(spot)); // spot inherits the constructor property // from Dog.prototype alert(spot.constructor == Dog.prototype.constructor); alert(spot.constructor == Dog); // But constructor property doesn’t belong // to spot. The line below displays “false” alert(spot.hasOwnProperty(“constructor”)); // The constructor property belongs to Dog.prototype // The line below displays “true” alert(Dog.prototype.hasOwnProperty(“constructor”)); 

圖 5 執行個體繼承其原型 

或許您已注意到 [圖 4] 中的 hasOwnProperty 與 isPrototypeOf 方法的呼叫。這些方法來自何處？它們不是來自 Dog.prototype。事實上，我們在 Dog.prototype 和 Dog 的執行個體上還會呼叫其他方法，如 toString、toLocaleString 及 valueOf，但它們根本不是來自 Dog.prototype。結果就像 .NET Framework 有 System.Object 做為所有類別的最終基底類別一樣，JavaScript 也有 Object.prototype 做為所有原型的最終基底原型 (Object.prototype 的原型是 null)。

在這個範例中，請記住 Dog.prototype 是一個物件。它是使用 Object 建構函式的呼叫而建立的，不過它是不可見的：

複製程式碼

Dog.prototype = new Object(); 

因此，就像 Dog 繼承 Dog.prototype 的執行個體一樣，Dog.prototype 也繼承 Object.prototype。這使得 Dog 的所有執行個體也一併繼承 Object.prototype 的方法和屬性。

每一個 JavaScript 物件都會繼承一整鏈的原型，且所有原型均以 Object.prototype 為終結。請注意，到目前為止，您所看到的繼承關係是介於即時物件之間的繼承關係。這不同於您常在宣告的類別之間所見到的繼承關係。因此，JavaScript 的繼承關係較為動態。其中是使用簡單演算法完成的，如下所示：當您嘗試存取物件的屬性/方法時，JavaScript 會檢查該屬性/方法是否定義在物件中。如果沒有，就會檢查該物件的原型。如果還是沒有，則會檢查該物件原型的原型，以此類推，直到 Object.prototype 為止。[圖 6] 說明此解析過程。

圖 6 原型鏈中的 Resolving toString() 方法 (按影像可放大)

JavaScript 動態解決屬性存取和方法呼叫的方式，會產生一些後果：

• 繼承的物件會立即看到對原型物件所做的變更，即使變更是發生在已建立繼承的物件之後。
• 如果您在物件中定義屬性/方法 X，相同名稱的屬性/方法將隱藏在該物件的原型中。例如，您可以在 Dog.prototype 中定義 toString 方法，來覆寫 Object.prototype 的 toString 方法。
• 變更僅從原型到其衍生物件單向進行，而不會反向進行。

[圖 7] 說明這些後果。[圖 7] 也顯示如何解決先前遇到的非必要方法之執行個體的問題。與其為每一個物件使用個別的函數物件執行個體，您可以改為將方法放到原型內，讓所有物件共用該方法即可。在此範例中，getBreed 方法會由 rover 和 spot 共用 -- 至少直到您覆寫 spot 中的 toString 方法為止。然後，spot 就會有自己的 getBreed 方法版本，但是 rover 物件和使用新的 GreatDane 建立的後續物件，仍然會共用在 GreatDane.prototype 物件中定義之 getBreed 方法的執行個體。

 Figure 7  繼承原型

複製程式碼

function GreatDane() { } var rover = new GreatDane(); var spot = new GreatDane(); GreatDane.prototype.getBreed = function() { return “Great Dane”; }; // Works, even though at this point // rover and spot are already created. alert(rover.getBreed()); // this hides getBreed() in GreatDane.prototype spot.getBreed = function() { return “Little Great Dane”; }; alert(spot.getBreed()); // but of course, the change to getBreed // doesn’t propagate back to GreatDane.prototype // and other objects inheriting from it, // it only happens in the spot object alert(rover.getBreed()); 

 

靜態屬性和方法

有時候您需要繫結至類別的屬性或方法而非執行個體的屬性或方法，也就是靜態屬性和方法。JavaScript 可以輕鬆做到這一點，因為函數就是物件，您可以任意設定其屬性和方法。由於建構函式代表 JavaScript 中的一個類別，您只要在建構函式中設定靜態方法和屬性，即可將它們加入類別中，如下所示：

複製程式碼

 function DateTime() { } // set static method now() DateTime.now = function() { return new Date(); }; alert(DateTime.now()); 

在 JavaScript 中呼叫靜態方法的語法，與在 C# 中使用的語法幾乎一樣。因為建構函式實際上就是類別的名稱，所以並不顯得奇怪。現在您已經有類別了，也有公用屬性/方法和靜態屬性/方法。還需要些什麼呢？當然，還需要 Private 成員。但 JavaScript 沒有 Private 成員的原生支援 (也沒有 Protected 成員)。任何人都可以存取物件的所有屬性和方法。有一個方法可以讓您在類別中擁有 Private 成員，但在這麼做之前，您必須先了解 Closure。

 

Closure

我並非自願要學 JavaScript 的。我必須很快學會，否則我將無法應付真正的 AJAX 應用程式。一開始，我覺得自己的程式設計師等級往下掉了好幾級 (JavaScript！我的 C++ 朋友們會怎麼說呢？)但一旦克服最初的抗拒心之後，我才了解 JavaScript 其實是一個功能強大、表達性強而且精簡的語言。它甚至早已擁有其他更受歡迎的語言才開始要支援的功能呢。

JavaScript 其中一個較先進的功能，是 Closure 的支援，而 C# 2.0 是透過匿名方法支援 Closure。Closure 是一個執行階段現象，當內部函數 (在 C# 中則為內部匿名方法) 繫結到其外部函數的區域變數時，就會產生此現象。顯然，除非這個內部函數可從外部函數之外存取，否則意義不大。這裡舉一個例子更清楚地加以說明。

假設您需要跟據一個簡單準則篩選一連串數字：只有大於 100 的數字可以通過，其他數字一律篩選掉。您可以撰寫一個像 [圖 8] 中的函數。

 Figure 8 根據述詞篩選元素

複製程式碼

function filter(pred, arr) { var len = arr.length; var filtered = []; // shorter version of new Array(); // iterate through every element in the array... for(var i = 0; i < len; i++) { var val = arr[i]; // if the element satisfies the predicate let it through if(pred(val)) { filtered.push(val); } } return filtered; } var someRandomNumbers = [12, 32, 1, 3, 2, 2, 234, 236, 632,7, 8]; var numbersGreaterThan100 = filter( function(x) { return (x > 100) ? true : false; }, someRandomNumbers); // displays 234, 236, 632 alert(numbersGreaterThan100); 

但如果您想要建立不同的篩選準則，假設這次只有大於 300 的數字可以通過。您可以這麼做：

複製程式碼

var greaterThan300 = filter( function(x) { return (x > 300) ? true : false; }, someRandomNumbers); 

接著您可能需要篩選大於 50、25、10、600 等等的數字，但聰明的您知道它們全部使用相同的述詞，即「大於」。只是數字不同而已。因此，您可以使用如下的函數，將數字的設定挪出：

複製程式碼

function makeGreaterThanPredicate(lowerBound) { return function(numberToCheck) { return (numberToCheck > lowerBound) ? true : false; }; } 

它可讓您執行如下的動作：

複製程式碼

var greaterThan10 = makeGreaterThanPredicate(10); var greaterThan100 = makeGreaterThanPredicate(100); alert(filter(greaterThan10, someRandomNumbers)); alert(filter(greaterThan100, someRandomNumbers)); 

請注意 makeGreaterThanPredicate 函數傳回的內部匿名函數。此匿名內部函數使用 lowerBound，它是傳至 makeGreaterThanPredicate 的引數。根據一般的範圍規則，當 makeGreaterThanPredicate 結束時，lowerBound 會超出範圍！但是在此案例中，該內部匿名函數仍一直帶著 lowerBound，即使在 makeGreaterThanPredicate 結束很久之後也一樣。這就是我們所謂的 Closure -- 因為內部函數會比定義該函數的環境 (也就是外部函數的引數和區域變數) 更早結束。

Closure 一開始看起來可能沒有什麼了不起。但若適當地使用，它們會顯露一些有趣的技巧，可以讓您實現更有創意的程式碼。在 JavaScript 中，Closure 最有趣的其中一個用途，就是模擬類別的私用變數。

 

模擬私用屬性

那麼，我們來看看 Closure 如何協助模擬 Private 成員。函數中的區域變數，一般無法從函數之外存取。在函數結束之後，實際上，區域變數就不見了。不過，內部函數 Closure 擷取的區域變數，會持續存活。這個事實就是模擬 JavaScript 私用屬性的關鍵所在。請注意下列 Person 類別：

複製程式碼

function Person(name, age) { this.getName = function() { return name; }; this.setName = function(newName) { name = newName; }; this.getAge = function() { return age; }; this.setAge = function(newAge) { age = newAge; }; } 

name 和 age 引數都是建構函式 Person 的區域引數。當 Person 一傳回，name 和 age 就應該永久消失。不過，它們會由四個內部函數擷取，雖然這些函數指派為 Person 執行個體的方法，實際上卻使 name 和 age 持續存活，但只能透過這四個方法存取。因此，您可以這麼做：

複製程式碼

var ray = new Person(“Ray”, 31); alert(ray.getName()); alert(ray.getAge()); ray.setName(“Younger Ray”); // Instant rejuvenation! ray.setAge(22); alert(ray.getName() + “ is now “ + ray.getAge() + “ years old.”); 

在建構函式中未初始化的 Private 成員可以是建構函式的區域變數，如下所示：

複製程式碼

function Person(name, age) { var occupation; this.getOccupation = function() { return occupation; }; this.setOccupation = function(newOcc) { occupation = newOcc; }; // accessors for name and age } 

請注意，這些 Private 成員與我們預期的 C# Private 成員稍微不同。在 C# 中，類別的公用方法可存取其 Private 成員。但是在 JavaScript 中，Private 成員只能透過使這些 Private 成員包含在 Closure 內的方法加以存取 (這些方法通常叫做權限方法 (Privileged Method)，因為它們與一般公用方法不同)。因此在 Person 的公用方法內，您仍然必須透過特權存取子方法來存取 Private 成員：

複製程式碼

Person.prototype.somePublicMethod = function() { // doesn’t work! // alert(this.name); // this one below works alert(this.getName()); }; 

著名的 Douglas Crockford 是第一位發現 (或者發佈) 使用 Closure 技巧來模擬 Private 成員的人。他的網站 javascript.crockford.com 有提供關於 JavaScript 的大量資訊 -- 任何對 JavaScript 感興趣的開發人員都應該進去看看。

 

繼承類別

現在，您已了解建構函式和原型物件如何讓您在 JavaScript 中模擬類別。您已了解到原型鏈可確保所有物件都有 Object.prototype 的共同方法。您也了解到如何使用 Closure 來模擬類別的 Private 成員。但這裡漏了一件事。您還不知道如何從類別衍生；這可是 C# 的每日例行工作。只可惜，在 JavaScript 中繼承類別不能像在 C# 中僅輸入一個冒號，它沒有這麼簡單。相反地，JavaScript 富有彈性，所以有很多繼承類別的方式。

假設您有一個基底類別叫做 Pet，和一個叫做 Dog 的衍生類別，如 [圖 9] 所示。您要如何在 JavaScript 中進行呢？Pet 類別很簡單。您已看過如何完成此部分：

圖 9 類別 

複製程式碼

// class Pet function Pet(name) { this.getName = function() { return name; }; this.setName = function(newName) { name = newName; }; } Pet.prototype.toString = function() { return “This pet’s name is: “ + this.getName(); }; // end of class Pet var parrotty = new Pet(“Parrotty the Parrot”); alert(parrotty); 

現在，如果您想要建立一個衍生自 Pet、稱為 Dog 的類別時，該怎麼辦？如同您在 [圖 9] 所看到的，Dog 有另一個屬性叫做 breed，它會覆寫 Pet 的 toString 方法 (請注意，JavaScript 的慣例是對方法和屬性名稱使用 Camel 命名法，而非 C# 建議的 Pascal 命名法)。[圖 10] 顯示做法。

 Figure 10 從 Pet 類別衍生

複製程式碼

// class Dog : Pet // public Dog(string name, string breed) function Dog(name, breed) { // think Dog : base(name) Pet.call(this, name); this.getBreed = function() { return breed; }; // Breed doesn’t change, obviously! It’s read only. // this.setBreed = function(newBreed) { name = newName; }; } // this makes Dog.prototype inherits // from Pet.prototype Dog.prototype = new Pet(); // remember that Pet.prototype.constructor // points to Pet. We want our Dog instances’ // constructor to point to Dog. Dog.prototype.constructor = Dog; // Now we override Pet.prototype.toString Dog.prototype.toString = function() { return “This dog’s name is: “ + this.getName() + “, and its breed is: “ + this.getBreed(); }; // end of class Dog var dog = new Dog(“Buddy”, “Great Dane”); // test the new toString() alert(dog); // Testing instanceof (similar to the is operator) // (dog is Dog)? yes alert(dog instanceof Dog); // (dog is Pet)? yes alert(dog instanceof Pet); // (dog is Object)? yes alert(dog instanceof Object); 

所使用的原型取代技巧適當地設定原型鏈，因此，如果您使用 C#，instanceof 測試將會如所預期般運作。同時，權限方法仍會如所預期般運作。

 

模擬命名空間

在 C++ 和 C# 中，命名空間是用來使名稱衝突的機率降至最低。例如，在 .NET Framework 中，命名空間可幫助區分 Microsoft.Build.Task.Message 類別與 System.Messaging.Message。JavaScript 沒有任何特定語言功能可支援命名空間，但是使用物件模擬命名空間很容易。假設您想要建立 JavaScript 程式庫。您可以不要定義全域性的函數和類別，而是在命名空間中包裝它們，如下所示：

複製程式碼

var MSDNMagNS = {}; MSDNMagNS.Pet = function(name) { // code here }; MSDNMagNS.Pet.prototype.toString = function() { // code }; var pet = new MSDNMagNS.Pet(“Yammer”); 

一個命名空間層級可能無法達到唯一的需求，因此您可以建立巢狀命名空間：

複製程式碼

var MSDNMagNS = {}; // nested namespace “Examples” MSDNMagNS.Examples = {}; MSDNMagNS.Examples.Pet = function(name) { // code }; MSDNMagNS.Examples.Pet.prototype.toString = function() { // code }; var pet = new MSDNMagNS.Examples.Pet(“Yammer”); 

您可以想像，輸入那些冗長的巢狀命名空間一定很乏味。還好，程式庫使用者可以輕易設定命名空間的別名，使名稱短一點：

複製程式碼

// MSDNMagNS.Examples and Pet definition... // think “using Eg = MSDNMagNS.Examples;” var Eg = MSDNMagNS.Examples; var pet = new Eg.Pet(“Yammer”); alert(pet); 

如果您看一下 Microsoft AJAX Library 的原始碼，會發現程式庫的作者使用類似技巧來實作命名空間 (請看看靜態方法 Type.registerNamespace 的實作)。如需詳細資訊，請參閱資訊看板＜OOP 和 ASP.NET AJAX＞。

 

您應該使用此方式來編寫 JavaScript 程式碼嗎？

您已經看到 JavaScript 對物件導向程式設計可提供很好的支援。雖然 JavaScript 採取原型語言的設計，但它有足夠的彈性和能力，可以呈現類別型程式設計風格，如同其他常見語言。問題是：您應該使用此方式來編寫 JavaScript 程式碼嗎？您要以 C# 或 C++ 編寫程式碼的方式來編寫 JavaScript 程式碼嗎？亦即以更聰明的技巧來模擬本身沒有的功能？每一種程式設計語言都有所不同，一種語言的最佳作法不一定是另一種語言的最佳作法。

您已看到 JavaScript 中的物件會繼承其他物件 (相對於類別繼承類別)。因此，使用靜態繼承階層來建立許多類別，或許不是 JavaScript 的最佳運用。也許就像 Douglas Crockford 在他的文章 ( JavaScript 的原型繼承關係 (Prototypal Inheritance in JavaScript) ) 中所說的，JavaScript 的程式設計模式是要建立原型物件，並使用下列簡易物件函數來建立繼承該原始物件的新物件：

複製程式碼

 function object(o) { function F() {} F.prototype = o; return new F(); } 

然後，由於 JavaScript 中的物件具有延展性，因此在必要時，您可以在建立物件之後使用新欄位和新方法輕易地增強該物件。

這一切都非常好，但無可否認的，全世界大部分開發人員比較熟悉的是類別型程式設計。事實上，類別型程式設計絕對不會消失。根據即將發行的 ECMA-262 規格第 4 版 (ECMA-262 是 JavaScript 的官方規格)，JavaScript 2.0 將具有真正類別。因此，JavaScript 正朝向類別型語言發展。不過，JavaScript 2.0 要達到廣泛使用的地步可能還要好幾年呢！同時，一定要好好了解目前的 JavaScript，才能有效讀取及撰寫原型式和類別式 JavaScript 程式碼。

 

結論

隨著互動式、仰賴用戶端之 AJAX 應用程式的擴增，JavaScript 很快成為 .NET 開發人員眾多利器當中最有用的工具之一。不過，其原型本質一開始可能會讓比較習慣 C++、C# 或 Visual Basic 等語言的開發人員不知所措。儘管一路走來出現不少挫折，我仍然覺得自己的 JavaScript 學習過程是一段很寶貴的經驗。如果本文可以幫助您更順利學習，我就感到很欣慰了，這也是我的目標。

OOP 和 ASP.NET AJAX

在 ASP.NET AJAX 實作的 OOP 與本文所討論的正規實作有點不同。關於這點，有兩個主要原因：ASP.NET AJAX 版本提供更多反映的可能性 (這對於 xml-script 之類的宣告語法和參數驗證是必要的)，而 ASP.NET AJAX 的目標在於將 .NET 開發人員所熟悉的其他一些結構 (例如屬性、事件、列舉值和介面) 轉換至 JavaScript 中。

在目前廣泛使用的版本中，JavaScript 缺少 .NET 開發人員所熟悉的一些 OOP 主要概念，而 ASP.NET AJAX 則大部分採用模擬的方式。

類別可以有根據命名慣例的屬性存取子 (後面有範例)，以及模式類似 .NET 所提供的多點傳送事件。私用變數所依據的慣例，即以底線做為開頭的成員是 Private 成員。真正的私用變數很少會用到，此原則讓那些變數能夠由偵錯工具進行監督。其中也引進了介面，在一般 duck-typing 之外啟用型別檢查情況 (duck-typing 是一種型別，它所依據的概念是：如果有個東西走起路來像鴨子，叫起來也像鴨子，那麼它一定是隻鴨子，或至少可以把它當做是隻鴨子來看)。

類別和反映

在 JavaScript 中，您無從得知函數的名稱。即使有可能，在大部分情況下也沒有幫助，因為類別建構函式一般的建立方式，是將匿名函數指派至命名空間變數。真正構成型別名稱的是此變數的完整名稱，它同樣也是無法存取的，而且建構函式本身對它一無所知。為了克服此限制，並對 JavaScript 類別有眾多反映，ASP.NET AJAX 要求登錄型別名稱。

在 ASP.NET AJAX 中，反映 API 可對任何型別運作，不論它是內建、類別、介面、命名空間、甚至是列舉值，而且它們包括可在執行階段監督類別階層的 .NET Framework 函數 (如 isInstanceOfType 和 inheritsFrom)。ASP.NET AJAX 也會在偵錯模式下執行一些型別檢查，這可幫助開發人員儘早捕捉到錯誤。

登錄類別階層和呼叫基底

若要在 ASP.NET AJAX 定義類別，您需要指派其建構函式給變數 (請注意建構函式如何呼叫基底)：

複製程式碼

MyNamespace.MyClass = function() { MyNamespace.MyClass.initializeBase(this); this._myProperty = null; } Then, you need to define the class members itself in its prototype: MyNamespace.MyClass.prototype = { get_myProperty: function() { return this._myProperty;}, set_myProperty: function(value) { this._myProperty = value; }, doSomething: function() { MyNamespace.MyClass.callBaseMethod(this, “doSomething”); /* do something more */ } } 

然後才登錄類別：

複製程式碼

MyNamespace.MyClass.registerClass( “MyNamespace.MyClass “, MyNamespace.BaseClass); 

您不需要管理建構函式和原型階層，因為 registerClass 函數會自動為您執行此動作。

Bertrand Le Roy 是 ASP.NET AJAX 小組的軟體設計工程師 (Software Design Engineer II)。