JavaScript 快速入門(7/10)- 函式


我們已經瞭解如何撰寫最簡單的JavaScript敘述句以提供可執行的程式運算功能,這一節要進一步來看函式,它用來包裝一群相關的敘述句,提供其它的敘述句調用以重複使用特定的功能。建立一個新的函式需要以下的語法:

function f(){
     // 函式內容

其中一開始的 function 是關鍵字,緊接著 f 是自訂函式名稱,這個名稱用來識別此函式,並支援外部程式的調用以執行函式中的程式功能。函式名稱後方是一個小括弧,需要的時候,可以選擇性的於其中配置數量不等的參數,例如以下的函式定義:

function add(x,y){
     // 函式內容
}  

函式 add 接受兩個參數,分別是 x 與 y ,而在大括弧中,可以針對這兩個參數進行運算,假設此函式針對兩個整數進行加法運算,因此在調用函式時必須傳入執行加法運算的兩個參數 x 與 y 以順利執行。考慮以下的 add 函式內容:

function add(x,y){
     console.log(x+y)  ;

這個函式會針對參數進行加總運算,然後將結果輸出。以下這一行程式碼將調用 add 函式,並且執行 10 與 20 的加總:

add(10,20) ; 

最後於控制台會輸出 30 的結果。考慮以下的程式片段,其中建立四則運算函式,並逐步調用輸出。以下是一段簡單的範例程式:

<script>
function add(x, y) {
    console.log(x + y);
}
function subtract(x, y) {
    console.log(x - y);
}
function multiply(x, y) {
    console.log(x * y);
}
function divide(x, y) {
    console.log(x / y);
}
add(100, 200);
subtract(100, 200);
multiply(100, 200);
divide(100, 200);
<script>

完成執行之後,這段程式碼將在控制台輸出如下:

300
-100
20000
0.5

》函式回傳值-return

函式可以透過 return 進行指定值的回傳,語法如下:

function f(){
//函式內容…
     return r ;
}

其中 return 敘述回傳r值,這可以是一個單純的值或複合資料物件,而函式將在 return 之後跳出,不再執行,因此不可以將所要執行的程式碼配置於 return 之後,如此將導致一段無法到達的程式碼。

調用此類型的函式必須以變數接收回傳的值,或是直接將函式當作一個值進行其它的運算,以下的程式片段說明 return 的用法。

<script>
    function add(x, y) {
        console.log('執行加法運算 …');
        return x + y;
        console.log('end');
    }
    var sum = add(100, 300);
    console.log(sum);
</script>

函式 add() 透過return 回傳參數 x與y的加總結果,因此調用此函式時,以變數sum儲存回傳的結果然後將其輸出控制台。

執行加法運算
400

以上的輸出結果中,不包含end訊息,因為 這一行配置於 return 敘述之後。

》匿名函式

在JavaScript 程式當中,函式本身是一個物件值,因此你可以將其指定給一個變數,考慮以下的函式:

function hello() {
consol.log('Hello, function !');
}

hello是一個典型的函式,直接引用其名稱即可執行函式的內容,讀者對於相關的語法應當已經熟悉了,現在我們調整函式的寫法:

var hello = function () {
console.log('Hello, function !');
}

其中宣告一個變數 hello ,並將函式的內容指定給這個變數,與典型的函式宣告語法比較,由於這裏透過變數hello識別函式,因此函式本身並不需要再指定名稱,執行這個函式的語法只需調用變數名稱如下:

hello() ; 

由於此種函式並沒有指定名稱,因此稱之為匿名函式。如果需要一段即時執行的程式碼,可以透過匿名函包裝並且即時執行,同樣的以上述的 hello 函式為例,改寫如下:

(function () {
 console.log('Hello, function !');
})();

將匿名函式用小括弧包起來,然後緊接著連接一個小括弧,此匿名函式的內容將會直接被執行。匿名函式在JavaScript 相當普遍,特別是事件處理器的設定將會大量依賴匿名函式的寫法。






2 則留言:

匿名 提到...

老師你好
》函式回傳值-return 的範例輸出結果打錯了

執行加法運算 …
22 //應該是400

康廷數位文教網 提到...

Hi,您好:

已修正,謝謝 :D