使用 setInterval 和 setTimeout 處理原型方法中的「this」引用：解決方案是什麼？

使用setInterval 和setTimeout 處理原型方法中的this 引用

在JavaScript 中，原型方法在提取並傳遞到其他地方時會失去this 關聯。考慮以下程式碼：

function Foo() {}
Foo.prototype = {
  bar: function () {
    this.baz();
  },
  baz: function () {
    this.draw();
    requestAnimFrame(this.baz);
  }
};

此程式碼失敗並出現錯誤，因為它未正確綁定在 setInterval 或 setTimeout 回呼內。

解：

有幾種方法可以處理這個問題：

將方法呼叫包裝在匿名函數中：

var that = this;
setInterval(function () {
  return that.baz();
}, 1000);

這可以使用外部函數保留this輔助變數。

將方法呼叫包裝在胖箭頭函數中：

setInterval(() => this.baz(), 1000);

胖箭頭匿名函數維護周圍函數的 this。

使用綁定函數：

setInterval(this.baz.bind(this), 1000);

// dojo toolkit example:
setInterval(dojo.hitch(this, 'baz'), 10);

諸如Function.prototype.bind 之類的綁定函數或等效庫允許您明確綁定this 上下文。

以上是使用 setInterval 和 setTimeout 處理原型方法中的「this」引用：解決方案是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！