JavaScript React setInterval不带fat arrow函数

我开始React，我发现我可以在setInterval（）中使用胖箭头函数设置时钟：

但我并没有通过常规函数（见下文）获得相同的结果。我认为它与“this”关键字有关，在常规函数中创建新上下文？我不知道如何解决这个问题：

componentDidMount() {
    this.timer = window.setInterval(function() {
        this.setState({ date: new Date() })
    }, 1000)
}

---

感谢您抽出时间

箭头函数会自动绑定父作用域的上下文。但是

常规函数

默认情况下不会这样做。为了更改常规函数的上下文，您可以使用

bind

方法，如下例所示

this.timer = window.setInterval(function() {
    this.setState({ date: new Date() })
}.bind(this), 1000)

---

箭头函数自动绑定父作用域的上下文。但是

常规函数

默认情况下不会这样做。为了更改常规函数的上下文，您可以使用

bind

方法，如下例所示

this.timer = window.setInterval(function() {
    this.setState({ date: new Date() })
}.bind(this), 1000)

---

这并不完全是因为为常规函数创建了一个新的

This

（顺便说一句，不要混淆上下文和

This

），常规函数和

This

的规则是：

• 构造函数中的新对象
• 在严格模式下调用函数中未定义
• 如果函数作为方法调用，则为当前对象

您的情况是第三种，但诀窍是当使用

setInterval

或

setTimeout

时，回调函数作为一种方法调用，但在全局范围内（

this

=

窗口

）

经典的方法是将

这个
保存在变量中。因为函数可以访问创建它的上下文，所以它将记住以下变量：

var self = this;
this.timer = window.setInterval(function() {
    self.setState({ date: new Date() })
}, 1000)

您也可以使用
bind
这并不完全是因为新的
This
是为常规函数创建的（顺便说一句，不要混淆上下文和
This
），常规函数和
This
的规则是：


构造函数中的新对象
在严格模式下调用函数中未定义
如果函数作为方法调用，则为当前对象

您的情况是第三种，但诀窍是当使用
setInterval
或
setTimeout
时，回调函数作为一种方法调用，但在全局范围内（
this
=
窗口
）

经典的方法是将
这个
保存在变量中。因为函数可以访问创建它的上下文，所以它将记住以下变量：

var self = this;
this.timer = window.setInterval(function() {
    self.setState({ date: new Date() })
}, 1000)

您也可以使用
bind