this.handleClick = this.handleClick.bind(this)不懂

Question

this.handleClick = this.handleClick.bind(this)

Answer 1

函数的this指向是在进入执行上下文的时候才确定的，它并不是静态绑定的。

var x = 1;
var obj = {
  x: 2,
  getValue: function() {
    return this.x
  }
}
var fn = obj.getValue
fn() // 1
obj.getValue() // 2

但是使用bind,可以返回一个新的函数，当这个函数调用的时候this指向的是传入值，例如把上一段代码稍加修改。

var fn = obj.getValue.bind(obj)
fn() // 2

在react中这样写，是为了让子组件在调用这个函数的时候this是指向父组件的。

Answer 2

默认React是有this自动绑定的，当然限于使用React.createClass创建的类组件，其他使用ES6类语法并不会绑定this环境，所以需要手动绑定this环境；了解跟多React中this问题可以参考React组件中的this，希望对你有所帮助。

Answer 3

其实这个问题在react的官方文档那里写的很清楚。这样写的目的是确保handleclick里面的this指向的是当前这个类。那为什么要这样做呢？那是因为this是在哪调用就指向哪的，你把那个函数当做props传给了子组件，执行就不是发生在当前类了

Answer 4

React 默认只给 render 方法绑定了 this, 其他自定义的方法都需要自己手动绑定 this 的

首先你要知道在一个 React 组件中 this 指的是什么?

• this 是指的当前组件的实例, 如果你在方法中的 this 指向不对的话, 那么当前组件里面的state, props你都无法使用的
• 你可以在 constructor 内初始化的时候就给自定义的方法绑定 this 指向当前实例
• 也可以在绑定事件的时候绑定 this 的值, 比如 <div onClick="this.handlerClick.bind(this)"></div>
• 再或者使用箭头函数定义方法, 因为箭头函数是不绑定 this 的, 所以会向上查找 this 就会找到组件实例进行使用
• 再或者使用 es7的 :: (我没用过, 就不说了)

总之建议你再学习下 bind, call, apply, react的 this 使用等知识