歡迎點擊「算法與編程之美」↑關注我們！
本文首發於微信公衆號："算法與編程之美"，歡迎關注，及時瞭解更多此係列文章。
問題描述
JavaScript ES6標準新增了比較重要的一種新的函數：Arrow Function（箭頭函數）,但大多數人都不能很好的瞭解箭頭函數的用法，也不能區別箭頭函數和function(),所以接下來我們就來介紹一下箭頭函數。
解決方案
1 箭頭函數的寫法
() => {} //舉例 x => x*2 //x的返回值變成x*2的值 |
箭頭函數定義包括一個參數列表，函數體放在最後。
箭頭函數有兩種格式，一種只包含一個表達式，就如上面的舉例，你會發現它沒有return，因爲在箭頭函數中，只要一個表達式，並且省略了包圍的 { } 的話，就意味着表達式前面有一個隱含的 return。另一種格式就是，當箭頭函數包含多條語句，這個時候{ }和return 就不能省略，例如：
x => { if (x>0){ return x*x }else{ return x } |
而當有多個參數就要用（）將參數括起來：
(x,y) => { if (x>0){ return x*y }else{ return x+y } |
2 箭頭函數this的指向
箭頭函數總是函數表達式；並不存在箭頭函數聲明。同時箭頭函數看上去是匿名函數（它們沒有用於遞歸或者事件綁定 / 解綁定的命名引用）的一種簡寫，但實際上，箭頭函數和匿名函數有個明顯的區別：箭頭函數內部的this是詞法作用域，由上下文確定。例如：
var ming = { birth: 1999, getAge: function () { var b = this.birth; // 1999 var a = () => new Date().getFullYear() - this.birth; // this指向ming對象 return a(); } }; ming.getAge();// |
結果：
如上例子，箭頭函數中this總是指向語法作用域，也就是此處的外部調用者xiaoming對象，故而此處ming.getAge()的返回值爲21。
也就是說，使用箭頭函數，就不需要以前的那種hack寫法了：
var that = this; |
由於this在箭頭函數中已經按照詞法作用域綁定了，所以用call()或者apply()調用函數的時候，無法對this 進行綁定，即傳入的第一個參數被忽略。例如：
var ming = { birth: 1999, getAge: function (year) { var b = this.birth; // 1999 var a = (y) => y - this.birth; // this.birth仍是1999 return a.call({birth:2000}, year); } }; ming.getAge(2020);//21 |
結果：
3 箭頭函數與function()函數的區別
通過上面對於箭頭函數的講解就可以發現雖然有時候可以將function()函數變爲箭頭函數，但兩者還是有很大的區別的：
a.箭頭函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象；
b.箭頭函數不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤；
c.箭頭函數不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用Rest參數代替；
d.不可以使用yield命令，因此箭頭函數不能用作Generator函數；
結語
箭頭函數中this的指向十分的重要，需要注意，有時候爲了節約時間，可以使用箭頭函數代替function（）函數，在使用的時候一定要注意箭頭函數本身沒有this，它的this是根據上下文指向語法作用域的，所以小編在此建議，如果你還想用this，就最好不要用使用箭頭函數的寫法哦。
END
主 編 | 王楠嵐
責 編 | 楊金月
where2go 團隊
微信號：算法與編程之美
長按識別二維碼關注我們!
溫馨提示：點擊頁面右下角“寫留言”發表評論，期待您的參與！期待您的轉發！