ES6_箭头函数_笔记

概述

ES6允许使用箭头(=>)定义函数,箭头函数提供了一种更加简洁的函数书写方式,箭头函数多用于匿
名函数的定义;

箭头函数的注意点:

  1. 如果形参只有一个,则小括号可以省略;
  2. 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的执行结果;
  3. 箭头函数 this 指向声明时所在作用域下 this 的值;
  4. 箭头函数不能作为构造函数实例化;
  5. 不能使用 arguments;

特性:

  1. 箭头函数的this是静态的,始终指向函数声明时所在作用域下的this的值;
  2. 不能作为构造实例化对象;
  3. 不能使用 arguments 变量;

应用场景

1声明和调用

在这里插入图片描述
在这里插入图片描述

2箭头函数的this是静态的,始终指向函数声明时所在作用域下的this的值;

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
普通函数是当前的,箭头函数是静态,在函数声明下this值

3箭头函数不能作为构造函数实例化

在这里插入图片描述
在这里插入图片描述

4不能使用 arguments 变量

在这里插入图片描述
在这里插入图片描述

5箭头函数的简写

在这里插入图片描述
在这里插入图片描述

箭头函数实践

需求-1:点击 div 2s 后颜色变成『粉色』:

传统写法存在问题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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(){
// 传统写法
// 定时器:参数1:回调函数;参数2:时间;
setTimeout(function(){
console.log(this);
this.style.background = 'pink';
},2000);
// 报错Cannot set property 'background' of undefined
});
</script>
</body>
</html>

在这里插入图片描述

传统写法问题解决:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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;
// 定时器:参数1:回调函数;参数2:时间;
setTimeout(function(){
console.log(this);
_this.style.background = 'pink';
},2000);
// 报错Cannot set property 'background' of undefined
});
</script>
</body>
</html>

ES6写法:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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');
// 绑定事件:这也是错误写法,这里的this还是window
// ad.addEventListener("click", () => {
// // ES6写法
// // 定时器:参数1:回调函数;参数2:时间;
// setTimeout(() => this.style.background = 'pink',2000);
// }
// )
// 绑定事件
ad.addEventListener("click", function(){
// ES6写法
// 定时器:参数1:回调函数;参数2:时间;
// 这个this才是ad
setTimeout(() => this.style.background = 'pink',2000);
}
)
</script>
</body>
</html>

需求-2 从数组中返回偶数的元素:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
简化

在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值