JavaScript腳本語言(5)-函數與物件

JavaScript一開始是單純的網頁腳本語言,所以和正規的程式語言相比,它的結構、語法都比較簡單(雖然現在有越來越複雜的趨勢)。本篇介紹的是JavaScript的函數與物件,如果熟知一般物件導向程式語言的寫法,就會明白JavaScript的語法有多麼容易了。在本篇文章中一定要認識的字叫「function」,我們可以看到在JavaScript中一個語法的多種用途。

物件、屬性與方法

這裡先說明一下JavaScript和物件導向程式語言的不同,如果讀者對於物件導向程式設計不了解,可以跳過這一段。在傳統物件導向程式語言中,類別(Class)是物件(Object)的基礎原型,也可以說是抽象的宣告(參考物件導向程式設計)。類別必須透過”new”的宣告來產生實體的物件。然後,在每個物件中會有各自的屬性(儲存資料)及方法(執行動作的函數)。但是在JavaScript中,類別和函數的宣告方式是一樣的,也就是說它沒有sub(副程式)、class(類別),只有一個 function 的指令。決定它是否為 class,就是看我們有沒有宣告new,再配合巢狀的 function 宣告,可以在物件中增加方法。下面依序使用範例做解說。

函數宣告

JavaScript的函數宣告方式與一般程式語言類似,但不需要宣告傳入的資料型態,也不需要註明回傳值,當我們需要回傳值時,只要在 function 中使用 return 指令回傳即可。下面是一個簡易三角函數的宣告,透過第 8 行的彈出視窗可以顯示這個函數的回傳值:

function trigonometric(a, b) {              //輸入直角三角型二個短邊長
    //Math.pow(底數, 次方):計算次方
    var cSquare = Math.pow(a, 2) + Math.pow(b, 2);  //二邊長的平方相加等於鈄邊平方

    //Math.sqrt(底數):開平方
    return Math.sqrt(cSquare);          //回傳鈄邊長
}
alert( trigonometric(3,4) );    //alert:彈出確認視窗

類別宣告

類別的宣告看起來和函數一樣,不同點在於要使用 new 來建立物件,並且在 function 中使用 this 來指定屬性。下面直接使用範例來說明:

function round(r) {
    var pi = 3.14159265;    //只能在function內使用的變數

    //使用 this.變數名稱 宣告物件屬性
    this.radius = r;        //半徑
    this.diameter = 2 * r;  //直徑
    
    function round_diameter(d) {        //圓周長
        return d * pi;
    }
    this.circumference = round_diameter(this.diameter);
    
    //var表示區域變數,因此round_area只能在function內使用
    var round_area = function(r) {
        return pi * Math.pow(r, 2);     //圓面積
    };
    this.area = round_area(this.radius);
}
var a = new round(5);
alert( "半徑=" + a.radius + "; 直徑=" + a.diameter + "; 圓周長=" + a.circumference + "; 圓面積=" + a.area );

首先我們看到 29 行使用「new 類別名稱」來宣告物件,20 行的 alert 則是使用「物件名稱.屬性名稱」來讀取物件屬性,接著我們來看看類別裡面的內容。前面介紹過JavaScript的變數宣告,var表示為區域變數,因此第 12 行的 pi 只能在function內使用,同樣的道理 24 行的 round_area 也只能在function內使用。接著我們看到第 15、16 行使用「this」這個關鍵字來指定物件的屬性,所以在 30 行可以讀取物件的屬性值。

這裡可以注意到兩種不同的方法宣告方式,18~21 行是圓周長,24~27 則是圓面積。做法都是先宣告一個function,然後再指定給物件屬性,只是function名稱位置不一樣而已。使用 18 行 round_diameter 的宣告方式,這個方法只能在function內使用;而 24 行的 round_area 如果前面不加 var,就會變成一個公開的方法,可以使用「物件名稱.方法名稱」來存取,例如 a.round_area(5);。

物件宣告

在前面範例的 29 行是自訂物件的宣告,但若我們一開始只想宣告一個空的物件,可以直接宣告成Object:

var b = new Object();
b.lable = "物件a的半徑=";
b.round = a;
alert( b.lable + b.round.radius );

當我們想要在物件裡增加屬性時,只要像 36 行使用「物件名稱.屬性名稱 = 屬性值;」就可以儲存任何想要存入的內容。如果要加入物件方法,可以用和上面範例 24~27 行一樣的方式加入;又或著想要合併兩個物件,則像 37 行使用「物件A名稱.屬性名稱 = 物件B名稱;」,把物件B合併到物件A之中。因此這段程式碼最後會輸出”物件a的半徑=5”。這裡要特別注意的是,如果輸出的屬性不存在(沒有指定過),則會輸出「undefined」的結果。

以上是JavaScript函數與物件的基本宣告方式,未來有機會再介紹更進一步的用法。