JavaScript React setInterval 没有粗箭头函数答案

【问题标题】：JavaScript React setInterval WITHOUT fat-arrow functionJavaScript React setInterval 没有粗箭头函数
【发布时间】：2021-02-09 18:02:25
【问题描述】：

我正在启动 React，我发现我可以使用 setInterval() 中的粗箭头函数设置时钟：

class Clock extends React.Component {
    constructor(props) {
        super(props)
        this.state = { date: new Date() }
        this.timer = null
    }

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

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

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

感谢您的宝贵时间

【问题讨论】：

标签： javascript reactjs function setinterval arrow-functions

【解决方案1】：

这并不完全是因为为常规函数创建了一个新的this（顺便说一句，不要混淆上下文和this），常规函数和this 的规则是：

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

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

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

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

你也可以使用bind

【讨论】：

【解决方案2】：

箭头函数自动绑定父范围的上下文。但是regular function 不会默认这样做。为了改变常规函数的上下文，您可以使用bind 方法，如下例所示。

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

【讨论】：