JavaScript箭頭函式是ECMAScript 6中引入的編寫函式表示式的一種簡便方法。通常，在JavaScript中，可以通過兩種方式建立函式：
- 函式語句。
- 函式表示式。
可以如下所示建立函式語句：
|
1 2 3 4 5 6 |
function add(num1, num2) { var res = num1 + num2; return res; } var sum = add(7, 2); console.log(sum); |
也可以建立相同功能的函式表示式，如下所示：
|
1 2 3 4 5 6 |
var add = function (num1, num2) { var res = num1 + num2; return res; } var sum = add(7, 2); console.log(sum); |
ECMA 2015（或ECMA Script 6）引入了更短的語法來編寫函式表示式，稱為箭頭函式。使用箭頭函式，你可以將上面的函式表示式編寫為：
|
1 |
var add = (num1, num2) => { return num1 + num2; }; |
正如你所看到的，使用箭頭函式編寫的函式表示式更短。
箭頭函式的基本語法規則
首先，引數應該在小括號中傳遞。你可以建立有兩個引數的箭頭函式，如下所示：
|
1 |
ar add = (num1, num2) => { return num1 + num2; }; |
如果只要傳遞一個引數，那麼括號是可選的，可以選擇忽略。你可以建立一個引數的箭頭函式，如下所示：
|
1 |
var add = num => { return num * 10; }; |
如果沒有引數，那麼你必須要有一個空括號——不能沒有。所以對於沒有引數的函式，箭頭函式是這樣寫的：
|
1 |
var add = () => { console.log("hey foo") }; |
如果函式中有單個表示式或語句：
- 在主體中使用括號是可選的。
- 使用return語句是可選的。
你可以重寫add函式，而不使用函式體中的括號和return語句，如下所示：
|
1 |
var add = (num1, num2) => num1 + num2; |
你也可以使用控制檯語句編寫不帶引數的函式，如下所示：
|
1 |
var add = () => console.log("hey"); |
返回物件字面量
JavaScript箭頭函式也可以返回物件字面量。唯一的要求是你需要把返回物件裝入小括號中，如下所示：
|
1 2 3 4 5 6 |
var foo = (name, age) => ({ name: name, age: age }) var r = foo("my cat", 22); console.log(r); |
正如你所看到的那樣，要返回的物件被放在了小括號內。如果你不這樣做，那麼JavaScript將無法區分物件字面量和函式體。
箭頭函式支援rest引數
JavaScript箭頭函式支援另一個ES6功能：rest引數。你可以在箭頭函式中使用rest引數，如下面的程式碼所示：
|
1 2 3 4 5 6 7 |
var add = (num1, num2, ...restparam) => { console.log(restparam.length); var result = num1 + num2; return result; } var r = add(67, 8, 90, 23); console.log(r); |
在這個例子中，當你使用帶有rest引數的箭頭函式時，輸出會是2和75，因為傳遞的額外引數的數量是2，num1和num2的總和是75。
箭頭功能支援預設引數
另外，JavaScript箭頭函式還支援另一個ES6功能：預設引數。此處詳細介紹了預設引數。你可以在箭頭函式中使用預設引數，如下所示：
|
1 2 3 4 5 6 |
var add = (num1 = 9, num2 = 8) => { var result = num1 + num2; return result; } var r = add(); console.log(r); |
在上面的程式碼中，箭頭函式中有預設引數。呼叫該函式時，我們沒有傳遞任何值，並且由於預設引數的存在，輸出將是17。
“this”在箭頭函式中如何工作？
箭頭函式沒有它自己的this值。箭頭函式中的this值總是從封閉範圍繼承。在JavaScript中，每個函式都有它自己的this值，這取決於程式碼是如何呼叫函式的。請仔細看下面列出的程式碼：
|
1 2 3 4 5 6 7 8 |
var Cat = { name: 'mew', canRun: function () { console.log(this) var foo = () => { console.log(this) } foo(); } }; |
在這裡，cat是一個物件字面量，它包括：
- 屬性名稱。
- 方法canRun。
在canRun方法中，我們建立了一個箭頭函式foo，給出了this值。由於箭頭函式沒有它自己的this值，所以它將從周圍的函式獲取，因此，你將得到：
正如你所看到的，this值在canRun方法和箭頭函式foo中是相同的。箭頭函式從繼承範圍得到this值。如果你對此不甚清楚，那麼請牢記以下兩條規則：
- 使用object.method在方法中獲取一個有意義的物件作為this值。
- 對於任何其他要求，使用箭頭函式，由於函式沒有自己的this值，所以它將繼承封閉範圍的this值。
使用箭頭函式的限制條件
應用箭頭函式時要注意的一些限制條件：
- 箭頭函式沒有引數物件。
- 箭頭函式不能與新運算子一起使用，因此它不能用作建構函式。
- 箭頭函式沒有原型屬性。
如果你嘗試使用箭頭函式作為建構函式，那麼你會得到異常。請看下面的程式碼：
|
1 2 |
var foo = (name, age) => { name = name, age = age }; var f1 = new foo("cat", 6); |
程式碼試圖通過使用箭頭函式foo作為建構函式來建立物件f1，JavaScript將丟擲以下異常：
而且，當你試圖輸出箭頭函式的原型值時，你會得到undefined的輸出：
|
1 2 |
var foo = (name, age) => { name = name, age = age }; console.log(foo.prototype); |
發生這種情況的原因是因為箭頭函式沒有原型屬性。請記住：雖然箭頭函式為你提供了編寫函式表示式的簡短方法，但它沒有自己的this值，也不能用作建構函式。