理解：爲何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》上卷第二部分後有一個深層次的理解，我的也推薦你們看這本書。