es6箭头函数

es6新增了箭头函数, 先来看一个以前的例子

const add = function(a, b) {
  console.log( this )
  return a + b
}

add( 1 , 2 )   

使用了箭头函数

const add = (a, b) => {
  return a + b
}

如果是上面这样还可以简写为

const add = (a, b) => a + b

this指向问题

let obj = {
  test(){
    setTimeout(function(){
      console.log(this)
    })
  }
}

obj.test()  
通常情况下都是输出window

箭头函数(本身没有完整的执行上下文)和外层执行上下文共享this值, 来改进下代码:
let obj = {
  test(){
    setTimeout(() => {
      console.log(this)
    })
  }
}
obj.test()    //  this => obj

箭头函数还有一个问题, 箭头函数不能创建一个闭包。先来看一个例子:

function test(){
  return () => console.log(arguments)
}

test(1,2,3)(4,5)

按照正常的写法:
function test(){
  return function(){
   console.log(arguments)
  }
}

test(1,2,3)(4,5)
这里应该输出的是4,5

如果使用了箭头函数这里却输出了1,2,3

还有一个容易出错的地方, 通常在使用map filter这些高阶函数的时候, 有时候要返回一个对象, 使用了箭头函数之后必须要加()否则就会报一个语法错误

let arr = [1,2,3].map( val =>  { number: val, isOK: true }  ) ❌
let arr = [1,2,3].map( val =>  ({ number: val, isOK: true })  ) ✅