JavaScript: ES6 箭頭函數(Arrow Functions)

箭頭函數(Arrow Functions)在2015年ES6提出後，簡化了過往Functions編寫的方式，以下將依序介紹

1. 箭頭函數(Arrow Functions)是什麼？
2. 與ES6以前的差異。

箭頭函數 (Arrow Functions) 是什麼？

下圖為比較ES6以及ES5函數(Functions)編寫方法 —

由圖中我們可以發現，在ES6可以不用使用Functions語法宣告函數，直接使用 “ = > ” 來當作宣告函數的方式。

在ES6中，我們還可以使用下面幾種寫法 —

備註：參數只有一個時可以省略括號()，若為兩個以上則不可省略。

與 ES6 以前的差異 — 箭頭函數(Arrow Functions)與Function語法宣告之this 定義不同。

箭頭函數(Arrow Functions) — this是定義時的對象。

Function語法 — this是使用、呼叫(call)時的對象。

下圖為範例

setTimeout — 我們都知道setTimeout Function會於所有的JavaScript內容執行完後執行，因此在setTimeout函數建立的時間以及執行的時間是不同的。

程式碼上方為ES5傳統函式的寫法，在此 x 函數中，我們會在 console.log 中得到 NaN，因為在ES5中，setTimeout Function中的this會指向使用、呼叫(call)時的對象，也就是global(window)中的this，而不是x Function中所給定的this.val=1。而在ES6中，this則指向x Function 一開始所定義的對象，也就是this.val，因此最後我們所得的值則為2，而非NaN。

JavaScript 在ES6中導入了許多的新方法(feature)，除了更新新的方法之外，也需要和舊有的方法比較差異並且修正概念，而箭頭函數(Arrow Functions)就是其中之一，與ES5方法相比差異在於this是定義時的對象，而非使用、呼叫(call)時的對象。語法的推陳出新除了簡化軟體開發者的開發時程，也提供更具可讀性、直觀的語法規範供我們去遵循。