JavaScript 箭頭函式（Arrow Function） – JavaScript 完全手冊（2018版）
小編推薦： ofollow,noindex">掘金是一個面向程式員的高質量技術社群，從 一線大廠經驗分享到前端開發最佳實踐，無論是入門還是進階，來掘金你不會錯過前端開發的任何一個技術乾貨。
18 JavaScript 箭頭函式（Arrow Function） – JavaScript 完全手冊（2018版）
注：本文為 《 JavaScript 完全手冊（2018版） 》第18節，你可以檢視該手冊的完整目錄。
箭頭函式（Arrow Function）是 ES6 / ES2015 中最具影響力的變化之一，現在它們被廣泛使用。 它們與常規函式略有不同。 我們來看看下面的一些情況。
我前面已經介紹了箭頭函式，但它們非常重要，它們需要再重點介紹一下。
在 ES6/ECMAScript2015 中引入了箭頭函式，自從它們引入後，它們徹底改變了 JavaScript 程式碼寫法（和工作方式）。
在我看來，這種變化非常受歡迎，你現在很少在現代程式碼庫中看到 function 關鍵字。
在視覺上，這是一個簡單而受歡迎的變化，您使用更短的語法編寫函式，從：
const myFunction = function foo() {
//...
}
變成：
const myFunction = () => {
//...
}
如果函式體只包含一條語句，則可以省略括號，並在一行上寫全部：
const myFunction = () => doSomething()
引數在括號中傳遞：
const myFunction = (param1, param2) => doSomething(param1, param2)
如果你只有一個引數，你甚至可以省略括號：
const myFunction = param => doSomething(param)
由於這種簡短的語法，箭頭函式 鼓勵使用短函式 。
隱式返回
箭頭函式允許您具有隱式返回，即返回值不必使用 return 關鍵字。
它在函式體內只有一個語句時有效：
const myFunction = () => 'test' myFunction() //'test'
箭頭函式中 this 如何工作
this 概念可能很難理解，因為它根據上下文的不同而變化，同事也受到 JavaScript 的模式（嚴格模式 strict mode 或非嚴格模式）的影響。
理清這個概念很重要，因為與常規函式相比， this 在箭頭函式的表現有很大的不同。
當定義為物件的方法時，在常規函式中， this 指的是物件，因此您可以：
const car = {
model: 'Fiesta',
manufacturer: 'Ford',
fullName: function() {
return `${this.manufacturer} ${this.model}`
}
}
呼叫 car.fullName() 將返回 “Ford Fiesta” 。
箭頭函式的 this 作用域繼承自執行期上下文。 箭頭函式根本不繫結 this ，因此它的值將在呼叫棧中查詢，因此在此程式碼中 car.fullName() 將不起作用，並將返回字串 "undefined undefined" ：
const car = {
model: 'Fiesta',
manufacturer: 'Ford',
fullName: () => {
return `${this.manufacturer} ${this.model}`
}
}
因此，箭頭函式不適合作為物件方法使用。
在例項化物件時，箭頭函式也不能用作建構函式。 它會引發 TypeError 。
當不需要動態上下文時，我們應該使用常規函式。
處理事件時也有類似的問題。 DOM 事件偵聽器將 this 設定為目標元素，如果您在事件處理程式中依賴於 this ，則需要常規函式：
const link = document.querySelector('#link')
link.addEventListener('click', () => {
// this === window
})
const link = document.querySelector('#link')
link.addEventListener('click', function() {
// this === link
})
瞭解更多關於箭頭函式的知識請檢視 JavaScript 箭頭函式：適用與不適用場景
如果你覺得本文對你有幫助，那就請分享給更多的朋友
關注「前端乾貨精選」加星星，每天都能獲取前端乾貨
