目錄 : 網頁設計學習課程參考
先前我們介紹的許多JavaScript內建功能都是以物件的方式提供功能給我們使用，如我們在前ㄧ課程所介紹的Array物件及其內建的方法. 在設計網頁程式時，我們常會以物件的型式寫我們的程式. 舉例來說，我們常會把ㄧ些會重覆使用的功能及其所需資料包裝為一個物件，然後在多個網頁中重覆使用. 另外有些人在設計網頁時，會把每ㄧ個網頁稱為一個檢視(View)，每個檢視都配置ㄧ個對應的檢視物件(View Model), 把網頁畫面中的資料欄位，都設計成檢視物件的屬性. 然後把網頁中的操控動作設計為檢視物件的方法. 如此我們就可為網頁所需的程式引入一個架構，而不是沒有組織地隨意撰寫. (上述的例子就是所謂的MVVM架構，有機會再向各位介紹). 因此學習如何設計自己的物件是必要的.
此處我們定義ㄧ個名稱為user1的物件, 定義的時候需使用new運算子建立一個Object物件. 語法為
var user1 = new Object();
然後我們為user1物件新增一個name屬性並指派該屬性值. 語法為
user1.name="Patrizio Sun";
接著以相同方式定義一個phone屬性. 最後我們為user1物件定義一個sayHi方法. 定義方法是在等號右側使有ㄧ個匿名函數定義該方法執行的工作. 匿名函數可使用或不使用輸入參數. 在本例中, sayHi方法擁有一個名稱為message的輸入參數, sayHi方法會根據user1物件的name屬性及message輸入參數產出一個訊息以彈出視窗展示. 語法為
user1.sayHi = function(message) {
alert("Hi, " + user1.name + ", " + message);
};
請注意我們使用user1.name即可取用user1物件的name屬性. 我們在緊跟著的兩個document.write指令中分別列出user1.name及user1.phone屬性.
我們使用user1.sayHi("welcome")即可呼叫user1物件的sayHi方法並輸入"welcome"作為輸入參數.
程式執行結果為
JavaScript定義物件的第二種方式是使用物件實字(Object literal). 使用物件實字定義物件時是使用一對大抬號，並把物件的屬性及方法在大抬號中逐一定義. 定義屬性及方法時需把名稱寫在冒號 : 左側，並在冒號 : 右側定義屬性值或方法的匿名函數.
在下例中我們使用物件實字定義一個和上述user1物件擁有相同屬性及方法的物件，名稱為user2.
程式執行結果為
上述兩種方式是用來只定義一個物件. 如果同ㄧ規格的物件(擁有相同屬性及方法)要產生好幾個，則要重覆整段程式碼好幾次，而且如在不同地方使用相同規格的物件還要把同一段程式碼寫在不同的地方，甚為不便. 在下一課中將各位介紹使用函數建構式定義物件，解決上述問題.
PS: 版權所有,侵犯著作權必告.
先前我們介紹的許多JavaScript內建功能都是以物件的方式提供功能給我們使用，如我們在前ㄧ課程所介紹的Array物件及其內建的方法. 在設計網頁程式時，我們常會以物件的型式寫我們的程式. 舉例來說，我們常會把ㄧ些會重覆使用的功能及其所需資料包裝為一個物件，然後在多個網頁中重覆使用. 另外有些人在設計網頁時，會把每ㄧ個網頁稱為一個檢視(View)，每個檢視都配置ㄧ個對應的檢視物件(View Model), 把網頁畫面中的資料欄位，都設計成檢視物件的屬性. 然後把網頁中的操控動作設計為檢視物件的方法. 如此我們就可為網頁所需的程式引入一個架構，而不是沒有組織地隨意撰寫. (上述的例子就是所謂的MVVM架構，有機會再向各位介紹). 因此學習如何設計自己的物件是必要的.
我們使用下列的例子來向各位介紹設計JavaScript物件常見的方式.
範例
第ㄧ種方法是使用JavaScript的Object物件來自訂ㄧ個物件. 完成定義一個空的物件後再定義該物件的屬性及方法. 我們以下面的程式作為例子.
範例
第ㄧ種方法是使用JavaScript的Object物件來自訂ㄧ個物件. 完成定義一個空的物件後再定義該物件的屬性及方法. 我們以下面的程式作為例子.
此處我們定義ㄧ個名稱為user1的物件, 定義的時候需使用new運算子建立一個Object物件. 語法為
var user1 = new Object();
然後我們為user1物件新增一個name屬性並指派該屬性值. 語法為
user1.name="Patrizio Sun";
接著以相同方式定義一個phone屬性. 最後我們為user1物件定義一個sayHi方法. 定義方法是在等號右側使有ㄧ個匿名函數定義該方法執行的工作. 匿名函數可使用或不使用輸入參數. 在本例中, sayHi方法擁有一個名稱為message的輸入參數, sayHi方法會根據user1物件的name屬性及message輸入參數產出一個訊息以彈出視窗展示. 語法為
user1.sayHi = function(message) {
alert("Hi, " + user1.name + ", " + message);
};
請注意我們使用user1.name即可取用user1物件的name屬性. 我們在緊跟著的兩個document.write指令中分別列出user1.name及user1.phone屬性.
我們使用user1.sayHi("welcome")即可呼叫user1物件的sayHi方法並輸入"welcome"作為輸入參數.
程式執行結果為
JavaScript定義物件的第二種方式是使用物件實字(Object literal). 使用物件實字定義物件時是使用一對大抬號，並把物件的屬性及方法在大抬號中逐一定義. 定義屬性及方法時需把名稱寫在冒號 : 左側，並在冒號 : 右側定義屬性值或方法的匿名函數.
在下例中我們使用物件實字定義一個和上述user1物件擁有相同屬性及方法的物件，名稱為user2.
程式執行結果為
PS: 版權所有,侵犯著作權必告.
留言
張貼留言