箭头函数的实践于应用场景
- 需求-1 点击 div 2s后颜色变成[粉色]
- 从数组中返回偶数的元素
需求-1 点击 div 2s后颜色变成[粉色]
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>箭头函数实践</title>
<style>
div{
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="ad"></div>
</body>
</html>
- 绑定事件
ad.addEventListener("click",function(){
//定时器
setTimeout(function(){
//修改背景颜色
this.style.background='pink';
},2000);
});
原因分析：this指向window,而window身上并没有style属性
解决方法：让this指向ad元素
- 保存外层作用域的this
ad.addEventListener("click",function(){
//保存外层作用域的this
let _this=this;//this指向ad
//定时器
setTimeout(function(){
//修改背景颜色,內层找不到_this会往外层寻找
_this.style.background='pink';
},2000);
});
使用箭头函数；指向声明时候的this对象就是ad
//绑定事件
ad.addEventListener("click",function(){
//定时器
setTimeout(()=>{
//修改背景颜色,內层找不到_this会往外层寻找
this.style.background='pink';
},2000);
});
需求-2 从数组中返回偶数的元素
onst arr=[1,6,9,10,100,25];
- 利用数组filter函数处理。
const result=arr.filter(function(item){
if(item %2===0){
return true;
}
else{
return false;
}
});
- 改成箭头函数
const result=arr.filter(item=>{
if(item %2===0){
return true;
}
else{
return false;
}
});
- 简化
const result=arr.filter(item=>item % 2===0);
总结
- 箭头函数适合与this无关的回调，定时器，数组的方法回调
- 箭头函数不适合与this有关的回调，时间回调，对象的方法
