ES6 setInterval(() => foo(), 1000 与 setInterval(foo, 1000)

ES6 setInterval(() => foo(), 1000 vs setInterval(foo, 1000)

我正在努力学习 React,我正在学习本教程 https://reactjs.org/docs/state-and-lifecycle.html and in it an interval is set inside a react component class and the syntax used is setInterval(() => this.tick(), 1000) where tick is a method in the Clock component. My question is this: So this arrow function simply calls this.tick() when its called, and setInterval will call it, so what is the difference between just passing in this.tick without wrapping it in an arrow function like so setInterval(this.tick, 1000)? I thought there would be no difference, but removing the wrap in an arrow function and the clock doesn't work. Whats going on? Here is a link to a codepen demonstrating the issue https://codepen.io/anon/pen/aKNJGd?editors=0011(第 12 行)

听起来与 this works in Javascript 相关。使用箭头函数,您可以通过闭包作用域从 React 组件获取 this。没有箭头函数,被调用的 this.tick 有不同的(或没有)this.

在你的构造函数中添加它,它可以在没有箭头函数的情况下工作。

this.tick = this.tick.bind(this)