理解：为何React事件处理中要绑定this

题外话

---

笔者刚换了家公司，公司用React框架，因此须要学习。目前大部分普通程序员身上所反映出来的通病就是，公司须要什么，就很快的去学习什么，对于知识的把握与理解程度，仅限于囫囵吞枣，固然更多的是项目紧赶时间，碰到问题，能百度就毫不去想（PS：哪有时间去想那么多为何，赶快搞完下班）。因此虽然市面上不少程序员，但能力良莠不齐，广泛质量不高。有能力的天然是大厂、高薪资、好待遇，那能力是怎样提高的，天然是累积的。笔者但愿本身能在麻木的工做中保留那么一丝思考问题的能力。

说明

---

笔者写的东西都很基础，但愿见微知著。写博客更多的是给本身看的，巩固加深本身对问题的理解。固然初期能力不足，对于问题的理解片面或有错误，你们发现望及时提醒指出，感激涕零。

言归正传

---

问题见于此（官网事件处理）：

思考：为何要改变this指向？
答：zz啊，人家不是都说了，为了在回调中使用this。

我的理解

---

上图定义了一个Toggle组件类，在使用 ReactDom.render() 方法将其渲染到界面上时，会生成组件实例，比如操做 new Toggle() 生成实例,那么显而易见，this最终指向新生成的实例。

上图 this 为实例，能够拿到 handleClick方法，而因为 React 中 { } 解析的特殊性，这里想象成直接放了函数在这里，不要自觉得的是实例调用这个方法，因此在这里致使的 this 丢失，指向了 undefined。 生成实例的过程当中，构造器函数 constructor() 必执行。当执行到下面语句时，分析代码： this.handleClick = this.handleClick.bind(this); 赋值语句右侧， this.handleClick 执行，首先在当前实例上查找 handleClick 方法，当前实例没有，而后沿原型链向上查找到原型方法 handleClick ，再执行 bind(this) ，将原型方法中的 this 指向新生成的实例

这也就理解了上面答案，为了在回调中使用 this 。若是不绑定 this ，此处的 this 是 undefined 。 这就完事了？并无。
注意此时的 handleClick 方法已经由原型方法变为了实例方法，仔细体味赋值语句。
深刻思考： 为何要将原型方法转变为实例方法？
我的看法： ES6的继承，本质就是ES5的组合式继承，构造函数+原型链技术，也称伪经典继承。原型方法即在原型上定义的方法，目的是实现方法的复用。我如今变为实例方法，岂不是每一个实例都有这个方法，失去了复用性？无可厚非，必须这么作，每一个实例都有本身的 state 状态，我须要修改每一个实例当前的 state 状态，每一个实例的状态（/数据）具备密封性，经过自身的实例方法去修改，这也体现了面向对象思想的封装性。

对于事件处理另外两种方式的理解

其实理解了上述所说，这两种方式就很好理解。
第一种方式:

class LoggingButton extends React.Component {
  // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 注意: 这是 *实验性* 语法。
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}> Click me </button>
    );
  }
}
复制代码

理解：这是实例属性的新写法，至关于在构造函数内部声明了一个 handleClick 属性，采用箭头函数的目的是，在进行 new 操做后，让 this 指向当前实例，再也不改变。与绑定this的思想是同样的，每一个实例上都会有此方法。
第二种方式：

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      <button onClick={() => this.handleClick()}> Click me </button>
    );
  }
}
复制代码

理解： 在 render() 函数中，{ } 里面就放的函数，这里不会再进行解析，执行时 this 即为组件实例，利用箭头函数自身没有 this 的特性， this 指向组件实例且再也不改变，再去调用 handleClick() 方法，根据谁调用 this ， this 指向谁的原则，可知 handleClick() 函数内部的 this 是指向当前组件实例的。

结语

---

以上探讨的，说白了，就是 this 指向的问题，并不能算React的问题，固然 this 这也是一个老生常谈的话题。我的对此理解也不是很透彻，但愿在看了《你不知道的Javascript》上卷第二部分后有一个深层次的理解，我的也推荐你们看这本书。