箭頭函式是 ES6 / ES2015 中最具影響力的變化之一,現今廣泛使用。它們與常規函式稍有不同。讓我們來看看箭頭函式的用法。

箭頭函式是在 ES6 / ECMAScript 2015 中引入的,自那時以來,它們永遠改變了 JavaScript 代碼的外觀(和工作方式)。

在我看來,這種變化非常受歡迎,現代代碼庫中很少見到使用 function 關鍵字的情況。雖然這種用法仍然有它的用處。

從外觀上看,這是一個簡單而受歡迎的改變,它允許您使用更短的語法來編寫函式:

const myFunction = function() {
 //...
}

改為:

const myFunction = () => {
 //...
}

如果函式體只包含一條語句,您可以省略大括號,將所有內容寫在同一行上:

const myFunction = () => doSomething()

參數通過括號傳遞:

const myFunction = (param1, param2) => doSomething(param1, param2)

如果只有一個(且僅有一個)參數,您可以完全省略括號:

const myFunction = param => doSomething(param)

由於這種簡潔的語法,箭頭函式鼓勵使用小函式。

隱式返回

箭頭函式允許您進行隱式返回:不需要使用 return 關鍵字就可以返回值。

它僅對函式體中一行的語句有效:

const myFunction = () => 'test'

myFunction() //'test'

另一個例子,當返回一個對象時,請記得用括號將大括號括起來,以避免它被認為是包含函式體的大括號:

const myFunction = () => ({ value: 'test' })

myFunction() //{value: 'test'}

箭頭函式中的 this 如何工作

this 是一個可能很難掌握的概念,因為它根據上下文而變化很大,並且也根據 JavaScript 的模式(嚴格模式或非嚴格模式)而變化。

澄清這一概念很重要,因為箭頭函式的行為與常規函式非常不同。

當定義為對象的方法時,常規函式中的 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
})