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

標籤：asp   使用   函數運算式   調用函數   範圍   基本文法   ams   uil   學習交流   

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值，所以它將從周圍的函數擷取，因此，你將得到：

 image

正如你所看到的，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將拋出以下異常：

 image

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

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

發生這種情況的原因是因為箭頭函數沒有原型屬性。請記住：雖然箭頭函數為你提供了編寫函數運算式的簡短方法，但它沒有自己的this值，也不能用作建構函式。

歡迎加入學習交流群569772982，大家一起學習交流。

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