JavaScript 入門指南 - 物件

JavaScript 入門指南 - 物件

設計物件 (object) 同樣使用關鍵字 (keyword) function ，物件中可以有屬性 (attribute) 與方法 (method)




屬性為專屬於物件的變數 (variable) ，方法則是物件專屬的函數 (function) ，我們舉一例如下

function Demo() {
    this.a;
    this.b;
    
    this.do_something = do_something;
    function do_something() {
        return this.a + this.b;
    }
}

t = new Demo();
t.a = 11;
t.b = 22;
document.write(t.do_something());

/* 《程式語言教學誌》的範例程式
   http://pydoing.blogspot.com/
   檔名：classdemo.js
   功能：示範 JavaScript 程式
   作者：張凱慶
   時間：西元 2012 年 12 月 */

Demo 為物件名稱，後面同樣接小括弧，小括弧中為參數列 (parameter list) ，沒有參數 (parameter) 的話，小括弧就留空

function Demo() {

下面兩行定義兩個屬性 this.a 與 this.b ， this 為關鍵字之一，用於定義物件中的屬性與方法名稱

this.a;
this.b;

如果沒有用 this ， a 與 b 就只是 Demo() 裡的區域變數 (local variable) 。


所以定義方法就得先用 this 定義方法名稱，接著再用 function 定義方法內容

this.do_something = do_something;
function do_something() {
    return this.a + this.b;
}

這個範例很簡單，我們建立 Demo 物件後，設定屬性 a 為 11 ， b 為 22 ，然後在 docment 的 write() 裡呼叫 do_something() 。下面是用來載入的 HTML 文件
以下的 HTML 文件載入

<script language="JavaScript" src="classdemo.js"></script>

<!-- 《程式語言教學誌》的範例程式
      http://pydoing.blogspot.com/
      檔名：classdemo.html
      功能：示範 JavaScript 程式
      作者：張凱慶
      時間：西元 2012 年 12 月 -->

瀏覽器開啟如下



但是方法的定義寫在物件定義裡有個小缺點，就是物件必須帶著方法的程式碼走，當建立的物件越多，每個物件都帶著相同重複的方法程式碼，這樣其實滿耗記憶體的。其實我們可以把方法從物件定義裡取出來，然後在其他地方用預設的 prototype 性質定義方法，像是上例可改成

function Demo() {
    this.a;
    this.b;
}

Demo.prototype.do_something = function() {
    return  this.a + this.b;
}

t = new Demo();
t.a = 11;
t.b = 22;
document.write(t.do_something());

/* 《程式語言教學誌》的範例程式
   http://pydoing.blogspot.com/
   檔名：classdemo2.js
   功能：示範 JavaScript 程式
   作者：張凱慶
   時間：西元 2012 年 12 月 */

這樣物件就只會裝有屬性，方法只在呼叫時才會取得連結，好處就是可以節省記憶體空間。


好了，下面我們要開始開發一個編密碼的軟體，藉此介紹更多 JavaScript 的特性，先來認識 HTML DOM 吧！

中英文術語對照
物件	object
關鍵字	keyword
屬性	attribute
方法	method
變數	variable
函數	function
參數列	parameter list
參數	parameter
區域變數	local variable

您可以繼續參考

基礎篇

• 認識 JavaScript 語言


• 如何執行 Javascript 程式


• 資料型態與變數


• 變數命名規則


• 運算式與陳述


• 選擇


• 迴圈


• 函數


• 物件

相關目錄

回 JavaScript 入門指南
回 JavaScript 教材
回首頁

參考資料

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects
http://www.w3schools.com/JS/js_obj_intro.asp
http://www.tutorialspoint.com/javascript/javascript_objects.htm

訂閱：
張貼留言 (Atom)

window.___gcfg = { 'lang': 'zh-TW' };