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.擴充套件閱讀