箭頭函數的優點很多，相比于常規函數，箭頭函數的代碼更少更簡潔了，并且沒有自己的this，這意味著箭頭函數不用再需要定義this。

 
不能使用箭頭函數的6種情況

但是箭頭函數不是在所有情況下都能取代常規函數。

這里有一些你不應該看箭頭函數的情況。

1、對象方法

var cat = {
  lives: 9,
  jumps: () => {
    this.lives--;
  }
}

當你調用cat.jumps時，lives的數量不會減少。這是因為this沒有綁定到任何東西，并且會從其父作用域繼承this的值。

我們再看下面一個示例。

const counter = {
  count: 0,
  next: () => ++this.count,
  current: () => this.count
};

該counter對象有兩種方法：current()和next()。該current()方法返回當前計數器值，該next()方法返回下一個計數器值。

下面顯示了下一個計數器值，它應該是 1：

console.log(counter.next());

但是，它返回NaN。

原因是當你在對象內部使用箭頭函數時，它會this從封閉的詞法范圍繼承值，即本例中的全局范圍。

this.count里面的方法next()等價于window.count（在網絡瀏覽器中）。

默認情況下window.count是undefined，因為window對象沒有count屬性。該next()方法將undefined加1，結果NaN。

要解決此問題，可以使用常規函數作為對象字面量的方法，如下所示：

const counter = {
    count: 0,
    next() {
        return ++this.count;
    },
    current() {
        return this.count;
    }
};

現在，調用該next()方法將按預期返回一個：

console.log(counter.next()); // 1

2、具有動態上下文的回調函數

看看下面的這個事件處理程序：

var button = document.getElementById('press'); 
button.addEventListener('click', () => { 
  this.classList.toggle('on'); 
});

如果我們點擊按鈕，我們會得到一個 TypeError。這是因為this未綁定到按鈕，而是綁定到其父范圍。

3、原型方法

以下Counter使用prototype模式的對象：

function Counter() {
    this.count = 0;
}

Counter.prototype.next = () => {
    return this.count;
};

Counter.prototype.current = () => {
    return ++this.next;
}

這些next()和current()方法中的this值引用全局對象。由于你希望方法中的this值引用Counter對象，因此你需要使用常規函數：

function Counter() {
    this.count = 0;
}

Counter.prototype.next = function () {
    return this.count;
};

Counter.prototype.current = function () {
    return ++this.next;
}

4、事件處理程序

假設你有以下輸入文本字段：

<input type="text" name="username" id="username" placeholder="Enter a username">

并且你希望在用戶輸入用戶名時顯示問候消息。下面<div>顯示了將顯示問候消息的元素：

<div id="greeting"></div>

一旦用戶輸入他們的用戶名，你就可以捕獲輸入的當前值并將其更新為<div>元素：

const greeting = document.querySelector('#greeting');
const username = document.querySelector('#username');
username.addEventListener('keyup', () => {
  greeting.textContent = 'Hello ' + this.value;
});

但是，當你執行代碼時，無論你鍵入什么內容，你都會收到以下消息：

Hello undefined

這意味著this.value事件處理程序中的 總是返回undefined。

箭頭函數沒有自己的this值。它使用this封閉詞法范圍的值。在上面的例子中，this在箭頭函數里引用了全局對象。

在 Web 瀏覽器中，全局對象是window，該window對象沒有value屬性。因此，JavaScript 引擎將 value 屬性添加到window對象并將其值設置為undefined.

要解決此問題，你需要改用常規函數，將this值綁定到<input>觸發事件的元素。

username.addEventListener('keyup', function () {
    input.textContent = 'Hello ' + this.value;
});

5、承諾和承諾鏈

箭頭函數使代碼更清晰、更直觀的另一個地方是管理異步代碼。

Promise使管理異步代碼變得容易得多。但是，雖然使用 Promise ，仍然需要定義在異步代碼或調用完成后運行的函數。

這是箭頭函數的理想位置，特別是如果你的結果函數是有狀態的，引用對象中的某些內容。

缺點是確保你再次了解this如何工作。例子：

this.doSomethingAsync().then((result) => { this.storeResult(result); });

6、當它使你的代碼不那么可讀時

通過常規函數，人們知道會發生什么。使用箭頭函數，可能很難立即解讀你正在查看的內容。

總結

本文介紹了6種不應使用箭頭函數的情況。通過本文的介紹，你應該知道箭頭函數不是任何時候都可以取代常規函數。在編程中我們要選擇合適的方法，代碼簡潔不是編程的唯一需要。

相關文章

• [實例]演示區別箭頭函數和常規函數的this值
• 箭頭函數=>不能換行？大括號{}這種情況下可以不要
• 實例演示無參數、單參數、多參數的箭頭函數用法
• 實例詳解JS箭頭函數=>與傳統匿名函數處理this的不同方法

標簽: 箭頭函數