ES(ECMAScript)之箭頭函數

箭頭函數是ES6 / ES2015中最具影響力的變化之一，它們如今被普遍使用。

自引入箭頭函數以來，它完全改變了JavaScript代碼的編寫方式。

這是一個簡單而受歡迎的變化，它容許您使用更短的語法編寫函數，好比：

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

to

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

若是函數體只包含一行語句，則能夠省略花括號：

const myFunction = () => doSomething()

傳遞參數：

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

若是隻有一個參數，則能夠省略括號：

const myFunction = param => doSomething(param)

隱式返回

箭頭函數具備隱式返回：返回值沒必要使用return關鍵字。

函數體中只有一行語句時有效：

const myFunction = () => 'test'
//返回'test'
myFunction()

另外一個例子，返回一個對象（記得在花括號外加一對大括號，避免它被認爲是函數體的括號）：

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

this在箭頭函數中是如何使用的

this根據上下文環境而不一樣，也取決於JavaScript的模式（是不是嚴格模式）。

與常規函數相比，箭頭函數的this指向不一樣。

當定義爲對象的方法時，在常規函數中，它指的是對象，能夠這樣作：

const car = {
    model: 'Fiesta',
    manufacturer: 'Ford',
    fullName: function() {
        return `${this.manufacturer} {this.model}`
 }
}

返回字符串 "Ford Fiesta"

箭頭函數的做用域繼承自運行環境，因此代碼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
})