使用setInterval

Question

当我们有tick函数

时

tick() {
    this.setState({
        date: new Date()
    });
}

我们为什么要使用像

这样的东西

componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
}

而不仅仅是

componentDidMount() {
    this.timerID = setInterval(this.tick, 1000);
}

我想当我尝试第二个变体时，我们遇到了一些闭包问题。但是，请你详细解释一下会发生什么。

您可以找到代码的其余部分here。

Answer 1

原因传递

setInterval(this.tick,1000)

表现得像：

 window.tick = this.tick;
setInterval(window.tick,1000);

所以这个里面的tick是窗口，它没有setState方法。

现在真正的答案：

在javascript中，在调用函数时确定上下文（又名 this ）。

 a.b() // b called with context a
 c.d(); // d called with context c
 e();// e called with the default (window) context

因为setInterval函数看起来像这样（实际上是用c写的，但那是另一回事）：

function setInterval(func, time, ...args){
  //await however
  func(...args);//context is window
}

您将始终通过setInterval松开上下文。解决方法是 .bind 或使用箭头函数，它们总是采用它们周围的上下文（因此它们没有任何东西可以松动;）