前面講 函式 function 時提到參數,回頭看自己打的文章發現錯誤的地方修正了一下。
Parameter:函式宣告裡的參數。
Argument:引數,呼叫函式時傳給 params 的資料。
練習:觀察不同形式的函式參數的位置
// 練習改成函式運算式
const sum = function (a, b) {
return a + b;
};
// 練習改成箭頭函式
const sum = (a, b) => a + b ;
在呼叫函式的時候最常見的就是函式名稱加上小括號 ()
,而小括號內就是傳給參數的值,也稱引數 (arguments)。
而雖然在宣告函式時有指定參數的數量(像上例為兩個參數),但是在呼叫的時候並不會檢查有幾個引數。也就是說把
sum(3, 4)
// 寫成
sum(3, 4, 5, 6, 7)
// 或是
sum()
都是可以的,但是沒有指定的部分都會變成 undefind,而多傳入的參數在多數情況下沒有意義。
實際上函式被呼叫的時候,會產生一個 arguments 物件,而這個物件是我們呼叫函數時所帶入的參數。而拿剛剛舉的例子
sum(3, 4, 5, 6, 7)
多傳入的參數,我們可以函式裡透過 arguments 這個物件來取得。因為有五個參數會先印出 5,然後回傳 a+b 也就是 3+4 等於 7 的結果。
const sum = function (a, b) {
console.log(arguments.length); // 5
return a + b;
};
sum(3, 4, 5, 6, 7); // 7
arguments 雖然看起來像陣列(類陣列),但其實他是帶有索引特性的物件,內建 length 屬性。有取得參數的方式也能讓函式更彈性的運用
Note: 「類陣列 (Array-like)」 的意思是 arguments 一樣擁有 length 這項屬性,以及從 0 開始的索引,但是它沒有陣列內建的方法像是 forEach() ,或是 map() 。 -- MDN-Arguments 物件
例如取索引裡其他的值來運算:
// sum 有五個值,分別為 arguments[0] 到 arguments[4]
const sum = function (a, b) {
return a + arguments[4]; // 索引從 0 開始
};
sum(3, 4, 5, 6, 7); // 10,3 + 7 = 10
或者用在迴圈:
const sum = function () {
let num = 0;
for (var i = 0; i < arguments.length; i++) {
num += arguments[i];
}
return num;
};
sum(3, 4, 5); // 12
另外 arguments 物件還有一個屬性,當我們想在函式內呼叫函式本身,可以透過 arguments.callee(),這在匿名函式裡特別有用。MDN-arguments.callee
const sum = function (a, b) {
console.log(arguments.callee === sum);
return a + b;
};
sum(3, 4, 5, 6); // true
這裡列舉幾個用法,有許多種可以參考 MDN-Arguments 物件。
而要注意的是「嚴格模式」不能用 arguments.callee 和 arguments.caller 以及在箭頭函式無法使用 arguments 物件。
008天重新認識JavaScript
MDN-Arguments 物件
MDN-arguments.callee