【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 箭頭函數。

\