如何使用箭头函数替代递归setTimeout代码中多处的.bind(this)写法

改写后的完整代码 #

利用箭头函数继承外层上下文this的特性，去掉所有.bind(this)后的最简实现如下：

const tick = () => {
  this.oneIteration(this.eventsQueue[counter], counter)
  counter++
  if (counter === this.eventsQueue.length) {
    // 原代码存在拼写错误：iteartion 应为 iteration
    clearInterval(this.iteartionInterval)
    this.stopBtnClick()
    return
  }
  timerId = setTimeout(tick, this.timeoutDelay)
}
let timerId = setTimeout(tick, 100)

实现逻辑说明 #

• 箭头函数不会生成自己的this指向，会直接捕获定义时所在外层作用域的this作为自身的this，且该指向不会被后续调用方式改变，刚好可以替代手动bind(this)的操作
• 我们将tick直接定义为外层作用域的箭头函数，它的this和你原来代码中两次bind的目标完全一致，所以首次调用、递归调用时都不需要再绑定this，直接传入函数名即可
• 额外注意：原代码中定时器ID的拼写iteartionInterval多了一个字母e，建议修正为iterationInterval，避免后续调用clearInterval失效

内容的提问来源于stack exchange，提问作者king_potato