JavaScript 語言核心（9）不可輕忽的函式基礎

JavaScript 語言核心（8）數字為特性的陣列 << 前情

對於要重複執行的內容，你可以使用 function 定義函式，這在先前的文章中都看過一些例子，例如：

function max(num1, num2) {
    return num1 > num2 ? num1 : num2;
}

console.log(max(10, 20));  // 20

在上面的例子示範了函式的基本宣告與呼叫方式。函式使用 function 宣告名稱，參數位於括號之中，使用 return 傳回執行結果，如果沒有宣告 return 傳回任何結果，預設傳回 undefined。

在函式上的參數宣告，只是傳入引數的具名參考，實際上，宣告函式時若傳入的引數少於參數是可行的，不足的部份，參數就是 undefined：

function func(a, b) {
    console.log(a);
    console.log(b);
}

func(10, 20);         // 10 20
func(10);             // 10 undefined
func();               // undefined undefined
func(10, 20, 30, 40); // 10 20

在上例中，你也看到了，就算傳入比參數個數還多的引數也是可行的，那多的引數跑到哪去了？事實上，在函式內部會自動宣告 arguments 名稱參考至具陣列外觀的物件，上頭帶有所有傳入的引數。例如，你可以如下設計一個加總數值的函式：

function sum() {
    var sum = 0;    
    for(var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

console.log(sum(1, 2));;      // 3
console.log(sum(1, 2, 3));    // 6
console.log(sum(1, 2, 3, 4)); // 10

arguments 不是 Array 實例，它只是具有數字作為特性，特性參考至傳入的引數，並具有 length 特性代表傳入引數的個數。

在 EMCAScript 5 前的版本，參數只是具名的引數，你改變參數的值，arguments 對應索引的參考值也會相應的改變：

function func(a, b) {
    console.log(a + ': ' + arguments[0]);  // 10: 10
    console.log(b + ': ' + arguments[1]);  // 20: 20
    a = 0;
    b = 0;
    console.log(a + ': ' + arguments[0]);  // 0: 0
    console.log(b + ': ' + arguments[1]);  // 0: 0
    arguments[0] = 100;
    arguments[1] = 200;
    console.log(a + ': ' + arguments[0]);  // 100: 100
    console.log(b + ': ' + arguments[1]);  // 200: 200
}

func(10, 20);

然而，若採用 EMCAScript 5 嚴格模式，參數的值 與 arguments 的元素值彼此互不影響，例如：

'use strict'

function func(a, b) {
    console.log(a + ': ' + arguments[0]);  // 10: 10
    console.log(b + ': ' + arguments[1]);  // 20: 20
    a = 0;
    b = 0;
    console.log(a + ': ' + arguments[0]);  // 0: 10
    console.log(b + ': ' + arguments[1]);  // 0: 20
    arguments[0] = 100;
    arguments[1] = 200;
    console.log(a + ': ' + arguments[0]);  // 0: 100
    console.log(b + ': ' + arguments[1]);  // 0: 200
}

func(10, 20);

當然，改變參數值本身也不是個好的實踐，應該避免！ECMAScript 5 的嚴格模式下，也不允許重複的參數名稱。例如，以下將會發生 SyntaxError：

'use strict'

function func(a, a, b) {
    // 做些事 ...
}

由於呼叫函式時傳入的引數個數不一定要等於參數個數，因此若要確認引數等於參數個數，可透過 arguments 的 length 來檢查傳入的引數個數。例如：

function plus(a, b) {
    if(arguments.length != 2) {
        throw new Error('必須有兩個引數');
    }
    return a + b;
}

console.log(plus(10, 20)); // 30
console.log(plus(10));     // Error: 必須有兩個引數

事實上，在 JavaScript 程式設計上的慣例，很少檢查引數個數，而是在引數不足時提供預設值，這很容易辦到，因為引數不足時，不足的參數會是 undefined，而 undefined 在判斷式中會被當 false，所以可以撰寫如下來提供預設值：

function rangeClosed(startInclusive, endInclusive, step) {
    var s = step || 1;
    var numbers = [startInclusive];
    for(var i = 0; numbers[i] < endInclusive; i++) {
        numbers.push(numbers[i] + s);
    }
    return numbers;
}

rangeClosed(1, 5, 2).forEach(function(elem) { // 1 3 5
    console.log(elem);
});

rangeClosed(1, 5).forEach(function(elem) {    // 1 2 3 4 5
    console.log(elem);
});

在上例是一個數值產生器，startInclusive、endInclusive 一定要提供，若不提供 step 的話，預設步進值就是 1。

如果在選項非常多時，還會採用選項物件（Option object）的方式。例如：

function func(option) {
    var opt = {
        x : option.x || 10,
        y : option.y || 20,
        z : option.z || 30
    };
    console.log(opt.x);
    console.log(opt.y);
    console.log(opt.z);
}

func({x : 100}); // 100 20 30

func({           // 100 200 30
    x : 100, 
    y : 200 
});

func({           // 100 200 300
    x : 100, 
    y : 200, 
    z : 300
});

在上例中，呼叫函式時必須提供物件，物件上帶有函式所需的資料，函式內部對於物件上沒有提供資料時，會提供預設值。

你可以在陳述句（像是 if、for 等）區塊或函式中宣告函式，不過，在 ECMAScript 5 嚴格模式下，函式只能是在頂層或其他函式中的第一層，因此，以下在 ECMAScript 5 嚴格模式下會引發 SyntaxError：

'use strict'

if(true) {
    // SyntaxError: In strict mode code, functions can only be declared at top level or immediately within another function.
    function func(a) {
        console.log(a);
    }
}

後續 >> JavaScript 語言核心（10）初探一級函式