JavaScript 没有 fat-arrow 函数的 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

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

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

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

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

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

您也可以使用bind

JavaScript 没有 fat-arrow 函数的 React setInterval

JavaScript React setInterval WITHOUT fat-arrow function

javascript

reactjs

function

setinterval

arrow-functions