ES6_箭头函数_笔记

最新推荐文章于 2023-03-02 14:29:14 发布

雨浅听风吟

最新推荐文章于 2023-03-02 14:29:14 发布

阅读量217

点赞数

分类专栏：前端文章标签： pytorch 深度学习 python

本文链接：https://blog.csdn.net/weixin_39289876/article/details/121653296

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

文章目录

概述
箭头函数的注意点：
特性：
应用场景
箭头函数实践

概述

ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿
名函数的定义；

箭头函数的注意点：

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

特性：

箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值；
不能作为构造实例化对象；
不能使用 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
评论
ES6_箭头函数_笔记

文章目录概述箭头函数的注意点：特性：应用场景1声明和调用2箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值；3箭头函数不能作为构造函数实例化4不能使用 arguments 变量5箭头函数的简写箭头函数实践需求-1：点击 div 2s 后颜色变成『粉色』：传统写法存在问题传统写法问题解决：ES6写法：需求-2 从数组中返回偶数的元素：概述ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义；箭头函数的注意点：如果形
复制链接

扫一扫

专栏目录