JavaScript ..
JavaScript ..

软件开发平台及语言笔记大全(超详细)

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 相當普遍，特別是事件處理器的設定將會大量依賴匿名函式的寫法。

书籍推荐