遇事不决箭头函数?别期望“万金油”语法

2024-03-02 15:40

本文主要是介绍遇事不决箭头函数?别期望“万金油”语法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

全文共1274字,预计学习时长6分钟

 

遇事不决箭头函数?别期望“万金油”语法

图源:unsplash

 

ES6箭头函数似乎是一种很上瘾的函数,一旦了解你很容易用到停不下来。作为2015年ECMAScript 6更新的一部分,箭头函数有充分理由迅速流行。箭头函数语法是极好的语法糖,能解决很多需求:

 

· 函数关键字

· 花括号

· return关键字(对于单行函数)

 

此外,箭头函数还降低了JavaScript的函数范围以及this关键字的部分复杂性,因为有时真正需要的只是一个匿名函数。

 

但事实上,箭头函数并不一定能解决编写JavaScript函数时的每一项需求。“万金油”函数是奢谈,下面就让我们深入探讨几个箭头函数不能解决的情况吧。

 

遇事不决箭头函数?别期望“万金油”语法

 

对象原型

 

先看JavaScript代码片段:

 

classRobot {constructor(name,catchPhrase) {this.name= name;this.catchPhrase= catchPhrase;}};Robot.prototype.speak= () => {console.log(this === window);return this.catchPhrase};const ironG =newRobot("Iron Giant", "Be good");ironG.speak();

 

第15行的函数调用如下:

 

true
undefined

 

定义了speak() 原型函数,并为新Robot对象传递了口号,那为什么这段代码的计算结果是未定义的呢?

 

console.log()揭示了原因。如你所见,当要求控制台判断(this === window)时,它返回true。这为上文对象方法示例中讨论的内容提供了依据。

 

当使用需要上下文的函数时,必须使用常规函数语法,以便使this正确绑定:

 

Robot.prototype.speak=function() {console.log(this === ironG); // truereturn this.catchphrase;};

 

遇事不决箭头函数?别期望“万金油”语法

图源:unsplash

 

遇事不决箭头函数?别期望“万金油”语法

 

对象方法

 

假设想要创建一个绑定到对象的方法。

 

const mario = {lives: 3,oneUp: () => {this.lives++;}}

 

这个例子中,如调用mario.oneUp(),mario.lives的值应该从3增加到4。然而,按照目前所写的代码,无论调用多少次oneUp(), lives的值都将保持不变。

 

为什么?正是因为this!

 

正如MDN所述:箭头函数自身没有this。使用了封闭词法范围的this值;箭头函数遵循正常的变量查找规则。因此,当搜索当前作用域中不存在的this时,箭头函数最终会从其封闭作用域中找到this。

 

例子中,封闭的范围是window对象。调用oneUp()会要求程序增加window对象中lives的值。这样的值不存在,所以代码不起作用。

 

相反,应该使用传统的函数语法,它将函数的this绑定到调用该函数的特定对象上:

 

const mario = {lives: 3,oneUp: function() {this.lives++;}};

 

遇事不决箭头函数?别期望“万金油”语法

 

动态上下文

 

最后一个例子:

 

const button = document.querySelector(#darkMode);button.addEventListener('click', () => {this.classList.toggle('on');});

 

到目前为止,你可能已经意识到这个代码无效及其原因。没错,这又和this有关。

 

箭头函数语法在函数声明时静态地绑定上下文,这与使用事件处理程序或事件监听器时试图实现的相反,它们本质上是动态的。

 

当通过事件处理程序或监听器操作DOM时,触发的事件指向属于目标元素的this。

 

对于全局执行上下文中定义的箭头函数,this将指向window。因此,上面的代码中,this.classList将被认为是window.classList,从而导致TypeError。

 

遇事不决箭头函数?别期望“万金油”语法

图源:unsplash

 

从这几个简单的例子中可以发现,JavaScript中关于this的内容值得研究,这也许会加深你对何时使用或不使用箭头函数的理解。

 

遇事不决箭头函数?别期望“万金油”语法

留言 点赞 关注

我们一起分享AI学习与发展的干货
欢迎关注全平台AI垂类自媒体 “读芯术”

(添加小编微信:dxsxbb,加入读者圈,一起讨论最新鲜的人工智能科技哦~)

这篇关于遇事不决箭头函数?别期望“万金油”语法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/766617

相关文章

postgresql使用UUID函数的方法

《postgresql使用UUID函数的方法》本文给大家介绍postgresql使用UUID函数的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录PostgreSQL有两种生成uuid的方法。可以先通过sql查看是否已安装扩展函数,和可以安装的扩展函数

MySQL字符串常用函数详解

《MySQL字符串常用函数详解》本文给大家介绍MySQL字符串常用函数,本文结合实例代码给大家介绍的非常详细,对大家学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录mysql字符串常用函数一、获取二、大小写转换三、拼接四、截取五、比较、反转、替换六、去空白、填充MySQL字符串常用函数一、

C++中assign函数的使用

《C++中assign函数的使用》在C++标准模板库中,std::list等容器都提供了assign成员函数,它比操作符更灵活,支持多种初始化方式,下面就来介绍一下assign的用法,具有一定的参考价... 目录​1.assign的基本功能​​语法​2. 具体用法示例​​​(1) 填充n个相同值​​(2)

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更

PostgreSQL中rank()窗口函数实用指南与示例

《PostgreSQL中rank()窗口函数实用指南与示例》在数据分析和数据库管理中,经常需要对数据进行排名操作,PostgreSQL提供了强大的窗口函数rank(),可以方便地对结果集中的行进行排名... 目录一、rank()函数简介二、基础示例:部门内员工薪资排名示例数据排名查询三、高级应用示例1. 每

全面掌握 SQL 中的 DATEDIFF函数及用法最佳实践

《全面掌握SQL中的DATEDIFF函数及用法最佳实践》本文解析DATEDIFF在不同数据库中的差异,强调其边界计算原理,探讨应用场景及陷阱,推荐根据需求选择TIMESTAMPDIFF或inte... 目录1. 核心概念:DATEDIFF 究竟在计算什么?2. 主流数据库中的 DATEDIFF 实现2.1

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

《MySQL多列IN查询之语法、性能与实战技巧(最新整理)》本文详解MySQL多列IN查询,对比传统OR写法,强调其简洁高效,适合批量匹配复合键,通过联合索引、分批次优化提升性能,兼容多种数据库... 目录一、基础语法:多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析

MySQL中的LENGTH()函数用法详解与实例分析

《MySQL中的LENGTH()函数用法详解与实例分析》MySQLLENGTH()函数用于计算字符串的字节长度,区别于CHAR_LENGTH()的字符长度,适用于多字节字符集(如UTF-8)的数据验证... 目录1. LENGTH()函数的基本语法2. LENGTH()函数的返回值2.1 示例1:计算字符串

MySQL 中的 CAST 函数详解及常见用法

《MySQL中的CAST函数详解及常见用法》CAST函数是MySQL中用于数据类型转换的重要函数,它允许你将一个值从一种数据类型转换为另一种数据类型,本文给大家介绍MySQL中的CAST... 目录mysql 中的 CAST 函数详解一、基本语法二、支持的数据类型三、常见用法示例1. 字符串转数字2. 数字

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》:本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客