JavaScript 物件 --- Part 2

目錄 : 網頁設計學習課程參考

除了用我們在前一課 JavaScript 物件 --- Part 1 中所介紹的兩種方法建立JavaScript自訂物件以外，我們還可以用本節所介紹的建構函式(Constructor)建立自訂物件. 此種方式所建立的自訂物件允許我們建立同一物件的多個實體而不需重覆抄寫同ㄧ段程式碼放置於不同的地方，更易於維護. 而且也可用來開發比較複雜的物件，為建立自訂物件最常見、最基本的方法.

語法：

            var object_name = function (argument1, argument2, ...) {

                   /*  於本處定義屬性及方法. */

                   var propert1 = value1;

                   .......定義其他屬性.......

                   var method1 = function(input1, input2, ...) {

                          ..................................

                   };

                   ........定義其他方法......

                  /* 定義公開的屬性及方法 */

                   return {

                           propert1: property1,
                               ........
                           method1:method,
                               ........

                    };

             };

在此處object_name為我們所取的變數， 其名稱為我們自訂物件的名稱. 在object_name宣告右側放置ㄧ匿名函數. 在該匿名函數內定義物件的屬性方法.

在匿名函數的最後我們用物件實字傳回一個自訂物件，並把要公開的屬性及方法放入該自訂物件內. 放入return所回傳的屬性及方向就成物件的公開(Public)成員屬性及方法. 沒有放入return所回傳的屬性及方向就成物件的私有(Public)成員屬性及方法. 私有成員屬性及方法在本物件以外的程式看不見、無法使用的，純粹是供物件內的程式碼使用.

範例

在本例中我們建立ㄧ名稱為myUser的自訂物件，內有兩個公開成員屬性name及phone. 另外我們在物件中設置ㄧ個名為buildMessage的私有方法，用來在物件內產出結果訊息的內容. 除了私有方法buildMessage外我們還有ㄧ個名稱為sayHi的公開方法，用來以彈出視窗展示buildMessage所提供的訊息.

在物件程式碼最後的return指令中，我們用物件實字建立ㄧ個物件傳回，內含name， phone兩屬性及sayHi方法.

我們在myUser的匿名函式中安排了兩個輸入參數userName及userPhone，用來初始化myUser物件的name及phone屬性. 產生myUser物件只需用new建構子建立myUser物件，並提供userName及userPhone兩輸入參數的值即可. 在本示範中我們產出兩個myUser物件，並利用第二個產出的物件呼叫sayHi方法.

程式執行結果為

JavaScript 其他物件導向的議題在後續課程中再為各位介紹.

PS: 版權所有,侵犯著作權必告.