关于javascript:JavaScript飞鸟中的新圣箭头搭建函数盘口如何使用二开Fat-Concise微投语法下

微信飞鸟箭头搭建函数如何解决`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> thisconst 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> likesThank 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 箭头函数。

微信飞鸟箭头搭建函数如何解决this关键字