Johnson Mao

Day.22 「讓我們在更深入函式～」 —— JavaScript call & apply & arguments

「讓我們在更深入函式～」 —— JavaScript call & apply & arguments

之前我們有說過，再調用函式的時候，瀏覽器會傳遞隱藏的參數給我們函式 一個是「this」，除了 this 還有另一個參數是「arguments」！

我們都知道全域函式直接調用的話，this 會指向 window。 但其實函式有方法給我們綁定 JavaScript 中的「this」

#Arrow function

這是 ES6 新增的函式，叫做「箭頭函式表達式」，看到表達式就知道可以直接賦值。 用法其實跟用宣告的函式很像！

複製成功！
const normal = function(){}  // 普通宣告函式
const echo = () => {}        // 箭頭函式

箭頭函式的優點

以加法為例子

複製成功！
const plus = (a, b) => {
  return a+b;
}
console.log( plus(1, 2) );  // 3

當執行程式碼只有一行時，可以省略大括號與 return

複製成功！
const plus = (a, b) => a + b;
console.log( plus(1, 2) );  // 3

是不是覺得很精簡，跟魔法一樣！

#call & apply

平常直接調用函式，this 的指向會朝 window 這個物件

複製成功！
function echo () {
  console.log( this );  
}

echo() // window

但當我們利用 call() 或 apply() 方法，第一個參數設為物件，就可以把 this 指向該物件

複製成功！
const obj = {};
echo.call(obj);    // {}
echo.apply(obj);   // {}

除了第一個要傳遞物件外，也能正常的傳遞參數，只是傳遞參數的型別不太一樣。

複製成功！
function echo (a, b) {
  console.log("a = "+ a);
  console.log("b = "+ b);
}

echo.call(null, 1, '我是 b');    // "a = 1" "b = 我是 b" 
echo.apply(null, [1, '我是 b']); // "a = 1" "b = 我是 b"

#判斷 this 的情況

加上之前所認識的，我們更加能掌控我們的 this 了

#arguments

如何知道有這個參數，很簡單，直接 console.log() 看看。

複製成功！
function echo () {
  console.log(arguments);
}

echo();  // Argument {}

argument 是一個類似陣列的物件，會把我們函式內的參數傳遞到 arguments 裡面保存。

複製成功！
function echo () {
  console.log(arguments);
  console.log("參數有 "+ arguments.length +"個");
}

echo("a", 1);  // { 0: "a", 1: 1 }  "參數有 2 個"

這樣即使我們函式本身不使用參數，也能透過物件取值的方式 argument[index] 來獲取參數

很常使用在參數不確定有幾個的時候。

像是把函式內的參數總和取平均值

複製成功！
function average () {
  let total = 0;
  
  for(let i = 0; i < arguments.length; i++) {
    total += +arguments[i];
  }
  console.log(total / arguments.length);
}

average(1, 2, 3, 4, 5);  // 3

也能使用 callee 來獲取執行的函式本身，在配合匿名立即執行函式使用時非常方便。

複製成功！
(function() {
  console.log(arguments.callee);
})();  
/*
  function() {
    console.log(arguments.callee);
  }
*/

#總結

今天又更認識函式的操作方法了，函式是 JavaScript 的精隨之一，也更了解如何操控 this 了～

#參考資料

回首頁