React构造函数中显式绑定this无效，为何与箭头函数效果不同？

嘿，我来帮你搞清楚这个困惑～你遇到的问题其实是对bind()方法的特性理解有点小偏差，咱们一步步拆解：

核心原因：bind()不会修改原函数，而是返回新函数 #

你在构造函数里写了this.someMethod.bind(this)，但这个操作只是生成了一个绑定了当前实例this的新函数，却没有把这个新函数赋值回this.someMethod。原来的someMethod还是那个未绑定的普通类方法，所以当你调用它时，this自然会变成undefined（React组件默认运行在严格模式下，普通函数调用的this会是undefined）。

正确的构造函数绑定写法 #

把bind后的函数重新赋值给实例的属性就行：

class abc extends Component {
  constructor (props) {
    super(props);
    this.state = {};
    // 关键：把bind返回的新函数赋值给this.someMethod
    this.someMethod = this.someMethod.bind(this);
  }
  someMethod () {
    console.log(this); // 现在this会正确指向组件实例啦
  }
}

对比箭头函数类方法的绑定逻辑 #

你用箭头函数定义的someMethod = () => {}，属于类字段语法。箭头函数本身没有自己的this，它会捕获定义时所在上下文的this（也就是当前组件实例），所以不需要额外绑定，直接就能正确指向实例。

这两种写法最终效果确实是一致的，但实现逻辑有区别：

• 箭头函数类字段：在类实例化时就完成了this绑定，写法更简洁。
• 构造函数bind：手动生成绑定后的函数并赋值，适合需要提前绑定参数的场景（比如this.someMethod = this.someMethod.bind(this, 'fixedParam')，调用时就能直接拿到预设参数）。

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