輕鬆學習 JavaScript——第 6 部分：JavaScript 箭頭函數

JavaScript箭頭函數是ECMAScript 6中引入的編寫函數表達式的一種簡便方法。一般，在JavaScript中，能夠經過兩種方式建立函數：

• 函數語句。
• 函數表達式。

能夠以下所示建立函數語句：

function add(num1, num2) { var res = num1 + num2; return res; } var sum = add(7, 2); console.log(sum);

也能夠建立相同功能的函數表達式，以下所示：

var add = function (num1, num2) { var res = num1 + num2; return res; } var sum = add(7, 2); console.log(sum);

ECMA 2015（或ECMA Script 6）引入了更短的語法來編寫函數表達式，稱爲箭頭函數。使用箭頭函數，你能夠將上面的函數表達式編寫爲：

var add = (num1, num2) => { return num1 + num2; };

正如你所看到的，使用箭頭函數編寫的函數表達式更短。

箭頭函數的基本語法規則

首先，參數應該在小括號中傳遞。你能夠建立有兩個參數的箭頭函數，以下所示：

ar add = (num1, num2) => { return num1 + num2; };

若是隻要傳遞一個參數，那麼括號是可選的，能夠選擇忽略。你能夠建立一個參數的箭頭函數，以下所示：

var add = num => { return num * 10; };

若是沒有參數，那麼你必需要有一個空括號——不能沒有。因此對於沒有參數的函數，箭頭函數是這樣寫的：

var add = () => { console.log("hey foo") };

若是函數中有單個表達式或語句：

• 在主體中使用括號是可選的。
• 使用return語句是可選的。

你能夠重寫add函數，而不使用函數體中的括號和return語句，以下所示：

var add = (num1, num2) => num1 + num2;

你也可使用控制檯語句編寫不帶參數的函數，以下所示：

var add = () => console.log("hey");

返回對象字面量

JavaScript箭頭函數也能夠返回對象字面量。惟一的要求是你須要把返回對象裝入小括號中，以下所示：

var foo = (name, age) => ({ name: name, age: age }) var r = foo("my cat", 22); console.log(r);

正如你所看到的那樣，要返回的對象被放在了小括號內。若是你不這樣作，那麼JavaScript將沒法區分對象字面量和函數體。

箭頭函數支持rest參數

JavaScript箭頭函數支持另外一個ES6功能：rest參數。你能夠在箭頭函數中使用rest參數，以下面的代碼所示：

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功能：默認參數。此處詳細介紹了默認參數。你能夠在箭頭函數中使用默認參數，以下所示：

var add = (num1 = 9, num2 = 8) => { var result = num1 + num2; return result; } var r = add(); console.log(r);

在上面的代碼中，箭頭函數中有默認參數。調用該函數時，咱們沒有傳遞任何值，而且因爲默認參數的存在，輸出將是17。

「this」在箭頭函數中如何工做？

箭頭函數沒有它本身的this值。箭頭函數中的this值老是從封閉範圍繼承。在JavaScript中，每一個函數都有它本身的this值，這取決於代碼是如何調用函數的。請仔細看下面列出的代碼：

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值。

使用箭頭函數的限制條件

應用箭頭函數時要注意的一些限制條件：

• 箭頭函數沒有參數對象。
• 箭頭函數不能與新運算符一塊兒使用，所以它不能用做構造函數。
• 箭頭函數沒有原型屬性。

若是你嘗試使用箭頭函數做爲構造函數，那麼你會獲得異常。請看下面的代碼：

var foo = (name, age) => { name = name, age = age };
var f1 = new foo("cat", 6);

代碼試圖經過使用箭頭函數foo做爲構造函數來建立對象f1，JavaScript將拋出如下異常：

並且，當你試圖輸出箭頭函數的原型值時，你會獲得undefined的輸出：

var foo = (name, age) => { name = name, age = age }; console.log(foo.prototype);

發生這種狀況的緣由是由於箭頭函數沒有原型屬性。請記住：雖然箭頭函數爲你提供了編寫函數表達式的簡短方法，但它沒有本身的this值，也不能用做構造函數。

系列目錄

輕鬆學習 JavaScript——第 1 部分：瞭解 let 語句

輕鬆學習 JavaScript——第 2 部分：函數中的 Rest 參數

輕鬆學習 JavaScript——第 3 部分：函數中的默認參數

輕鬆學習 JavaScript——第 4 部分：函數中的 arguments 對象

輕鬆學習 JavaScript——第 5 部分：簡化函數提高

輕鬆學習 JavaScript——第 6 部分：JavaScript 箭頭函數