使用 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中文网其他相关文章！