箭头功能:forEach,$。each,每个

在上一篇文章中,我们看到了什么是箭头函数,以及它如何为程序员提供一种更简洁,直观的方法来定义函数。

在本文及后续文章中,我们将研究使用箭头函数时应注意的潜在陷阱。 具体来说,在列表处理和事件处理程序的上下文中,我们将重点关注箭头/非箭头函数中的含义,这是所有Web应用程序必不可少的方面。

我们还将学习如何在不同的上下文中理解this ,并消除我们在this方面可能造成的任何困惑,从而使使用箭头和非箭头功能处理this问题的过程变得不再那么压力和更舒适了。 。

本文将重点讨论我们一直使用的三种方法进行列表处理的不同行为: forEach$.each.each

范例程式码

我们将使用一个小程序来查看当它出现在每种um方法中时,其值如何变化。 您可以在此处查看CodePen上托管的代码。 您也可以复制和粘贴此HTML文件,并在本地计算机上测试代码。

该应用程序的总体结构如下。

您可能会注意到,箭头函数中的箭头始终指向同一对象App ,而不管箭头函数所使用的方法是什么。如果我们记得箭头函数中的箭头是在“词法范围”内定义的,则应该从某种意义上说,由于此值取决于在源代码中可以找到的位置,因此在编写源代码后就已经“固定”了。 这是我们绝对欢迎张开双臂创建箭头功能的原因之一; 我们不再需要花费时间和精力来实施“聪明”的技术,例如“ bind和“ call ,以处理上下文的变化和损失。

交易

作为程序员,重要的是要注意细节,以便我们可以正确使用新发现的工具。

首先,我们必须记住,列表处理的主要目标,顾名思义是处理列表。 因此,我们需要确保可以访问列表中包含的每个元素。 毕竟,如果我们无法访问要迭代的内容,那么遍历元素列表的意义何在?

然后,我们意识到箭头功能中的this功能不提供对列表中包含的每个元素( currentElement )的访问。 如果我们看一下上面的Fig2和Fig3,我们还会注意到一个非箭头函数(即用function关键字定义的function ),该function本身用作$.eacheach方法的回调函数,实际上指向当前迭代的元素,这是jQuery库实现此行为的方式, this是我们在编程生涯中广泛使用$.each.each

哎呀this是一个箭头函数, 它将覆盖此默认行为,并根据源代码中最初定义的位置引用App对象。

当前元素在哪里?

那么,问题是要知道如何在$.each.each方法中使用箭头函数访问列表中的每个元素而不使用this

我们可以简单地依靠这些方法中的每一个的默认参数来实现此目的,而不是依靠this来访问每个元素。

对于forEach方法,我们应该使用其回调箭头函数的第一个参数来访问当前元素,如下所示:

使用第一个参数访问当前元素

对于$.eacheach方法,我们应该使用其回调的第二个参数arrow函数来访问当前元素的“值”,该元素实际上是一个Javascript对象。 注意,回调函数的第一个参数是为当前迭代元素的索引保留的。 如果您不确定如何实现这些方法,则可能需要查看MDN文档中的$.eacheach文档。

使用第二个参数访问当前元素

当然,对于$.each.each的回调函数,我们可以选择不使用箭头函数,而是转向非箭头function并依靠jQuery实现的默认值来引用该值(对象)的当前迭代元素。

底线

尽管箭头功能提供的简洁直观的代码功能强大且对程序员友好,但我们必须确保this指向了我们期望的含义。 特别是对于jQuery方法(即$.eacheach ),在使用箭头函数作为回调函数时应格外小心,因为它会覆盖指向当前迭代的元素(对象)的默认实现, this是我们通常依赖的行为关于何时使用这些方法。 如果决定将箭头函数用作$.each.each的回调函数,请确保使用其第二个参数引用当前迭代的值。 如果选择采用非箭头函数作为回调函数,则可以安全地使用this函数访问这些方法中当前正在迭代的对象。