ES2015 箭头函数

箭头函数

在 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()