没有胖箭头功能的 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