ES6-箭头函数

目的

引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁

使用场景

箭头函数更适用于那些本来需要匿名的地方

箭头函数语法

（1）删掉function关键字加上=>

（2）没有参数加括号

（3）一个参数可以选择不加（）

（4）没有或多个参数必须加（),并且参数之间用逗号分割

（5）{}中只有一行语句时，可以省略

let add = function(a, b){
    return a + b;
}
转化为
let add = (a, b) => {
    return a + b;
}
再简写为
let add = (a, b) =>a + b

（6）加括号的函数体返回对象字面量表达式

const fn=uname=>({uname:uname})
console.log(fn1('pink老师'))

注意：箭头函数属于表达式函数，因此不存在函数提升

箭头函数参数

1.普通函数有arguments动态参数

2.箭头函数没有arguments动态参数，但是有剩余参数...args

const fn = uname => ({ uname: uname })
    console.log(fn1('pink老师'))
    const getSum = (...arr) => {
      let sum = 0
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
      }
      return sum
}

箭头函数this

在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值

this的指向：谁调用这个函数，this就指向谁

    console.log(this)//windows
    function fn() {
      console.log(this)//windows
    }
    fn()
    const obj = {
      name: 'andy',
      sayHi: function () {
        console.log(this)//obj
      }
    }
    obj.sayHi()

箭头函数不会创建自己的this，它只会从自己的作用域链的上一层沿用this。

    const fun = () => {
      console.log(this)//window
    }
    fun()
    //对象方法箭头函数this
    const ob = {
      uname: 'pink老师',
      sayHi: () => {
        console.log(this);//windows
      }
    }
    ob.sayHi()

在开发中（使用箭头函数前需要考虑函数中this的值），事件回调函数使用箭头函数时，this为全局的window，因此DOM事件回调函数为了简便，还是不太推荐使用箭头函数