React中箭头函数与类函数指针的this绑定差异原因

这个问题本质是JavaScript中this绑定规则的典型体现，我给你一步步拆解清楚：

1. 直接传this.tick时this丢失的原因 #

当你写出setInterval(this.tick, 1000)时，你其实是把tick方法单独抽出来作为回调函数传递给setInterval。类的普通方法本身是没有绑定this的，它的this指向完全取决于调用它的方式：

• 如果你通过类实例直接调用this.tick()，this自然指向当前类的实例；
• 但当你把tick作为独立函数传递给setInterval后，setInterval会在全局作用域下调用这个函数（非严格模式下），此时this就会默认绑定到全局对象——浏览器环境里就是window。

这就是为什么你在tick里console.log(this)会打出window，自然也就找不到setState方法了。

2. 箭头函数解决问题的原理 #

箭头函数和普通函数最核心的区别之一就是不绑定自己的this：它会直接继承外层作用域的this值。

在你的componentDidMount方法里，这个方法本身是类的实例方法，它内部的this指向WarClock的实例。当你用() => this.tick()作为回调时，这个箭头函数的this就继承了componentDidMount里的this（也就是类实例）。当setInterval调用这个箭头函数时，箭头函数再调用this.tick()，此时tick里的this就自然指向类实例了，所以setState能正常工作，console.log(this)也会打出类实例。

额外补充：其他绑定this的方式 #

除了箭头函数，你还可以用这两种常见方式解决这个问题：

• 在构造函数中手动绑定this：

  constructor(props) {
    super(props)
    this.state={ dateNow:new Date(), name:'yakuza' }
    // 手动将tick方法的this绑定到当前实例
    this.tick = this.tick.bind(this)
  }
  

  这样之后，无论this.tick被怎么传递，它的this都会固定指向类实例。

• 使用类字段的箭头函数定义方法：

  class WarClock extends React.Component{
    state={ dateNow:new Date(), name:'yakuza' }
    // 用箭头函数定义方法，自动绑定this到实例
    tick = () => {
      console.log(this);
      this.setState({dateNow:new Date()})
    }
    // ... 其他生命周期方法
  }
  

  这种是ES6+的语法糖，本质和构造函数绑定逻辑一致，只是写法更简洁。

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