箭頭函式 arrow function

為了能夠以更簡短的方式建立函式，ES6變推出了 箭頭函式。
用說明的可能會不太懂，我們先拿之前的陣列排序例子來看：

var arr = [2,1,6,12,3,77,100,4];
arr.sort(function(a,b){
    return a - b;
});

arr.sort() 經過箭頭函式的修改後：

var arr = [2,1,6,12,3,77,100,4];
arr.sort((a,b) => a-b);

是不是簡潔許多了！

現在讓我們一步一步來看箭頭函式的語法；

param => expression

此箭頭函式接受一個參數 (param) 並回傳一個表達式 (expression) 的值。

首先箭頭函式的參數在只有一個的時候，括弧是可以省略的：

var funA = () => "hi";
var funB = val => val;
funA();//"hi"
funB("hola");//"hola"

再來，中間的 => 符號是必要的：

var funA = ()  "hi";//SyntaxError: Unexpected token )
var funB = val => val;//SyntaxError: Unexpected identifier

最後，表達式若只有一個，那麼該表達式的值即為回傳值，且可省略 {};
若是一段程式區塊則和一般函式無異：

var funA = () => "hi";
var funB = val =>{
    const price = 20;
    return val*price;
}

以上就是箭頭函式的用法，是不是很簡單呢！
但是要注意到，箭頭函式没有自己的 this 及 arguments，且不能被用作建構式，只能當作匿名函式使用:

var funB = ()=> arguments;
var obj = {
    funA:()=>{console.log(this)}
}
obj.funA();//Window 
funB(1);// ReferenceError: arguments is not defined

箭頭函式-this

我們都知道在函式的 this 只有在呼叫時才能決定，但箭頭函式並沒有自己的 this ，在使用時會去往上尋找直到找到最接近「scope」的 this ，就像一般變數的尋找規則一樣。

Arrow functions follow the normal variable lookup rules.
So while searching for this which is not present in current scope they end up finding this from its enclosing scope .

有點難懂對吧，讓我們來看幾個範例：

var name = 'globe'
var myObj = {
  name: 'in object',
  callArrow:  function(){
        var arrowFun = ()=>{
            console.log('1', this.name); 
        } 
        arrowFun()
    }
}
myObj.callArrow();

可以看到說由於 callArrow 是一般函式建立，所以 arrowFun 中呼叫的 this 會往上尋找到 callArrow 的函式的 this ，且由於myObj.callArrow是透過物件方法呼叫，所以this 是 myObj物件。

有點難懂？沒關係，瀏覽器提供給我們一個 Performance 功能，可以看到程式是如何執行的：

可以看到 (anonymouse) 其實就是我們常說的全域環境，我們在執行arrowFun() 時，arrowFun會往上找最近的 scope ，也就是 callArrow。如果在測試時候沒辦法確定的話，開啟瀏覽器的Performance看看吧！

但是這邊有個陷阱，如果把 callArrow 也改成箭頭函式：

var name = 'globe'
var myObj = {
  name: 'in object',
  callArrow:  () =>{ 
    var arrowFun = () => {
      console.log('1', this.name); 
    }
    arrowFun();
  }
}
myObj.callArrow();

雖然在 Performance 模式下看起來跟剛剛的例子一樣：

我們前面有說到是尋找最近的「scope」，但找到的卻還是一個箭頭函式 callArrow ，所以會繼續往上尋找到全域也就是 window。

以上就是箭頭函式，在看文件的過程中發現到真的不要為了方便就去看中文，中文會省略很多說明啊！
所以寧可用谷狗翻譯一句一句看也不要偷懶才不會錯過很多重點喔！！

參考資料：
忍者 JavaScript 開發技巧探秘
MDN-Arrow functions
鐵人賽：箭頭函式 (Arrow functions)
MDN-this