【TG＿duoteJG】多特工作室杰哥duotee.com版权所有，禁止转载
微信飞鸟箭头搭建函数如何处理this关键字
关于微信飞鸟箭头搭建函数要记住的盘口最重要的事情是它们处理this新圣飞鸟二开关键字的方式。特别是，this箭头搭建函数内的盘口关键字不会反弹。
为了说明这意味着什么，请查看下面的演示：
[codepen_embed height=”300″ default_tab=”html,result” slug_hash=”qBqgBmR” user=”SitePoint”]在 CodePen 上的 ( )
。[/codepen_embed]
这是一个按钮。单击按钮会触发从 5 到 1 的反向计数器，该计数器显示在按钮本身上。
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript"><span style="color:#89ddff"><</span>button class<span style="color:#89ddff">=</span><span style="color:#c3e88d">"start-btn"</span><span style="color:#89ddff">></span>Start Counter<span style="color:#89ddff"><</span><span style="color:#89ddff">/</span>button<span style="color:#89ddff">></span><span style="color:#89ddff">...</span>const startBtn <span style="color:#89ddff">=</span> <span style="color:#bfc7d5">document</span><span style="color:#c792ea">.</span><span style="color:#82aaff">querySelector</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">".start-btn"</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span>startBtn<span style="color:#c792ea">.</span><span style="color:#82aaff">addEventListener</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">'click'</span><span style="color:#c792ea">,</span> function<span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
this<span style="color:#c792ea">.</span>classList<span style="color:#c792ea">.</span><span style="color:#82aaff">add</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">'counting'</span><span style="color:#c792ea">)</span>
let counter <span style="color:#89ddff">=</span> <span style="color:#f78c6c">5</span><span style="color:#c792ea">;</span>
const timer <span style="color:#89ddff">=</span> <span style="color:#82aaff">setInterval</span><span style="color:#c792ea">(</span><span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#89ddff">=></span> <span style="color:#c792ea">{</span>
this<span style="color:#c792ea">.</span>textContent <span style="color:#89ddff">=</span> counter
counter <span style="color:#89ddff">--</span>
if<span style="color:#c792ea">(</span>counter <span style="color:#89ddff"><</span> <span style="color:#f78c6c">0</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
this<span style="color:#c792ea">.</span>textContent <span style="color:#89ddff">=</span> <span style="color:#c3e88d">'THE END!'</span>
this<span style="color:#c792ea">.</span>classList<span style="color:#c792ea">.</span><span style="color:#82aaff">remove</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">'counting'</span><span style="color:#c792ea">)</span>
<span style="color:#82aaff">clearInterval</span><span style="color:#c792ea">(</span>timer<span style="color:#c792ea">)</span>
<span style="color:#c792ea">}</span>
<span style="color:#c792ea">}</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">1000</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">}</span><span style="color:#c792ea">)</span></code></span></span>
注意方法中的事件处理程序.addEventListener()是一个普通的匿名函数表达式，而不是箭头函数。为什么？如果您this在函数内部登录，您会看到它引用了已附加侦听器的按钮元素，这正是程序按计划工作所期望的和需要的：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">startBtn<span style="color:#c792ea">.</span><span style="color:#82aaff">addEventListener</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">'click'</span><span style="color:#c792ea">,</span> function<span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
<span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span>this<span style="color:#c792ea">)</span>
<span style="color:#89ddff">...</span><span style="color:#c792ea">}</span><span style="color:#c792ea">)</span></code></span></span>
这是 Firefox 开发者工具控制台中的样子：
但是，尝试用箭头函数替换常规函数，如下所示：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">startBtn<span style="color:#c792ea">.</span><span style="color:#82aaff">addEventListener</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">'click'</span><span style="color:#c792ea">,</span> <span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#89ddff">=></span> <span style="color:#c792ea">{</span>
<span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span>this<span style="color:#c792ea">)</span>
<span style="color:#89ddff">...</span><span style="color:#c792ea">}</span><span style="color:#c792ea">)</span></code></span></span>
现在，this不再引用该按钮。相反，它引用了Window对象：
编辑
这意味着，如果您想在this单击按钮后向按钮添加一个类，例如，您的代码将不起作用：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript"><span style="color:#697098">// change button's border's appearance</span>this<span style="color:#c792ea">.</span>classList<span style="color:#c792ea">.</span><span style="color:#82aaff">add</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">'counting'</span><span style="color:#c792ea">)</span></code></span></span>
这是控制台中的错误消息：
编辑
在 JavaScript 中使用箭头函数时，this关键字的值不会反弹。它继承自父作用域（这称为********）。在这种特殊情况下，所讨论的箭头函数作为参数传递给startBtn.addEventListener()位于全局范围内的方法。因此，this函数处理程序内部也绑定到全局范围——即Window对象。
所以，如果要this在程序中引用开始按钮，正确的做法是使用常规函数，而不是箭头函数。
匿名箭头函数
在上面的演示中，接下来要注意的是.setInterval()方法中的代码。在这里，您也会找到一个匿名函数，但这次是箭头函数。为什么？
请注意，如果您使用常规函数，值this会是什么：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">const timer <span style="color:#89ddff">=</span> <span style="color:#82aaff">setInterval</span><span style="color:#c792ea">(</span>function<span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
<span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span>this<span style="color:#c792ea">)</span>
<span style="color:#89ddff">...</span><span style="color:#c792ea">}</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">1000</span><span style="color:#c792ea">)</span></code></span></span>
会是button元素吗？一点也不。这将是Window对象！
编辑
事实上，上下文已经改变，因为this现在在一个未绑定或全局函数中，该函数作为参数传递给.setInterval(). 因此，this关键字的值也发生了变化，因为它现在绑定到全局范围。
在这种情况下，一个常见的技巧是包含另一个变量来存储this关键字的值，以便它继续引用预期的元素——在这种情况下，button元素：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">const that <span style="color:#89ddff">=</span> this
const timer <span style="color:#89ddff">=</span> <span style="color:#82aaff">setInterval</span><span style="color:#c792ea">(</span>function<span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
<span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span>that<span style="color:#c792ea">)</span>
<span style="color:#89ddff">...</span><span style="color:#c792ea">}</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">1000</span><span style="color:#c792ea">)</span></code></span></span>
您还可以使用.bind()来解决问题：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">const timer <span style="color:#89ddff">=</span> <span style="color:#82aaff">setInterval</span><span style="color:#c792ea">(</span>function<span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
<span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span>this<span style="color:#c792ea">)</span>
<span style="color:#89ddff">...</span><span style="color:#c792ea">}</span><span style="color:#c792ea">.</span><span style="color:#82aaff">bind</span><span style="color:#c792ea">(</span>this<span style="color:#c792ea">)</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">1000</span><span style="color:#c792ea">)</span></code></span></span>
使用箭头函数，问题就完全消失了。这this是使用箭头函数时的值：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">const timer <span style="color:#89ddff">=</span> <span style="color:#82aaff">setInterval</span><span style="color:#c792ea">(</span> <span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#89ddff">=></span> <span style="color:#c792ea">{</span>
<span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span>this<span style="color:#c792ea">)</span>
<span style="color:#89ddff">...</span><span style="color:#c792ea">}</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">1000</span><span style="color:#c792ea">)</span></code></span></span>
这一次，控制台记录了我们想要的按钮。其实程序是要改变按钮文字的，所以需要this引用button元素：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">const timer <span style="color:#89ddff">=</span> <span style="color:#82aaff">setInterval</span><span style="color:#c792ea">(</span> <span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#89ddff">=></span> <span style="color:#c792ea">{</span>
<span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span>this<span style="color:#c792ea">)</span>
<span style="color:#697098">// the button's text displays the timer value</span>
this<span style="color:#c792ea">.</span>textContent <span style="color:#89ddff">=</span> counter<span style="color:#c792ea">}</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">1000</span><span style="color:#c792ea">)</span></code></span></span>
箭头函数没有自己的this上下文。他们继承了this父级的价值，正是因为这个特性，他们在上述情况下做出了很好的选择。
JavaScript 箭头函数并不总是适合这项工作的工具
箭头函数不仅仅是一种在 JavaScript 中编写函数的新奇方式。它们有自己的局限性，这意味着在某些情况下您不想使用它们。上一个演示中的点击处理程序就是一个很好的例子，但它不是唯一的。让我们再检查几个。
箭头函数作为对象方法
箭头函数不能很好地作为对象上的方法。这是一个。
考虑这个netflixSeries对象，它有一些属性和几个方法。调用console.log(netflixSeries.getLikes())应该打印一条带有当前点赞数的消息，调用console.log(netflixSeries.addLike())应该将点赞数加一，然后在控制台上打印带有感谢消息的新值：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">const netflixSeries <span style="color:#89ddff">=</span> <span style="color:#c792ea">{</span>
title<span style="color:#89ddff">:</span> <span style="color:#c3e88d">'After Life'</span><span style="color:#c792ea">,</span>
firstRealease<span style="color:#89ddff">:</span> <span style="color:#f78c6c">2019</span><span style="color:#c792ea">,</span>
likes<span style="color:#89ddff">:</span> <span style="color:#f78c6c">5</span><span style="color:#c792ea">,</span>
<span style="color:#82aaff">getLikes</span><span style="color:#89ddff">:</span> <span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#89ddff">=></span> <span style="color:#c3e88d">`</span><span style="color:#c792ea">${</span>this<span style="color:#c792ea">.</span>title<span style="color:#c792ea">}</span><span style="color:#c3e88d"> has </span><span style="color:#c792ea">${</span>this<span style="color:#c792ea">.</span>likes<span style="color:#c792ea">}</span><span style="color:#c3e88d"> likes</span><span style="color:#c3e88d">`</span><span style="color:#c792ea">,</span>
<span style="color:#82aaff">addLike</span><span style="color:#89ddff">:</span> <span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#89ddff">=></span> <span style="color:#c792ea">{</span>
this<span style="color:#c792ea">.</span>likes<span style="color:#89ddff">++</span>
return <span style="color:#c3e88d">`</span><span style="color:#c3e88d">Thank you for liking </span><span style="color:#c792ea">${</span>this<span style="color:#c792ea">.</span>title<span style="color:#c792ea">}</span><span style="color:#c3e88d">, which now has </span><span style="color:#c792ea">${</span>this<span style="color:#c792ea">.</span>likes<span style="color:#c792ea">}</span><span style="color:#c3e88d"> likes</span><span style="color:#c3e88d">`</span>
<span style="color:#c792ea">}</span> <span style="color:#c792ea">}</span></code></span></span>
相反，调用该.getLikes()方法返回“undefined has NaN likes”，调用该.addLike()方法返回“Thank you for like like undefined, which now has NaN likes”。所以，this.title并this.likes不能分别引用对象的属性title和likes。
再一次，问题在于箭头函数的。对象的this内部方法是引用父级的作用域，在这种情况下是Window对象，而不是父级本身——也就是说，不是netflixSeries对象。
当然，解决方案是使用常规函数：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">const netflixSeries <span style="color:#89ddff">=</span> <span style="color:#c792ea">{</span>
title<span style="color:#89ddff">:</span> <span style="color:#c3e88d">'After Life'</span><span style="color:#c792ea">,</span>
firstRealease<span style="color:#89ddff">:</span> <span style="color:#f78c6c">2019</span><span style="color:#c792ea">,</span>
likes<span style="color:#89ddff">:</span> <span style="color:#f78c6c">5</span><span style="color:#c792ea">,</span>
<span style="color:#82aaff">getLikes</span><span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
return <span style="color:#c3e88d">`</span><span style="color:#c792ea">${</span>this<span style="color:#c792ea">.</span>title<span style="color:#c792ea">}</span><span style="color:#c3e88d"> has </span><span style="color:#c792ea">${</span>this<span style="color:#c792ea">.</span>likes<span style="color:#c792ea">}</span><span style="color:#c3e88d"> likes</span><span style="color:#c3e88d">`</span>
<span style="color:#c792ea">}</span><span style="color:#c792ea">,</span>
<span style="color:#82aaff">addLike</span><span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
this<span style="color:#c792ea">.</span>likes<span style="color:#89ddff">++</span>
return <span style="color:#c3e88d">`</span><span style="color:#c3e88d">Thank you for liking </span><span style="color:#c792ea">${</span>this<span style="color:#c792ea">.</span>title<span style="color:#c792ea">}</span><span style="color:#c3e88d">, which now has </span><span style="color:#c792ea">${</span>this<span style="color:#c792ea">.</span>likes<span style="color:#c792ea">}</span><span style="color:#c3e88d"> likes</span><span style="color:#c3e88d">`</span>
<span style="color:#c792ea">}</span> <span style="color:#c792ea">}</span><span style="color:#697098">// call the methods </span><span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span>netflixSeries<span style="color:#c792ea">.</span><span style="color:#82aaff">getLikes</span><span style="color:#c792ea">(</span><span style="color:#c792ea">)</span><span style="color:#c792ea">)</span><span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span>netflixSeries<span style="color:#c792ea">.</span><span style="color:#82aaff">addLike</span><span style="color:#c792ea">(</span><span style="color:#c792ea">)</span><span style="color:#c792ea">)</span><span style="color:#697098">// output: </span>After Life has <span style="color:#f78c6c">5</span> likes
Thank you for liking After Life<span style="color:#c792ea">,</span> which now has <span style="color:#f78c6c">6</span> likes</code></span></span>
第三方库的箭头函数
另一个需要注意的问题是第三方库通常会绑定方法调用，以便this值指向有用的东西。
例如，在 jQuery 事件处理程序中，this您可以访问处理程序绑定到的 DOM 元素：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript"><span style="color:#82aaff">$</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">'body'</span><span style="color:#c792ea">)</span><span style="color:#c792ea">.</span><span style="color:#82aaff">on</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">'click'</span><span style="color:#c792ea">,</span> function<span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
<span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span>this<span style="color:#c792ea">)</span><span style="color:#c792ea">}</span><span style="color:#c792ea">)</span><span style="color:#697098">// <body></span></code></span></span>
但是如果我们使用箭头函数——正如我们所见，它没有自己的this上下文——我们会得到意想不到的结果：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript"><span style="color:#82aaff">$</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">'body'</span><span style="color:#c792ea">)</span><span style="color:#c792ea">.</span><span style="color:#82aaff">on</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">'click'</span><span style="color:#c792ea">,</span> <span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#89ddff">=></span><span style="color:#c792ea">{</span>
<span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span>this<span style="color:#c792ea">)</span><span style="color:#c792ea">}</span><span style="color:#c792ea">)</span><span style="color:#697098">// Window</span></code></span></span>
这是使用的另一个示例：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">new <span style="color:#ffcb6b">Vue</span><span style="color:#c792ea">(</span><span style="color:#c792ea">{</span>
el<span style="color:#89ddff">:</span> app<span style="color:#c792ea">,</span>
data<span style="color:#89ddff">:</span> <span style="color:#c792ea">{</span>
message<span style="color:#89ddff">:</span> <span style="color:#c3e88d">'Hello, World!'</span>
<span style="color:#c792ea">}</span><span style="color:#c792ea">,</span>
<span style="color:#82aaff">created</span><span style="color:#89ddff">:</span> function<span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
<span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span>this<span style="color:#c792ea">.</span>message<span style="color:#c792ea">)</span><span style="color:#c792ea">;</span>
<span style="color:#c792ea">}</span><span style="color:#c792ea">}</span><span style="color:#c792ea">)</span><span style="color:#697098">// Hello, World!</span></code></span></span>
在created钩子内部，this绑定到 Vue 实例，所以“Hello, World!” 显示信息。
但是，如果我们使用箭头函数，this它将指向没有message属性的父作用域：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">new <span style="color:#ffcb6b">Vue</span><span style="color:#c792ea">(</span><span style="color:#c792ea">{</span>
el<span style="color:#89ddff">:</span> app<span style="color:#c792ea">,</span>
data<span style="color:#89ddff">:</span> <span style="color:#c792ea">{</span>
message<span style="color:#89ddff">:</span> <span style="color:#c3e88d">'Hello, World!'</span>
<span style="color:#c792ea">}</span><span style="color:#c792ea">,</span>
<span style="color:#82aaff">created</span><span style="color:#89ddff">:</span> function<span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
<span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span>this<span style="color:#c792ea">.</span>message<span style="color:#c792ea">)</span><span style="color:#c792ea">;</span>
<span style="color:#c792ea">}</span><span style="color:#c792ea">}</span><span style="color:#c792ea">)</span><span style="color:#697098">// undefined</span></code></span></span>
箭头函数没有arguments对象
有时，您可能需要创建一个参数数量不定的函数。例如，假设您要创建一个函数，按偏好排序列出您最喜欢的 Netflix 连续剧。但是，您还不知道要包含多少个系列。JavaScript 使**arguments**对象可用。这是一个类似数组的对象（不是完整的数组），它存储调用时传递给函数的值。
尝试使用箭头函数
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">const <span style="color:#82aaff">listYourFavNetflixSeries</span> <span style="color:#89ddff">=</span> <span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#89ddff">=></span> <span style="color:#c792ea">{</span>
<span style="color:#697098">// we need to turn the arguments into a real array </span>
<span style="color:#697098">// so we can use .map()</span>
const favSeries <span style="color:#89ddff">=</span> <span style="color:#ffcb6b">Array</span><span style="color:#c792ea">.</span>from<span style="color:#c792ea">(</span>arguments<span style="color:#c792ea">)</span>
return favSeries<span style="color:#c792ea">.</span><span style="color:#82aaff">map</span><span style="color:#c792ea">(</span> <span style="color:#c792ea">(</span>series<span style="color:#c792ea">,</span> i<span style="color:#c792ea">)</span> <span style="color:#89ddff">=></span> <span style="color:#c792ea">{</span>
return <span style="color:#c3e88d">`</span><span style="color:#c792ea">${</span>series<span style="color:#c792ea">}</span><span style="color:#c3e88d"> is my #</span><span style="color:#c792ea">${</span>i <span style="color:#89ddff">+</span><span style="color:#f78c6c">1</span><span style="color:#c792ea">}</span><span style="color:#c3e88d"> favorite Netflix series</span><span style="color:#c3e88d">`</span>
<span style="color:#c792ea">}</span> <span style="color:#c792ea">)</span>
<span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span>arguments<span style="color:#c792ea">)</span><span style="color:#c792ea">}</span><span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span><span style="color:#82aaff">listYourFavNetflixSeries</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">'Bridgerton'</span><span style="color:#c792ea">,</span> <span style="color:#c3e88d">'Ozark'</span><span style="color:#c792ea">,</span> <span style="color:#c3e88d">'After Life'</span><span style="color:#c792ea">)</span><span style="color:#c792ea">)</span> </code></span></span>
当您调用该函数时，您将收到以下错误消息：Uncaught ReferenceError: arguments is not defined. 这意味着该arguments对象在箭头函数中不可用。事实上，用常规函数替换箭头函数就可以了：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">const <span style="color:#82aaff">listYourFavNetflixSeries</span> <span style="color:#89ddff">=</span> function<span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
const favSeries <span style="color:#89ddff">=</span> <span style="color:#ffcb6b">Array</span><span style="color:#c792ea">.</span>from<span style="color:#c792ea">(</span>arguments<span style="color:#c792ea">)</span>
return favSeries<span style="color:#c792ea">.</span><span style="color:#82aaff">map</span><span style="color:#c792ea">(</span> <span style="color:#c792ea">(</span>series<span style="color:#c792ea">,</span> i<span style="color:#c792ea">)</span> <span style="color:#89ddff">=></span> <span style="color:#c792ea">{</span>
return <span style="color:#c3e88d">`</span><span style="color:#c792ea">${</span>series<span style="color:#c792ea">}</span><span style="color:#c3e88d"> is my #</span><span style="color:#c792ea">${</span>i <span style="color:#89ddff">+</span><span style="color:#f78c6c">1</span><span style="color:#c792ea">}</span><span style="color:#c3e88d"> favorite Netflix series</span><span style="color:#c3e88d">`</span>
<span style="color:#c792ea">}</span> <span style="color:#c792ea">)</span>
<span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span>arguments<span style="color:#c792ea">)</span>
<span style="color:#c792ea">}</span><span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span><span style="color:#82aaff">listYourFavNetflixSeries</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">'Bridgerton'</span><span style="color:#c792ea">,</span> <span style="color:#c3e88d">'Ozark'</span><span style="color:#c792ea">,</span> <span style="color:#c3e88d">'After Life'</span><span style="color:#c792ea">)</span><span style="color:#c792ea">)</span><span style="color:#697098">// output: </span><span style="color:#c792ea">[</span><span style="color:#c3e88d">"Bridgerton is my #1 favorite Netflix series"</span><span style="color:#c792ea">,</span> <span style="color:#c3e88d">"Ozark is my #2 favorite Netflix series"</span><span style="color:#c792ea">,</span> <span style="color:#c3e88d">"After Life is my #3 favorite Netflix series"</span><span style="color:#c792ea">]</span></code></span></span>
因此，如果您需要该arguments对象，则不能使用箭头功能。
但是，如果您真的想使用箭头函数来复制相同的功能怎么办？您可以做的一件事是使用ES6 剩余参数( ...)。以下是重写函数的方法：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">const <span style="color:#82aaff">listYourFavNetflixSeries</span> <span style="color:#89ddff">=</span> <span style="color:#c792ea">(</span><span style="color:#89ddff">...</span>seriesList<span style="color:#c792ea">)</span> <span style="color:#89ddff">=></span> <span style="color:#c792ea">{</span>
return seriesList<span style="color:#c792ea">.</span><span style="color:#82aaff">map</span><span style="color:#c792ea">(</span> <span style="color:#c792ea">(</span>series<span style="color:#c792ea">,</span> i<span style="color:#c792ea">)</span> <span style="color:#89ddff">=></span> <span style="color:#c792ea">{</span>
return <span style="color:#c3e88d">`</span><span style="color:#c792ea">${</span>series<span style="color:#c792ea">}</span><span style="color:#c3e88d"> is my #</span><span style="color:#c792ea">${</span>i <span style="color:#89ddff">+</span><span style="color:#f78c6c">1</span><span style="color:#c792ea">}</span><span style="color:#c3e88d"> favorite Netflix series</span><span style="color:#c3e88d">`</span>
<span style="color:#c792ea">}</span> <span style="color:#c792ea">)</span>
<span style="color:#c792ea">}</span></code></span></span>
结论
通过使用箭头函数，您可以编写带有隐式返回的简洁单行语句，并且最终忘记旧时的技巧来解决thisJavaScript 中关键字的绑定问题。箭头函数也适用于数组方法，如.map(), .sort(), .forEach(),.filter()和.reduce()。但请记住：箭头函数不会取代常规的 JavaScript 函数。请记住，仅当它们是适合工作的工具时才使用 JavaScript 箭头函数。
\
