1. 介紹
第一眼看到ES6新增加的 arrow function 時，感覺非常像 lambda 表達式。
那么arrow function是干什么的呢？可以看作為匿名函數的簡寫方式。
如：
var addition = function(a, b) { return a + b };
// 等同
var addition = (a, b) => { return a + b };
2. 語法
arrow functions(箭頭函數)主要有以下4種語法：
// 1)基本
(param1, param2, paramN) => { expression }
(param1, param2, paramN) => { return expression }
// 2)只有一個參數時，括號是可選的
(singleParam) => { expression }
singleParam => { expression }
// 3)不帶參數時，在參數區域帶有括號
() => { expression }
// 4)函數主體若不帶{}大括號，表示直接返回函數主體
(param1, param2, paramN) => { return expression }
(param1, param2, paramN) => expression // 等同於上面
3. 特性
3.1 沒有自身this
arrow function沒有自身的this，即在arrow function內部使用this時，此this指向創建此函數時的外部this。
場景：在Web開發時都會用到ajax的回調，回調函數內的this常常用外部創建的self、that、_this等變量暫存，而當回調函數采用arrow function方式時就可以直接使用外部的this。
示例：
var ajax = function(url, successCallback) {
// TODO ajax
successCallback && successCallback();
};
var productBLL = {
productName: '瓜子',
query: function() {
// arrow function
ajax('query', () => {
console.log(this); // => productBLL
console.log(this.productName); // => 瓜子(productBLL.productName)
});
}
};
productBLL.query();
3.2 call()、apply() 調用無法改變this
就像上面講的arrow function沒有自身的this，當用call()或apply() 調用箭頭函數時無法改變函數主體內的this。
示例：
// 普通函數
var sayHello = function(userName) {
console.log('hi ' + userName);
console.log(this);
};
sayHello.call({ x: 1 }, 'polk'); // => this == { x: 1 }
// 箭頭函數
var sayHello2 = (userName) => {
console.log('hi ' + userName);
console.log(this);
};
sayHello2.call({ y: 2 }, 'polk'); // => this == window
3.3 沒有arguments
使用arrow function創建的函數，自身是沒有arguments成員。
var sayHello = (userName) => {
console.log('hi ' + userName);
console.log(arguments); // => Uncaught ReferenceError: arguments is not defined
};
3.4 arrow function作為某個對象的方法成員時，this指向非此對象
當某個對象的方法為arrow function時，那么此方法內的this指向並非是此對象。
示例：
var productBLL = {
productName: '瓜子',
sayName: function() {
console.log(this.productName);
},
sayName2: () => {
console.log(this.productName);
}
};
productBLL.sayName(); // => 瓜子
productBLL.sayName2(); // => undefined, this == window
4.擴展閱讀
arrow function MDN：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions