箭头函数简介

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

一、基本语法：

const fn = () => {
    console.log('我是箭头函数')
}
fn()

 const fn = (x) => {
     console.log(x)
 }
 fn(1)

//1.只有1个形参,可省略小括号，其他情况不能省略小括号
 const fn = x => {
      console.log(x)
  }
  fn(1)

//2.只有一行代码的时候,可以省略大括号
  const fn = x => console.log(x)
  fn(1)

//3.只有一行代码的时候,可以省略return
 const fn = x => x + x
 console.log(fn(1))

//4.箭头函数可以直接返回一个对象
const fn = (uname) =>({name:uname})
fn('刘德华')

更简洁的语法：

//阻止表单的默认提交事件    
//ev事件对象
const form = document.querySelector('form')
form.addEventListener('click',ev => ev.preventDefault())

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

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

小结：
1.箭头函数属于表达式函数，因此不存在函数提升
2.箭头函数只有一个参数时可以省略圆括号()
3.箭头函数函数体只有一行代码时可以省略花括号{}，并自动作为返回值被返回
4.加括号的函数体返回对象字面量表达式

二、箭头函数参数

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

const getSum = (...arr)=>{
   let sum = 0
   for(let i=0;i<arr.length;i++){
     sum += arr[i]
   }
   return sum
}
const result = getSum(2,3)
console.log(result)

三、箭头函数this

箭头函数的this,是上一层作用域的this指向

 const fn = ()=>{
   console.log(this)//window
 }
 fn()

对象方法箭头函数this

const obj = {
    uname:'pink',
    sayHi:()=>{
        console.log(this)//this指向谁?
        //看上一级this作用域  window
    }
}
obj.sayHi()


const obj1 = {
    uname:'pink',
    sayHi:function(){
        console.log(this)//obj1
        let i=10
        const count = ()=>{
            console.log(this)//obj1
        }
        count()
    }
}
obj1.sayHi()

普通函数和箭头函数

//箭头函数  此时this指向了window
btn.addEventListener('click',() => {
    console.log(this)//window
})

//普通函数,此时this指向了DOM对象
btn.addEventListener('click',function(){
    console.log(this)//btn
})