/

學習 JavaScript 箭頭函式的教程

學習 JavaScript 箭頭函式的教程

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

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

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

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

1
2
3
const myFunction = function() {
 //...
}

改為：

1
2
3
const myFunction = () => {
 //...
}

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

1
const myFunction = () => doSomething()

參數通過括號傳遞：

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

如果只有一個（且僅有一個）參數，您可以完全省略括號：

1
const myFunction = param => doSomething(param)

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

隱式返回

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

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

1
2
3
const myFunction = () => 'test'

myFunction() //'test'

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

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

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

箭頭函式中的 this 如何工作

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

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

當定義為對象的方法時，常規函式中的 this 指的是該對象，所以您可以這樣做：

1
2
3
4
5
6
7
const car = {
 model: 'Fiesta',
 manufacturer: 'Ford',
 fullName: function() {
 return `${this.manufacturer} ${this.model}`
 }
}

調用 car.fullName() 將返回 "Ford Fiesta"。

箭頭函式的 this 作用域是從執行上下文中繼承的。箭頭函式不綁定 this，所以它的值將在調用堆疊中被查找，因此在此代碼 car.fullName() 將不起作用，並返回字符串 "undefined undefined"：

1
2
3
4
5
6
7
const car = {
 model: 'Fiesta',
 manufacturer: 'Ford',
 fullName: () => {
 return `${this.manufacturer} ${this.model}`
 }
}

因此，箭頭函式不適用於對象方法。

箭頭函式也不能用於構造函式，實例化對象時將引發 TypeError 錯誤。

這就是應該使用常規函式的地方，不需要動態上下文時。

處理事件時也會遇到這個問題。DOM 事件監聽器將 this 設置為目標元素，如果您依賴於事件處理程序中的 this，則需要使用常規函式：

1
2
3
4
const link = document.querySelector('#link')
link.addEventListener('click', () => {
 // this === window
})
1
2
3
4
const link = document.querySelector('#link')
link.addEventListener('click', function() {
 // this === link
})

tags: [“JavaScript”, “Arrow Functions”, “ES6”, “ECMAScript 2015”]