es6的箭头函数

简介: 一、箭头函数的使用场景箭头函数在es6的标准中引入,可以用于替代传统定义函数的写法,一般用在函数本身代码量比较少,且处理逻辑简单的场景,此时可以用箭头函数替代原有函数,但是如果函数的代码量较大及处理逻辑较为复杂的时候,还是使用传统函数定义的方法。

一、箭头函数的使用场景

箭头函数在es6的标准中引入,可以用于替代传统定义函数的写法,一般用在函数本身代码量比较少,且处理逻辑简单的场景,此时可以用箭头函数替代原有函数,但是如果函数的代码量较大及处理逻辑较为复杂的时候,还是使用传统函数定义的方法。

1、简化函数的定义

img_9e9646a58a1d09b17bef048e4c35a6a8.png
img_6446aa92fd961ea407432d67021e1c94.png

函数传递参数

img_7810135e16bd1d8d652268fd117806b3.png

简化函数执行上下文绑定的方式

this在js里面使用场景较多,切换也比较频繁,因此带来了各种运行时因为上下文切换导致的错误,如下代码:

img_45b10445ddd8aaf09b8b497fae20df22.png

由于使用了setTimeout在1000ms以后执行console中的内容,此时this已经不代表c对象的实例,此时this为全局的this,所以运行时候输出undefined。此种情况下传统的做法可以使用function.prototype.bind将执行的上下文绑定在函数上面

img_ba138e19bcaa70962eb7bac01b47a0f4.png

使用箭头函数可以让这一过程更简单

img_d520622be3f489c27f9e991b29736fc0.png

二、不能使用箭头函数的场景

1、定义方法的时候

(1)定义字面量方法

img_0c007308f8a820519b299f10d9c38a58.png

calculator.sum使用箭头函数来定义,但是调用的时候会抛出typeError,因为运行时this.array是未定义的,调用calculator.sum的时候,执行上下文里面的this仍然指向window,原因是箭头函数上山下文绑定到了window,this.array等价于window.array,显然后者是未定义的。

解决办法:

img_3496e8e9b2117e678e8a87bdc320b9cd.png

(2)定义原型方法

img_71b881cc75f94b4fef01ff6aa66b982f.png

使用传统的函数表达式就能解决问题 JS Bin

img_f0bacc4b83b01313b5f1bf7fe77347b1.png

sayCatName 变成普通函数之后,被调用时的执行上下文就会指向新创建的 cat 实例。

2、定义事件回调函数

箭头函数在声明的时候就绑定了执行上下文,要动态改变上下文是不可能,在需要动态上下文的时候,它的弊端就凸显出来了,比如在客户端编程中常见的dom事件回调函数(evenListener)绑定,触发回调函数时候this指向当前发生事件的dom节点,而动态上下文这个时候就很有用,比如下边这段代码试图使用箭头函数来做事件回调函数

img_4e2dc870097262029af890f756145d6e.png

在全局上下文定义的箭头函数执行的时候,this会指向为window,当单击事件发生的时候,浏览器会尝试用button作为上下文来执行事件回调函数,但是箭头函数预定义的上下文不能被修改,这样this.innerHTML就等价于window。innerHTML,而后者是没有任何意义的。

使用函数表达式就可以在运行时候动态的改变this,修正后的代码

img_85a4ed724c458dcb79d273e977e0cbc8.png

3、定义构造函数

构造函数中的this指向新创建的对象,当执行new Car()的时候,构造函数Car的上下文就是新创建的对象,也就是说 this instanceof Car === true。显然箭头函数是不能用来做构造函数的,实际上js会禁止你这么做,如果你这么做了,他就会抛出异常。

换句话说,箭头构造函数的执行并没有任何意义,并且是由歧义的,比如当我们运行下面代码

img_ca7952b389939c4d97d920c9b1f10f88.png

构造新的Message实例时,js引擎抛了错误,因为Message不是构造函数,在笔者看来相比旧的js引擎在出错时悄悄失败的设计,ES6出错时给出具体错误信息是非常不错的实践,可以通过使用函数表达式或者函数声明来声明构造函数修复上面的例子

img_2585c695f339d541bc99a30bc2ad488c.png
相关文章
|
12月前
|
存储 弹性计算 运维
保障业务连续性,企业灾备建设新思路
本次分享主题为“保障业务连续性,企业灾备建设新思路”,由阿里云专家李媛和胡航丽主讲。内容涵盖企业业务连续性与灾备建设的重要性、新产品及其界面特点、Regional ESID、云备份Call back up、跨账号备份等。重点介绍了数据灾备中心BDRC,其具备全面覆盖阿里云资源、可视化设计、简化运维等特点,帮助企业高效实现数据灾备及合规管理。同时,针对企业面临的灾备挑战,如勒索病毒攻击、数据误删等,提供了不可变备份、自动病毒检测等功能,确保数据安全性和业务连续性。最后,通过案例展示了如何通过云备份服务满足企业的高阶需求,降低运维成本并提高效率。
350 13
|
人工智能 运维 监控
云栖实录 |出海新时代:阿里云如何让客户触达更便捷?
阿里云推出场景编排产品Chat Flow,助力中国企业出海
385 2
云栖实录 |出海新时代:阿里云如何让客户触达更便捷?
|
Kubernetes Cloud Native 安全
阿里云原生容器服务产品体系-ACK Pro 托管集群
阿里云原生容器服务产品体系-ACK Pro 托管集群
阿里云原生容器服务产品体系-ACK Pro 托管集群
|
Web App开发 移动开发 iOS开发
如何在浏览器中启用 WebGL 以使用 HTML5 3D 查看器
如何在浏览器中启用 WebGL 以使用 HTML5 3D 查看器
383 0
|
测试技术
华人团队推出视频扩展模型MOTIA
华人团队推出视频扩展模型MOTIA,通过智能算法扩展视频内容,适应不同设备和场景。该模型分为输入特定适应和模式感知扩展两阶段,有效保持视频帧内帧间一致性,提升扩展质量。在DAVIS和YouTube-VOS基准上超越现有先进方法,且无需大量任务调整,降低创作者的时间成本。然而,源视频信息不足或模式不明显时,MOTIA性能受限,且对计算资源要求较高。
521 2
华人团队推出视频扩展模型MOTIA
|
存储 前端开发 安全
python窗口刷新图片
【4月更文挑战第11天】
298 0
|
缓存 Dubbo Java
3步让Dubbo项目快速集成Sentinel
在微服务系统中,缓存、限流、熔断是保证系统高可用的三板斧。本文通过3个步骤,让Dubbo项目快速集成使用Sentinel实现系统限流。
|
存储 安全 API
阿里云APP下载入口和方式
阿里云APP是一款为用户提供安全、稳定、高效的云计算服务的手机应用程序。它具备多种功能,包括文件存储、文件共享、远程控制、备份等等。下面从背景介绍、概览、价值、竞品对比分析、可靠性、创新性、用户反馈和影响力等方面展开扩写。
阿里云APP下载入口和方式
|
存储 IDE 开发工具
Python 教程之 Pandas(1)—— Pandas 数据框
Python 教程之 Pandas(1)—— Pandas 数据框
535 0
ASCII码对照表
ASCII码对照表
1014 0