箭头函数

基本语法

所谓的箭头函数。就是真的用一个箭头 => 代替 function的一个写法，在语法上简洁了许多

// es5写法
function add(num1, num2) {
  return num1 + num2
}

// es6 - 箭头函数
const add = (num1, num2) => num1 + num2

// 箭头函数返回对象
const getObj = () => ({ name: 'Jioho', age: 22 })

• 如果箭头函数没有参数，直接写一个空括号即可
• 如果箭头函数的参数只有一个，也可以省去包裹参数的括号
• 如果函数只是简单的运算就可以返回值(return)。则无须重复写 {return xxx} 的语法，直接接在箭头函数后面，就是 return 的效果
• 如果要返回的类型为对象类型，则需要用 () 包裹对象/还是采用 { return obj } 的方式

看点实战栗子

示例 1

使用 filter 筛选大于 20 的数字

const arr = [1, 2, 3, 4, 5, 20, 90, 70, 9, 10, 9, 8, 42, 22]

// ES5之前的写法
arr.filter(function(item) {
  return item > 20
})

// 使用箭头函数
arr.filter(item => item > 20)

箭头函数不会创建自己的 this（重要！！深入理解！！）

看看 MDN 上对箭头函数 this 的解释

箭头函数不会创建自己的 this，所以它没有自己的 this，它只会从自己的作用域链的上一层继承 this。

箭头函数没有自己的 this，它会捕获自己在定义时（注意，是定义时，不是调用时）所处的外层执行环境的 this，并继承这个 this 值。所以，箭头函数中 this 的指向在它被定义的时候就已经确定了，之后永远不会改变。

还记得一句话吗？this 指向是谁调用就指向谁，这是 ES5 的说法了，到了箭头函数中，这句话就不成立了

function fn() {
  return () => {
    return () => {
      console.log(this)
    }
  }
}
console.log(fn()()())

• 箭头函数其实是没有 this 的，这个函数中的 this 只取决于他外面的第一个不是箭头函数的函数的 this。在这个例子中，因为调用 fn 符合前面代码中的第一个情况，所以 this 是 window。并且 this 一旦绑定了上下文，就不会被任何代码改变

• 由于箭头函数没有自己的 this，所以当然也就不能用 call()、apply()、bind()这些方法去改变 this 的指向。

• 箭头函数中没有 arguments 对象。不过可以使用 ...args 来解决这个问题 const fn = (...args) => args;

什么时候不用箭头函数

不应该使用箭头函数一些情况：

• 当想要函数被提升时(箭头函数是匿名的)

• 要在函数中使用 this/arguments 时，由于箭头函数本身不具有 this/arguments，因此它们取决于外部上下文

• 使用命名函数(箭头函数是匿名的)

• 使用函数作为构造函数时(箭头函数没有构造函数)

• 当想在对象字面是以将函数作为属性添加并在其中使用对象时，因为咱们无法访问 this 即对象本身。