没有胖箭头功能的 JavaScript React setInterval

Question

我开始使用 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)

}

感谢您的时间

Answer 1

箭头函数自动绑定父作用域的上下文。但regular function默认情况下不这样做。为了更改常规函数的上下文，您可以使用bind下面示例中的方法。this.timer = window.setInterval(function() {     this.setState({ date: new Date() }) }.bind(this), 1000)

Answer 2

这不完全是因为 newthis是为常规函数创建的（顺便说一句，不要混淆上下文和this），常规函数的规则this是：在构造函数的情况下是一个新对象undefined in functions call in strict mode如果函数作为方法调用，则为当前对象你的情况是第三种，但诀窍是当使用setIntervalor时setTimeout，回调函数作为方法调用，但在全局范围内（this== window）。经典的方法是保存this在一个变量中。因为该函数可以访问创建它的上下文，所以它会记住这个变量：var self = this;this.timer = window.setInterval(function() {    self.setState({ date: new Date() })}, 1000)您也可以使用bind