在前面的文章，我们说到使用ES6 extends React.Component 这种方式创建的组件，其中的的事件函数句柄不会自动绑定当前实例的 this，我们需要手动绑定 this。

而绑定this的方法主要有两种方法，每种方法又有两种表现形式：

使用 bind

ES5为所有的函数定义了一个原生的 bind() 方法，用户只需要传入特定的环境变量，当函数被调用时，就会在这个特定的环境中执行。使用 bind 绑定this有两种形式，分别是：

使用 bind 形式一：在构造函数内部绑定。

class Login extends React.Component {
  constructor() {
    super();

    this.clickLogin = this.clickLogin.bind(this);
  }
  
  clickLogin() {
    console.log(this); // Login
  }

  render() {
    return (
      <button onClick={this.clickLogin}>
        login
      </button>
    );
  }
}

使用 bind 形式二：在事件句柄里绑定。

class Login extends React.Component {
  
  clickLogin() {
    console.log(this); // Login
  }

  render() {
    return (
      <button onClick={this.clickLogin.bind(this)}>
        login
      </button>
    );
  }
}

基于 箭头函数

与普通函数不同，箭头函数本身没有this，它的this指向的是定义它时的上下文环境。所以，当我们创建组件，在其中定义一些事件函数时，它内部的this，就是组件实例。使用 箭头函数 绑定this有两种形式，分别是：

箭头函数形式一：在定义事件方法时使用箭头函数。

class Login extends React.Component {
  
  clickLogin = () => {
    console.log(this); // Login
  }

  render() {
    return (
      <button onClick={this.clickLogin}>
        login
      </button>
    );
  }
}

箭头函数形式二：在事件句柄中使用箭头函数。

class Login extends React.Component {

  clickLogin() {
    console.log(this); // Login
  }

  render() {
    return (
      <button onClick={(e) => this.clickLogin(e)}>
        login
      </button>
    );
  }
}

可以看到，使用 “在构造函数内部绑定” 或者 “在定义事件方法时使用箭头函数” 这两种形式的绑定明显好于 “事件句柄” 的两种形式。因为如果存在多个的事件句柄的话，需要多次调用。