JS进阶——箭头函数

语法：

//普通函数
const fn1=function(){
    console.log('我是普通函数')
}

//箭头函数
const fn2= () =>{
    console.log('箭头函数')
}

//只有一个函数可以省略小括号
const fn3= x =>{
    return x+x
}

//如果函数体只有一行代码，可以写到一行上，无需return
const fn =(x,y） =>x+y

箭头函数参数

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

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

箭头函数 this

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

console.log（this）// 此处为window
// 箭头函数

const sayHi = () => {
    console.log（this）// 箭头函数此处为window
}

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


const user = { 
    name：＇小明＇，
    //该箭头函数中的this 为函数声明环境中 this 一致
    walk:() => { 
        console.log（this）// 指向window 不是user 
    }
} 
user.walk()

const user = {
    name：＇小明＇，
    sleep: function (){
        console.log（this）//指向user 
        const fn=()=> {
            console.log（this）//指向user 该箭头函数中的 this 与 sleep 中的 this 一致 
        }
        //调用箭头函数 
       fn()
    }
}
user.sleep() 

在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window，因此

DOM事件回调函数为了简便，还是不太推荐使用箭头函数

<script>

// DOM 节点

const btn = document.queryselector('.btn') //箭头函数 此时 this 指向了 window

btn.addEventListener('click', () => { console.log(this)

})

//普通函数 此时 this 指向了 DOM 对象

btn.addEventListener('click', function () { console.log(this)

}) 
</script>