之前我们有说过，再调用函式的时候，浏览器会传递隐藏的参数给我们函式
一个是「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