箭头函数简介
箭头函数其实就是对function name(xxx...){}传统定义函数的简写形式,其实也是用来定义函数的
- ES6 允许使用「箭头」(=>)定义函数。
/**
- 通用写法
*/
let fn = (arg1, arg2, arg3) => {
return arg1 + arg2 + arg3;
} - 箭头函数的注意点:
- 如果形参只有一个,则小括号可以省略
- 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的
执行结果 - 箭头函数 this 指向声明时所在作用域下 this 的值
- 箭头函数不能作为构造函数实例化
- 不能使用 arguments
注意:箭头函数不会更改 this 指向,用来指定回调函数会非常合适
this关键字简介
💡 Tips:箭头函数没有自己的this,它的this指向自己父级的this也就是函数的this,而函数的this是谁,箭头函数的this就是谁。
代码演示
💡 Tips: 需求 点击 div模块后 2s 颜色变成『粉色』
<!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: #58a;
}
</style>
</head>
<body>
<div id="ad"></div>
<script>
//需求-1 点击 div 2s 后颜色变成『粉色』
//获取元素
let ad = document.getElementById('ad');
//绑定事件
ad.addEventListener("click", function(){
//保存 this 的值
let _this = this;
//定时器
setTimeout(function(){
//修改背景颜色 this
console.log(this);
_this.style.background = 'pink';
//this.style.background = 'pink';
}, 2000);
});
</script>
</body>
</html>
截图
💡 Tips:我们发现console.log(this);打印出的this是Windows对象,所以如果用第30行代码替换29行代码,那么div模块肯定是不会变颜色的,以前的解决方案是用第24行代码解决的问题,但是现在不用了我们可以用箭头函数来解决that = this这种看起来很聪明其实很愚蠢的写法。
解决方案
箭头函数是没有自己的this的,他会去找自己在哪个函数作用域下声明的,它就把自己的this指向这个函数作用域的中的this,如下面,它是在回调函数中声明的,那么它的this就和回调函数的this保持一致,即第27行代码与第23行代码打出的this都是一样的
,都是id为ad的元素,也就是ad对象。
<!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: #58a;
}
</style>
</head>
<body>
<div id="ad"></div>
<script>
//需求-1 点击 div 2s 后颜色变成『粉色』
//获取元素
let ad = document.getElementById('ad');
//绑定事件
ad.addEventListener("click", function(){
console.log(this);
//定时器
setTimeout(() => {
//修改背景颜色 this
console.log(this);
// _this.style.background = 'pink';
this.style.background = 'pink';
}, 2000);
});
</script>
</body>
</html>
箭头函数与数组的回调方法结合使用
需求-2 从数组中返回偶数的元素
const arr = [1,6,9,10,100,25];
// const result = arr.filter(function(item){
// if(item % 2 === 0){
// return true;
// }else{
// return false;
// }
// });
const result = arr.filter(item => item % 2 === 0);
console.log(result);
// 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
// 箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法
箭头函数与this的简单拓展
箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法。第4行的this与第10行的this指向的对象不一样,上面的this指向的是第1到6行花括号这个对象,下面的this指向的是外层作用域的值。
{
name:'小明',
getname:function(){
this.name;
}
}
{
name:'小红',
getname:()=>{
this.name;
}
}