React.js组件传递函数：bind绑定与非绑定场景下的this指向疑问

问题结论 #

这个现象是JavaScript本身的this指向规则导致的，和React框架设计无关。

各点击事件的逻辑说明 #

• 为什么handleClickOne触发时报错
  你直接将普通类方法handleClickOne作为回调传给onClick时，相当于把方法从组件实例上单独抽离了出来，事件触发时方法的执行上下文已经脱离了组件实例：严格模式下this为undefined，非严格模式下指向全局window对象，自然访问不到挂载在组件实例上的name属性。你提到的this指向函数自身的猜测是错误的。

• 为什么handleClickTwo可以正常运行
  你在构造函数中执行了this.handleClickTwo = this.handleClickOne.bind(this)，bind是JS函数原型上的原生方法，调用后会返回一个全新的绑定函数，这个新函数的this会被永久固定为你调用bind时传入的第一个参数（也就是当前的组件实例），后续无论以什么方式调用这个绑定函数，this都不会再改变，因此可以正常访问到this.name。

• 补充说明handleClickThree的运行逻辑
  你用类字段语法定义的箭头函数本身不存在独立的this，它的this会继承自外层词法作用域的this，也就是类实例的构造上下文，所以不需要额外做绑定也能正常访问组件实例属性。

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