目录

本文章重点：

一：箭头函数

目的：

使用场景：

语法：

箭头函数参数

箭头函数this

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

---

本文章重点：

能够熟练写出箭头函数的不同写法

清楚的知道箭头函数与普通函数的区别

一：箭头函数

目的：

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

使用场景：

箭头函数使用场景更适合那些原本需要匿名函数的地方

语法：

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

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

箭头函数this

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

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

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

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

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

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