ES6_箭头函数_笔记

最新推荐文章于 2024-07-22 16:47:01 发布
最新推荐文章于 2024-07-22 16:47:01 发布
阅读量217 收藏 1
点赞数
分类专栏： 前端 文章标签： pytorch 深度学习 python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39289876/article/details/121653296
版权

文章目录

概述

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
    评论
专栏目录
ES6 箭头函数
langmanboy的博客
04-22 340
箭头函数 1. 箭头函数语法 箭头函数是 ES6 新增的特性， 通过使用 => 定义函数的新语法 箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super 或 new.target 箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数 arg1, arg2, ..argN 函数参数 expression 函数返回值 let func = (arg1, arg2, ..., argN) => expression; let func =
ES6：箭头函数
weixin_42243479的博客
10-15 162
了解 箭头函数：出现的作用除了让函数的书写变得很简洁，可读性很好外；最大的优点是解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题。 我们常见的window属性和方法有alter，document，parseInt，setTimeout，setInterval，...
前端学习（ES6）箭头函数 笔记
weixin_43991459的博客
03-07 165
ES6 允许使用 箭头 => 定义函数 等号后跟一个大于号 => let fn = function(){ } 附：旧版函数定义方式 let fn2 = (a,b) =>{ return a + b; } 用箭头函数来定义（将function替换为括号箭头）function ()=>{} 调用箭头函数 fn2 console.log(fn2(1,2)); 省略写法 省略写法，形参唯一的
箭头函数笔记
weixin_45971916的博客
03-02 51
箭头函数允许我们用更短的语法定义函数，箭头函数相当于匿名函数，并简化了函数定义，箭头函数可用于替代传统函数function() {}，并且继承这个this值。箭头函数的this指向在被定义的时候就确定了，之后永远都不会改变。箭头函数不会创建自己的this，如果存在外层第一个普通函数，在定义的时候会继承它的this。如果箭头函数的函数体只有一句代码，返回的不是变量和简单的js表达式，而是一个对象。如果箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中。箭头函数没有自己的this指向，它会捕获自己。
箭头函数里的this指向问题
xiaowuwjw的博客
01-23 2594
箭头函数的基础指向问题，简单易懂！！！
箭头函数 -- this 指向
zhou
09-28 189
  在 ES6 的箭头函数中 this 是静态的始终指向函数声明时所在作用域下的 this 值。 function getName1(){ console.log(this.name); } let getName2 = () => { console.log(this.name); } window.name = "学小习"; const school = { name: "learning" } //直接调用 getName1(); getName2(); //call调用 c
vue箭头函数this作用域
wushen的博客
04-30 2297
在做vue项目时用到了axios，但是发现axios请求之后的回调函数里this并不指向当前vue实例，从而导致浏览器报错。 出错代码及结果: created : function(){ axios.get('static/data.json').then(function(res){ console.log(this) //undefined ...
es6笔记补充es6笔记补充
04-03
1. **箭头函数**：箭头函数是ES6中一种更简洁的函数定义方式，例如 `(params) => { statements }`。它没有自己的`this`，`this`值继承自外层作用域，这与传统函数表达式不同，解决了回调函数中`this`指向的问题。 2...
es6尚硅谷笔记es6尚硅谷笔记
04-03
这些版本引入了许多新特性，如let关键字、箭头函数、类和模块等。 5. **let关键字** - **不允许重复声明**：与var不同，let不允许在同一个作用域内重复声明同一变量。 - **块级作用域**：let声明的变量只在其所在...
ES6学习笔记.docx
04-27
在本文中，我们将介绍ES6的学习心得，包括ES6的三种命名方式、箭头函数的介绍和应用、ES6字符串模板、ES6中的for和Array以及扩展运算符等。 一、ES6命名方式 在ES6中，引入了三种命名方式：var、let和const。var是...
超详细ES6变动，ES6学习笔记，JavaScriptES6学习笔记
09-16
本学习笔记将聚焦于与ES5的区别，帮助初学者快速掌握ES6的核心概念。** 1. **变量声明：let和const** - `let`替代了`var`进行块级作用域的变量声明，解决了`var`的变量提升和函数作用域问题。 - `const`用于声明...
es6面向对象学习笔记整理版.md
06-16
- 含义：分析问题的解决步骤，通过函数实现每一步，然后依次调用函数来完成； - ###### 面向对象编程OOP（Object Oriented programming） - 含义：把事务分解成一个个对象，通过对象之间分工与合作解决；（**拟...
JS中this指向问题（含Vue、ES6中箭头函数的this问题）
unlilalila的博客
10-23 375
this指针（一般情况）： this 的指向在函数定义时是确定不了的，只有函数执行时才能确定 this 到底指向谁，一般情况下，this 的最终指向是调用自己的对象。 1.全局作用域或普通函数中的 this 指向全局对象 window 注意：定时器中的 this 指向 window，因为定时器是 window 调用的 2.方法调用中谁调用 this 就指向谁 3.构造函数中 this 指向构造函数的实例对象 箭头函数中的this指针： 1.this 是静态的，this 始终指向函数声明时所
箭头函数的this作用域指向
lishuangcsdn的博客
09-25 291
const myObj = { name:'刘木子', say: () => { this.name; } } console.log(myObj.name); console.log(myObj.say()); 比如上边这段代码，输出结果为“刘木子” undefind，箭头函数中的this指向是指环境定义时的环境，这里应该是指向的window，所以没有找到，比如在vue中，m...
箭头函数：this指向问题
weixin_69188183的博客
04-16 353
箭头函数的this指向是静态的，始终指向函数声明时所在作用域下的this值。一篇解决你所有困惑。
ES6箭头函数的作用域this指向
wenxin_liu的博客
06-27 850
作用域 这个箭头函数的作用域和其他函数有一些不同,如果不是严格模式，this关键字就是指向window，严格模式就是undefined，在构造函数里的this指向的是当前对象实例,如果this在一个对象的函数内则this指向的是这个对象，this有可能指向的是一个dom元素，例如当我们添加事件监听函数时,可能这个this的指向不是很直接，其实this（不止是this变量）变量的指向是根据一个规则来判断的：作用域流。下面我将演示this在事件监听函数和在对象函数内出现的情况： 在事件监听函数中： docume
es6箭头函数_ES6之箭头函数
weixin_39545805的博客
11-24 160
箭头函数简化了原生写法，让代码更加简洁，来看一下基础的写法箭头函数写法基础写法函数的写法也就是比原生的写法少了function多了箭头，所以这可能就是箭头函数的由来吧！简化写法1) 当形参有且只有一个的时候,可以省略小括号2)当代码体只有一条语句的时候可以省略花括号注意：此时return必须省略，而且语句的执行结果就是函数的返回值使用箭头函数注意事项1.不能作为构造实例化对象此时会报错2.不能使用...
ES6系列笔记-箭头函数
祈澈菇凉
12-20 286
ES6相关概念就不多解释啦，语法也成为了前端的主流，平时在很多场景开发中都会遇到，一下是关于ES6系列笔记的一些记录~ 1：普通写法和箭头函数 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title...
基于 PyTorch 的模型瘦身三部曲：量化、剪枝和蒸馏，让模型更短小精悍！
最新发布
m0_59257547的博客
07-22 658
：本文详细介绍了如何使用PyTorch实现模型量化、剪枝和蒸馏，以达到模型瘦身的目的。从理论原理到实践代码，全方位解读如何在保持模型性能的同时，显著减小模型大小和提高推理速度。无论你是深度学习新手还是资深开发者，都能从中获得宝贵的模型优化技巧。立即阅读，开启你的模型瘦身之旅！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值