箭頭函式是 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
})