【JS重点10】箭头函数（十分重要）-CSDN博客

<script>
    const fn = (x) => {
      console.log(x);
    }
    fn(21)
</script>
使用注意事项：

//1 当箭头函数的形参只有一个时，可以省略小括号
如：
const fn = x =>{
    console.log(x)
}
//2 如果函数体只有一行代码，则可以将代码写到一行上，并且无需写return直接返回值
const z = x => x + x
console.log(z(3));
//3 箭头函数可以直接返回一个对象
const fn = (uname) =>({uname:uname})
console.log(fn('刘德华'))

箭头函数参数

箭头函数中没有arguments动态参数，但是有"...变量名"这个剩余参数。可以利用剩余参数，接收实参进行相应的求值运算

需求：

利用箭头函数实现动态实参求和

const getSum = (...arr) => {
      let sum = 0
      for (let index = 0; index < arr.length; index++) {
        sum += arr[index]
      }
      console.log(sum);
    }
    getSum(1, 2, 3, 4)//10
    getSum(1, 2, 3, 4, 5, 6)//21

箭头函数this

箭头函数不会创建自己的this，它只会沿着当前作用域链，找到作用域上一层有this指向的函数中。沿用该函数的this

下面一段代码，由于箭头函数没有this，所以其上一级作用域为window，所以this的指向为window

btn.addEventListener('click',()=>{
    console.log(this)
//this指向window
})

因为箭头函数自身没有this，所以要顺着箭头函数创建的函数作用域沿着作用域链查找，最终查找到window对象上函数this。

综上：DOM事件中回调函数不推荐使用箭头函数，因为this并不是指向DOM元素，而是指向window

二：箭头函数与普通函数区别

普通函数有this，谁调用普通函数就指向谁；而箭头函数自己不会创建this，而是沿着所在作用域链查找到上一级作用域中函数this的指向
箭头函数具有多种简写方式，但普通函数没有
箭头函数没有arguments动态参数，但是普通函数有