Question

我的draw（）函数在调用this.circle（）之后停止执行。如果我直接调用draw（）方法，则效果很好。但是，如果我使用setInterval（this.draw，1000），则在调用this.circle（）时似乎返回正确。 circle（）也不执行。我在滥用setInterval吗？

function Ball() {
   this.start = function() {
       return setInterval(this.draw, 1000);
   }
   this.circle = function() {
       console.log('1');
   }
   this.draw = function() {
       console.log('2');       

       this.circle();
       console.log('3');
}

this.circle（）永远不会执行，并且console.long（'3'）（或之后的任何东西）都永远不会到达。

结果是console.long（'2'）每1秒重复打印一次

Answer 1

使用setInterval时，this指的是window。 window没有名为draw的函数，因此它将引发错误并停止执行。要解决此问题，您需要绑定this的值。

return setInterval(this.draw.bind(this), 1000);

Answer 2

“这个”不再是您想的那样，并且您失去了上下文，它不再像您希望的那样代表鲍尔。您可以像“ this.draw.bind（this）”那样绑定绘图函数，也可以使用“ const _this = this;”这样的行捕获“ this”，然后在函数中仅引用“ _this”以确保您总是访问正确的。

关于封闭的一些读物

https://javascript.info/closure

Answer 3

如@iagowp所述，this将在window调用您的方法时引用setInterval。相反，您可以通过使用ES6箭头函数来调用this.draw()来解决此问题。这样，您的this是指Ball对象，而不是称为this.draw()的函数。

请参见下面的工作示例：

function Ball() {
  this.start = function() {
    return setInterval(_ => this.draw(), 1000);
  }
  this.circle = function() {
    console.log('1');
  }
  
  this.draw = function() {
    console.log('2');

    this.circle();
    console.log('3');
  }
}

let b = new Ball();
b.start();

从setInterval调用的方法在中途停止执行

3 个答案: