箭头函数是一种声明函数的简洁语法，它与普通函数并无本质的区别，差异性更多体现在语法格式上。
目的 : 引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁
使用场景 : 箭头函数更适用于那些本来需要匿名函数的地方
//1. 箭头函数 基本语法
const fun = () => {
console.log(123)
}
//这个箭头函数相当于下面这个普通函数
const fn = function () {
console.log(123)
}
<body>
<script>
// 2. 只有一个形参的时候，可以省略小括号
const fn = x => {
console.log(x)
}
</script>
</body><body>
<script>
// // 3. 只有一行代码的时候，我们可以省略大括号
const fn = x => console.log(x)
fn(1)
</script>
</body><body>
<script>
// 4. 只有一行代码的时候，可以省略return
const fn = x => x + x
console.log(fn(1))
</script>
</body><body>
<script>
// 5. 箭头函数可以直接返回一个对象 要加一个（）包起来
const fn = (uname) => ({ uname: uname })
console.log(fn("刘德华"))
</script>
</body>箭头函数中没有 arguments，只能使用 ... 动态获取实参
<body>
<script>
// 1. 利用箭头函数来求和
const getSum = (...arr) => {
let sum = 0
for (let i = 0; i<=arr.length; i++) {
sum += arr[i]
}
return sum
}
const result = getSum(2, 3, 4)
console.log(result) // 9
</script>
</body>箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。
<script>
// 以前this的指向： 谁调用的这个函数，this 就指向谁
// console.log(this) // window
// // 普通函数
// function fn() {
// console.log(this) // window
// }
// window.fn()
// // 对象方法里面的this
// const obj = {
// name: "andy",
// sayHi: function () {
// console.log(this) // obj
// }
// }
// obj.sayHi()
// 2. 箭头函数的this 是上一层作用域的this 指向
// const fn = () => {
// console.log(this) // window
// }
// fn()
// 对象方法箭头函数 this
// const obj = {
// uname: "pink老师",
// sayHi: () => {
// console.log(this) // this 指向谁？ window
// }
// }
// obj.sayHi()
const obj = {
uname: "pink老师",
sayHi: function () {
console.log(this) // obj
let i = 10
const count = () => {
console.log(this) // obj
}
count()
}
}
obj.sayHi()
</script>在开发中【使用箭头函数前需要考虑函数中this 的值】，事件回调函数使用箭头函数时，this为全局的 window，因此DOM事件回调函数为了简便，还是不太推荐使用箭头函数