< p >讓我們探討一下 JavaScript 忍者秘籍這本書的第 5.9 篇章吧。這一節主要討論了使用箭頭函數（Arrow Function）時， this 關鍵字被如何處理的問題，以及如何根據需要來綁定 this 到特定的對象上，從而解決上述問題。< p >箭頭函數是 ES6 中引入的新語法糖，提供了更為簡潔的函數書寫方式：(x) =>x * x。但是，箭頭函數中的 this 關鍵字和普通函數的行為略有不同。在箭頭函數中，this 關鍵字被綁定到該箭頭函數所在的詞法作用域上，簡而言之，它會默認指向外層父級的 this 值。< pre >const obj = { name: 'innerObj', log: function() { [1, 2, 3].forEach(num =>{ console.log(this.name, num); }); } } const outerObj = { name: 'outerObj', innerObj: obj } outerObj.innerObj.log();< /pre >輸出結果為：< pre >outerObj 1 outerObj 2 outerObj 3< /pre >< p >當 innerObj.log() 被調用時，箭頭函數內的 this 關鍵字指向的是調用 log() 方法的 outerObj。這是因為箭頭函數是在 outerObj 的詞法作用域下聲明的，故它繼承了 outerObj 類型的 this 值。如果我們嘗試使用 apply 或 call 方法更改 this 指向的話，實際上不會起到任何作用。< p >例如，如果我們使用 call 方法將 this 指向 obj 對象，則會得到如下輸出結果：< pre >outerObj 1 outerObj 2 outerObj 3< /pre >這說明函數體內的箭頭函數仍然會繼承外部普通函數的 this 值。< p >為了解決上述問題，我們需要使用 bind 方法。例如，我們可以這樣更改代碼：< pre >const obj = { name: 'innerObj', log: function() { [1, 2, 3].forEach(function(num) { console.log(this.name, num); }.bind(this)); } } const outerObj = { name: 'outerObj', innerObj: obj } outerObj.innerObj.log();< /pre >此時輸出結果為：< pre >innerObj 1 innerObj 2 innerObj 3< /pre >< p >在代碼中，bind(this) 的作用是將 forEach 中的函數綁定到 outerObj 上，即將 outerObj 的 this 值傳遞給內部函數使用。這樣我們就達到了目的，最終得到了預期的 innerObj 結果。< p >在使用 JavaScript 開發過程中，箭頭函數成為了大家的喜愛，它提供了一種類似于 Ruby 和 Python 的 lambda 表達式的寫法。但它的 this 行為略有不同，開發者要善于使用 bind 或 apply 方法來處理 this 值的問題，從而使得代碼的可讀性和可維護性得到進一步提高。