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

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

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

Arrow function

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

const normal = function(){}  // 普通宣告函式
const echo = () => {}        // 箭頭函式

箭頭函式的優點

• 更簡短的函式寫法
• this 變數強制綁定

以加法為例子

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);   // {}

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

• call，第一個參數為 this 指向，後面參數正常帶入就可以了
• apply，第一個參數為 this 指向，第二個參數必須使用陣列，參數放在陣列內

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 了

• 以函式直接調用的 this 會指向 window
• 以物件方法的方式調用，this 會指向該物件
• 以構造函式的方式調用，this 會指向新增的物件
• 使用 call 或 apply 方法調用時，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 了～

參考資料

• 008 天 重新認識 JavaScript