如何在 JavaScript 的 `setInterval()` 中保留 `this` 上下文？

在 JavaScript 的 setInterval 处理程序中保留 'this' 引用

使用 JavaScript 的 setInterval() 函数时，经常会遇到“this”问题。当您需要从间隔处理函数内访问对象的属性或方法时，就会发生这种情况。

考虑以下代码：

prefs: null,
startup: function() {
  // init prefs
  ...
  this.retrieve_rate();
  this.intervalID = setInterval(this.retrieve_rate, this.INTERVAL);
},

retrieve_rate: function() {
  var ajax = null;
  ajax = new XMLHttpRequest();
  ajax.open('GET', 'http://xyz.example', true);
  ajax.onload = function() {
    // access prefs here
  }
}

在此示例中，我们要访问 prefs 属性来自 ajax.onload 处理程序函数。但是，这不会按预期工作，因为 this 引用在间隔处理程序中丢失。

要解决此问题，您可以使用 bind() 方法创建一个绑定 this 引用的新函数。方法如下：

this.intervalID = setInterval(this.retrieve_rate.bind(this), this.INTERVAL);

通过使用bind()，我们创建一个新函数，将其this引用绑定到原始对象(this)。这可确保在 ajax.onload 处理程序中正确引用 prefs 属性。

以上是如何在 JavaScript 的 `setInterval()` 中保留 `this` 上下文？的详细内容。更多信息请关注PHP中文网其他相关文章！