过客72467026
箭头函数
在 ECMAScript2015 简化了函数表达式的定义方式，允许使用 => 符号来定义函数，称为箭头函数。这种函数一来简化了函数的定义，二来多了一些特性。
在 ECMAScript2015 之前使用函数表达式定义函数需要使用 function 关键字进行定义，如下代码所示：
function inc(number) {
return number + 1
}
在 ECMAScript2015 之后可以使用箭头函数来定义一个完全相同的函数，如代码所示：
const inc = n => n + 1
此时会发现相比于 ECMAScript2015 之前的函数表达式，箭头函数确确实实简化了定义函数的代码。箭头函数的语法结构如下图所示：
如果函数的参数列表存在多个参数的话，也可以使用圆括号进行定义。如下代码所示：
const inc = (n, m) => n + 1
如果函数的函数体只有一条语句，那这条语句将作为该函数的返回值进行返回。所以，如果打印上述箭头函数的调用结果的话，如下所示：
101
如果函数的函数体具有多条语句的话，也可以使用花括号进行包裹。如下代码所示：
const inc = (n, m) => {
console.log('inc invoked')
n + 1
}
console.log(inc(100))
上述代码的运行结果如下：
inc invoked
undefined
需要注意的是，如果使用花括号将函数体进行包裹之后，箭头函数的默认返回值为 undefined，需要人为定义 return 语句。如下代码所示：
const inc = (n, m) => {
console.log('inc invoked')
return n + 1
}
使用箭头函数最主要的变化就是极大地简化了回调函数的编写。比如定义一个成员都是数字的数组，筛选出其中的奇数。如果是 ECMAScript2015 之前的回调函数，如下代码所示：
const arr = [1, 2, 3, 4, 5, 6, 7]
const result = arr.filter(function (item) {
return item % 2
})
console.log(result)
如果使用 ECMAScript2015 之后的箭头函数作为回调函数，如下代码所示：
const arr = [1, 2, 3, 4, 5, 6, 7]
const result = arr.filter(i => i % 2)
console.log(result)
对比之后很容易发现相比 ECMAScript2015 之前的回调函数，箭头函数使得代码更简洁，而且更易读。
箭头函数与 this
相比于普通的函数，箭头函数还有一个很重要的变化，就是不会改变 this 的指向。比如说定义一个 person 对象，在该对象中定义一个 name 属性，再定义一个 sayHi() 方法，并且在该方法中打印 name 属性的值。如下代码所示：
const person = {
name: '前端课湛',
sayHi: function () {
console.log(`hi, my name is ${this.name}`)
}
}
person.sayHi()
上述代码的运行结果如下：
hi, my name is 前端课湛
从上述打印结果可以看到，普通函数内部的 this 始终指向调用该函数的对象。如果将 person 对象中的 sayHi() 方法的定义改为箭头函数，如下代码所示：
const person = {
name: '前端课湛',
sayHi: () => {
console.log(`hi, my name is ${this.name}`)
}
}
person.sayHi()
上述代码的运行结果如下：
hi, my name is undefined
从上述打印结果可以看到，此时的 this.name 的值为 undefined。这就是箭头函数和普通函数之间最主要的区别，在箭头函数当中没有 this 的机制。所以，箭头函数不会改变 this 的指向。也就是说，在函数外部的 this 指向什么，在函数内部的 this 就指向什么，任何情况下都不会改变。
再比如为 person 对象新增一个 sayHiAsync() 的方法，在该方法中利用 setTimeout() 函数进行延迟执行。如下代码所示：
const person = {
name: '前端课湛',
sayHi: () => {
console.log(`hi, my name is ${this.name}`)
},
sayHiAsync: function () {
setTimeout(function () {
console.log(this.name)
}, 1000)
}
}
person.sayHiAsync()
这里可以看到定义 sayHiAsync() 方法使用了普通函数方式，调用该方法之后的结果如下：
undefined
之所以是这样的结果的原因是，在执行 setTimeout() 函数时会将内部的函数放置在全局作用域中进行调用，而调用该函数时的 this 指向全局对象，而不是 person 对象。
在 ECMAScript2015 之前想要解决这样的问题，通常会使用闭包的方式在 sayHiAsync() 方法中进行一个局部变量先来存储 this 所指向的 person 对象。如下代码所示：
const person = {
name: '前端课湛',
sayHi: () => {
console.log(`hi, my name is ${this.name}`)
},
sayHiAsync: function () {
_this = this
setTimeout(function () {
console.log(_this.name)
}, 1000)
}
}
person.sayHiAsync()
上述代码的运行结果如下：
前端课湛
如果使用箭头函数来解决上述问题的话，就简单了很多。如下代码所示：
const person = {
name: '前端课湛',
sayHi: () => {
console.log(`hi, my name is ${this.name}`)
},
sayHiAsync: function () {
setTimeout(() => {
console.log(this.name)
}, 1000)
}
}
person.sayHiAsync()
