箭头函数是ES6 / ES2015中最具影响力的变化之一，它们现在被广泛使用。它们与常规函数略有不同。

自引入箭头函数以来，它们彻底改变了JavaScript代码编写方式。

在我看来，这种变化发展迅速，你现在很少在现代javascript代码库中看到function关键字的用法。

这是一个简单而受欢迎的变化，它允许您使用更短的语法编写函数，比如：

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'
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}`
 }
}
 calling car.fullName() will return "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
})