Question

假设我有一个函数a：

function a() {
    this.b = 1;
    this.set = setInterval(function() {console.log(this.b);}, 200);
}

因此，当调用a.set（）时，将调用匿名函数。但是当这个函数被触发指向窗口对象时，这不会起作用。使用a.b也不是一个好主意，因为可能有多个实例。

这个问题的解决方案是什么？

Answer 1

存储对this的引用：

function a() {
    var self = this;
    self.b = 1;
    self.set = setInterval(function() {console.log(self.b);}, 200);
}

您传递给setInterval的匿名函数可以访问其包含范围内的任何变量，即function a()的任何局部变量。即使在a()完成之后，JS闭包的神奇之处仍然使这些变量保持活跃，并且a()的每次调用都有自己的闭包。

Answer 2

这将是最干净的解决方案，因为大多数时候您实际上想要为连续的方法调用切换此上下文：

    // store scope reference for our delegating method
    var that = this;
    setInterval(function() {
        // this would be changed here because of method scope, 
        // but we still have a reference to that
        OURMETHODNAME.call(that);
    }, 200);

Answer 3

由于我们现在有ES6，我认为我们需要另一个答案：

使用箭头功能：

function a() {
  this.b = 1;
  this.set = setInterval(() => {console.log(this.b);}, 200);
}

与普通函数相反的箭头函数本身没有this上下文。这意味着您可以访问外部this。

Answer 4

只需将this引用保存在其他变量中，但window不会覆盖该变量 - 稍后再调用。稍后您可以使用该变量来引用您开始使用的对象。

function a() {
    this.b = 1;
    var that = this;
    this.set = setInterval(function() {console.log(that.b);}, 200);
}

Answer 5

在您的情况下，您可以简单地：

function a() {
    var _this = this;
    this.b = 1;
    this.set = setInterval(function () {
      console.log(_this.b);
    }, 200);
}

通常情况下，我们还可以使用辅助方法Function.prototype.bind来修复 this引用。

Answer 6

这个问题太老了，但是我不喜欢这里的解决方案，因为这种想法主要是关于将实例附加到 public 上的。

这是另一个可行的想法：

问题在于，从间隔作为回调进行调用时，作用域不在this内。但是，您可以通过定义一个Function变量来强制使用它。

function a() {
  var localCallback: () => {
    // access `this` as you will
    console.log(this);
  };
  this.timer = setInterval( localCallback, this.saveInterval );
}

希望这会有所帮助！

如何将“this”传递给window setInterval

6 个答案: