ES6 setInterval(() => foo(), 1000 vs setInterval(foo, 1000) [重复]答案

【问题标题】：ES6 setInterval(() => foo(), 1000 vs setInterval(foo, 1000) [duplicate]ES6 setInterval(() => foo(), 1000 vs setInterval(foo, 1000) [重复]
【发布时间】：2018-11-14 10:44:42
【问题描述】：

我正在学习 React，我正在学习本教程 https://reactjs.org/docs/state-and-lifecycle.html 并在其中在 react 组件类中设置了一个间隔，使用的语法是 setInterval(() => this.tick(), 1000) 其中 tick 是 Clock 组件中的一个方法。我的问题是：所以这个箭头函数在被调用时只是调用this.tick()，而setInterval 会调用它，那么只传入this.tick 而不将它包装在像setInterval(this.tick, 1000) 这样的箭头函数中有什么区别？ ?我认为没有区别，但是删除箭头函数中的包装并且时钟不起作用。这是怎么回事？这是一个演示问题的代码笔链接https://codepen.io/anon/pen/aKNJGd?editors=0011（第 12 行）

【问题讨论】：

标签： javascript reactjs ecmascript-6 setinterval arrow-functions

【解决方案1】：

听起来与this works in Javascript 的方式有关。使用箭头函数，您可以通过闭包范围从 React 组件获得this。如果没有箭头函数，被调用的this.tick 将具有不同的（或没有）this。

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

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

【讨论】：