语法:
//普通函数
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>