es6-关于箭头函数的用法和this指向

箭头函数的特点

1.书写风格简洁
2.当函数的功能简单且能用一行语句或表达式表示时使用箭头函数能节省代码量提升开发效率
3.箭头函数自身的this指向能自动绑定外部函数的this指向，不用开发者进行人为地绑定；方便进行相应的this操作

箭头函数的使用

箭头函数的表示

let fun = () => {函数体}; let fun2 = (形参) => {函数体}
1.当没有形参时，小括号不能省略
2.当形参只有一个时，()可以省略不写，当有多个形参时，()必须写上
3.当函数体内只需要一条语句或者表达式时，{}可以省略，当有多条语句或表达式时，{}则不能省略
let fun3 = item => item>1 ? item++ : item--

箭头函数返回值

当箭头函数的函数体没有用{ }时，会默认将内部函数执行结果作为返回值，且不能够人为加下return关键字
eg

   let fun = () => 1+1
   console.log(fun()) // 2 

   let fun2 = () => {1+1}
   console.log(fun2()) //undefined

箭头函数的this指向

1.箭头函数的this不是在调用的时候决定的，而是在定义的时候决定的
2.箭头函数的this指向首先看其外部有没有函数，
1）如果有，它的this指向和这个外部函数绑定，当外部函数被调用时， this指向哪里，箭头函数则指向哪里。
2）如果没有外部函数，则箭头函数的this指向Window
eg

  //没有外部函数时
  let obj = {
    fun1: function(){
       console.log(this) // this->{obj}
    },
    fun2: ()=>{
        console.log(this) // this->{Window} 
    }
  }
  //使用常规函数定义，函数this指向由调用时决定，fun1被obj调用，函数this指向obj
  obj.fun1() 

  //使用箭头函数定义，函数this指向由定义时决定，fun2外部没有函数，所以this指向Window
  obj.fun2() 

// 有外部函数时
  let obj2 = {
    fun3: function(){
      console.log(this) // this->{obj2}; 当obj2.fun3.call(obj) this->{obj} 
      let fun4 = () => {console.log(this)} //this->{obj2}; 当obj2.fun3.call(obj) this->{obj} 
      fun4()
    }
  }
  obj2.fun3() //箭头函数fun4()外部有一个函数fun3(),this指向和它绑定，当fun3被调用时this指向哪里，箭头函数this就指向哪里
  obj2.fun3.call(obj) //调用fun3时改变this指向，其内部的箭头函数fun4的this指向也发生改变

箭头函数注意点

箭头函数被调用时的this指向不能够通过call，apply，bind进行绑定，
由于箭头函数的this在定义的时候就决定了，所以不能在其被调用时进行改变