JavaScript - ES6 箭頭函數 | Leo 程式筆記 - 點部落

2017-04-22

在接下來的系列文章中，主要會以Angular JS 2 為系列的一個教學文

但是在開始之前，你不可不學會的新版JavaScript ES6的新寫法

原因在於Angular JS 2 裡面有不少程式碼是會透過ES6 來進行編寫的

因此在開始系列教學文之前，來先和各位聊聊 ES6的一些新東西帶各位認識認識。

箭頭函數(Fat arrow functions）是一個來自ECMAScript 2015（又稱ES6）的全新特性。

簡單的來說，是ES6版才有的新功能

箭頭函數的產生，主要為：更簡潔的語法讓父類別共享關鍵字this。

這樣講可能有些許模糊，我們帶個下面的例子讓大家看一下就知道了。

傳統JavaScript 的寫法

傳統的JavaScript函數語法並沒有提供任何的靈活性，每一次你需要定義一個函數時，你都必須輸入function () {}。這樣的一個架構

但是在ES6版之後為什麼大家的會這麼喜歡用它，有一個不可忽略的原因就是它有更簡潔的函數語法。

更簡潔的函數語法在有大量呼叫函數的情況下有特別明顯的好處。

以下例子的目的是使用jQuery來展示一個每秒都會更新的時鐘：

$('.current-time').each(function () {
  setInterval(function () {
    $(this).text(Date.now());
  }, 1000);
});

但是當我想要在setInterval中使用this來引用DOM元素時，很不幸，我們得到的只是一個屬於函數自身的this。

而一個通常的解決辦法是定義一個that或者self變量：（如果不懂為什麼的話可以參考一下我之前撰寫過的一篇關於 JavaScript this的介紹文）

但當使用了ES6當中的箭頭函數時，這個問題就不復存在了。因為它不產生屬於它自己函數內的this：

$('.current-time').each(function () {
  setInterval(() => $(this).text(Date.now()), 1000);
});

就如同剛剛上面開頭所說的，讓父類別共享關鍵字this 因此可以利用箭頭函數來達到我們所想的目的。

而箭頭函數就相當於匿名函數，並且簡化了函數定義。箭頭函數有兩種格式，一種像上面的，只包含一個表達式，連{ ... }和return都省略掉了。還有一種可以包含多條語句，這時候就不能省略{ ... }和return：

score => {
    if (score > 100) {
        return 100;
    }
    else {
        return score;
    }
}

有沒有發現和 lambda 表達式類似xD

arguments 屬性

然而在箭頭函數與普通函數還有一個區別就是，它沒有自己的arguments 屬性

在傳統的JavaScript 我們可以透過arguments Array 來取得函數的參數

function Test(msg){
    var temp = arguments[0];
    console.log(temp);
}

但是在箭頭函數當中，是沒有屬於自己的this 與 arguments Array ，有興趣的人可以試試看以下的程式碼就可以了解了：

function TT(msg){
    var temp = () => console.log(arguments[0]);
    console.log(temp);
}

以上文章敘述如有錯誤及觀念不正確，請不吝嗇指教:)

有任何家教、案子或技術相關問題請都歡迎聯繫我

Leo 程式筆記