ES6|Function——箭头函数

箭头函数形式

箭头函数是ES6的重要内容，为开发者带来了很多福利，首先，先来看看箭头函数的形式。
在此之前，如果要声明一个函数，我们需要这样做：

function hello() {
    console.log('say hello')
}
// 或

let hello = function() {
    console.log('say hello')
}

但是用箭头函数看起来就优雅了很多：

let hello = () => {
    console.log('say hello')
}

• 如果带参数，可以这样做：

let hello = (name) => {
    console.log('say hello', name)
}
// 或者

let hello = name => {
    console.log('say hello', name)
}

注意：如果只有一个参数，可以省略括号，如果大于一个参数一定要记得带括号

• 如果返回值是表达式可以省略 return 和 {}

let pow = x => x * x

• 如果返回值是字面量对象，一定要用小括号包起来

  let person = (name) => ({
      age: 20,
      addr: 'Beijing City'
  })

箭头函数对this的处理方式

箭头函数不仅书写上比ES5的函数声明方式优雅，对this的处理方式也是截然不同的。
在讲this之前，先来简单看看都有哪些作用域：

对象	类型
window/global	全局作用域
function	函数作用域/局部作用域
{}	块状作用域
this	动态作用域

更多关于作用域建议阅读（https://github.com/mqyqingfeng/Blog/issues/3）

再来看看怎么确认this指向的对象：

<button id="btn">点我</button> 

let oBtn=document.querySelector('#btn')
oBtn.addEventListener('click',function(){
    console.log(this)//<button id="btn">点我</button> 即oBtn对象
})

{}确定一个块级作用域，this指向调用的对象，在这里，this指向块级作用域{}外的调用函数的oBtn对象。
再来看一个例子：

let oBtn=document.querySelector('#btn')
oBtn.addEventListener('click',function(){
    setTimeout(function(){
        console.log(this)//window
    },1000) 
})

跟上一个例子是同一个道理，{}确定一个块级作用域，this指向作用域外调用函数的对象，而setTimeout实质上是window.setTimeout，所以，this指向window对象。

下面来看看箭头函数是怎么改变this

let oBtn=document.querySelector('#btn')
oBtn.addEventListener('click',function(){
    setTimeout(()=>{
        console.log(this)
    },1000)
})

箭头函数的执行作用域内没有this，会沿作用域链往上找上一个执行作用域 （{}确定一个作用域）。

如果没有箭头函数，在ES5中需要用bind，apply，call来改变this的指向，这里以bind为例：

let oBtn=document.querySelector('#btn')
oBtn.addEventListener('click',function(){
    setTimeout(function(){
        console.log(this)
    }.bind(this),1000) 
})

由之前的例子可以知道，console.log(this)中的this原本指向的是window，这里用bind改变this的指向，这里bind的参数即为this的指向，指向oBtn。

注意：在对象里不能使用箭头函数

let s='school'
let name='wdl'
let obj={
    name,
    [s]:'imooc',
    study:()=>{
        console.log(this.name+"学习")//报错 name undefined 
    }
}
obj.study()

箭头函数不可以当作构造函数

let People=(name,age)=>{
    this.name=name
    this.age=age
}
let p1=new People('wdl',21)
console.log(p1)//打印出空对象

箭头函数不可以使用arguments参数

let foo=()=>{
    console.log(arguments)//报错
}
foo(1,2,3)

但是可以用rest参数代替arguments参数的作用：

 let foo=(...args)=>{
    console.log(args)
}
foo(1,2,3)//[1,2,3]