JavaScript Arrow函數教程

箭頭功能是ES6 / ES2015中最具影響力的更改之一,如今已廣泛使用。它們與常規功能略有不同。了解如何

在ES6 / ECMAScript 2015中引入了Arrow函數,自從引入以來,它們就永遠改變了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
})

免費下載我的JavaScript初學者手冊


更多js教程: