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
})
复制代码