React基础12 React中的this绑定

已同步到个人博客，欢迎访问。

为什么要bind(this)

React的Class组件中常常会用到bind(this)来绑定this，但是究竟为什么要这么做呢？难道Class中的方法拿不到实例的this吗？

来试验一下：

class Person {
  constructor(name) {
    this.name = name;
  }
  say() {
    console.log('my name is ' + this.name);
  }
}

上面代码的Person类中，say方法去获取了this，然后当我们实例化一个对象时，并调用say()方法时，结果是：

let p1 = new Person('Jay');
p1.say();
// my name is Jay

结果说明在Class的方法中，是可以直接通过this获得实例对象的。所以实际上在React的Class中直接使用this是没有问题的，例如在生命周期函数或者render中。但是在render函数中的JSX模板中的事件处理函数，这里面的调用的方法的this就不会指向组件实例：

export default class Demo5 extends Component {
  handleClick() {
    console.log(this);
  }

  render() {
    return (
      <div onClick={this.handleClick}>
        Hello
      </div>
    );
  }
}

上面的handleClick函数作为JSX中的事件处理函数，其中的this不会指向组件实例，而是指向了事件响应的上下文环境（非严格环境下是window，严格环境下是undefined），而类声明和类表达式的主体以严格模式执行（主要包括构造函数、静态方法和原型方法以及getter和setter函数），所以this指向undefined

为什么this不能指向组件实例

实际上这与React和JSX语法没有关系，是JavaScript的this绑定