ES之箭头函数

箭头函数是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
})