ES6 Lesson 5 – 箭头函数

本节主要学习了箭头函数(arrow funcion)，它有三个特点：

• 看起来非常简明
• 可以隐式返回(return)
• 不绑定this

1. 简明语法

首先来看简明语法与普通写法的对比，例如我们需要一个简单的sum函数：

// es5写法
function sum (a, b) {
  return a + b
}
sum(1, 2) // =>3

// es6写法
let sum = (a, b) => {
  return a + b
}
sum(1, 2) // =>3

从上面的例子可以看出：es6比es5代码减少了function关键字，使用箭头来代替，不过这样看你可能觉得也没什么差别嘛，那么请继续往下看，我们换一个函数，例如是让某个值变成2倍的匿名函数，可以直接这样写：

// es6写法
num => {
  return num * 2
}

如果你的参数只有一个，那么可以直接不写括号。（如果没有参数，需要保留括号）

2. 直接返回

用上的例子来改造一下：

// es6写法
num => num * 2

这个比较简单，需要记得两去一移动规则即可：

1. 移到同一行
2. 去掉大括号
3. 去掉return这种方法在我们只需要一些简单的返回函数时，可以让我们的函数变得非常简洁

3. this函数的指向区别

感觉虽然理解了，但是自己描述不好这个this，不如先看这个（变年轻）例子：

const user = {
  name: 'Fea',
  age: 25,
  getAge: function () {
    setInterval(function () {
      console.log(this.age - 1)
    }, 1000)
  }
}
user.getAge()
// NaN

为什么是NaN的呢？这个es5比较厉害的同学应该知道，首先是因为this.age是获取不到的，其次是因为在一个对象内的独立函数，而不是对象直接属性函数的话，这个时候this指向的是window对象。

我们使用es6的箭头函数来改造一下：

const user = {
  name: 'Fea',
  age: 25,
  getAge: function () {
    setTimeout(() => {
      console.log(this.age - 1)
    }, 1000)
  }
}
user.getAge()
// 24

这次可以正确执行这个函数，我们只是将延迟执行函数改造为es6形式，这个原因是es6的箭头函数中，this是继承父极的this，所以它可以正确的知道我们要的this.age是user对象的age。

这个在我们进行需要调用父极this值的时候，会非常方便

那么这节课就是这么多啦，bye!~