共计 26969 个字符，预计需要花费 68 分钟才能阅读完成。
【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 箭头函数。
\
正文完