React組件方法中爲何要綁定this

若是你嘗試使用過React進行前端開發，必定見過下面這樣的代碼：

//假想定義一個ToggleButton開關組件
class ToggleButton extends React.Component{
    constructor(props){
        super(props);
        this.state = {isToggleOn: true};
        this.handleClick = this.handleClick.bind(this); 
        this.handleChange = this.handleChange.bind(this);
    }
    handleClick(){
        this.setState(prevState => ({
            isToggleOn: !preveState.isToggleOn
        }));
    }
    handleChange(){
        console.log(this.state.isToggleOn);
    }
    render(){
        return(
           <button onClick={this.handleClick} onChange={this.handleChange}>
                {this.state.isToggleOn ? 'ON':'OFF'}
            </button>
        )
    }
}

構造方法中爲何要給全部的實例方法綁定this呢？

1. 代碼執行的細節

上例僅僅是一個組件類的定義，當在其餘組件中調用或是使用ReactDOM.render( )方法將其渲染到界面上時會生成一個組件的實例，由於組件是能夠複用的，面向對象的編程方式很是適合它的定位。根據this指向的基本規則就能夠知道，這裏的this最終會指向組件的實例。

組件實例生成的時候，構造器constructor會被執行，此處着重分析一下下面這行代碼：

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

此時的this指向新生成的實例，那麼賦值語句右側的表達式先查找this.handleClick( )這個方法，由對象的屬性查找機制（沿原型鏈由近及遠查找）可知此處會查找到原型方法this.handleClick( ),接着執行bind(this)，此處的this指向新生成的實例，因此賦值語句右側的表達式計算完成後，會生成一個指定了this的新方法，接着執行賦值操做，將新生成的函數賦值給實例的handleClick屬性，由對象的賦值機制可知，此處的handleClick會直接做爲實例屬性生成。總結一下，上面的語句作了一件這樣的事情：

把原型方法handleClick( )改變爲實例方法handleClick( ),而且強制指定這個方法中的this指向當前的實例。

2. ES5的寫法中爲何不用bind(this)?

ES5的寫法是指使用React.createClass( )方法來定義組件，React在V16以上的新版本中已經移除了這個API，你能夠經過閱讀更早版本的源代碼看到這個方法的細節。

//舊版本`react`中`createClass`方法片斷
  if (this.__reactAutoBindMap) {
        this._bindAutoBindMethods();
  }

在老版本的React中，createClass()的定義中能夠看到上面的代碼，拋開其餘複雜的邏輯，從方法名就能夠看出這是一個自動綁定的方法，實際上在這個方法中所完成的，就是對組件中自定義方法的this強制綁定，感興趣的讀者能夠自行翻看源碼瞭解細節。

3. 綁定this的必要性

在組件上綁定事件監聽器，是爲了響應用戶的交互動做，特定的交互動做觸發事件時，監聽函數中每每都須要操做組件某個狀態的值，進而對用戶的點擊行爲提供響應反饋，對開發者來講，這個函數觸發的時候，就須要可以拿到這個組件專屬的狀態合集（例如在上面的開關組件ToggleButton例子中，它的內部狀態屬性state.isToggleOn的值就標記了這個按鈕應該顯示ON或者OFF），因此此處強制綁定監聽器函數的this指向當前實例的也很容易理解。

React構造方法中的bind會將響應函數與這個組件Component進行綁定以確保在這個處理函數中使用this時能夠時刻指向這一組件的實例。

4. 若是不綁定this

若是類定義中沒有綁定this的指向,當用戶的點擊動做觸發this.handleClick( )這個方法時，實際上執行的是原型方法，可這樣看起來並無什麼影響，若是當前組件的構造器中初始化了state這個屬性，那麼原型方法執行時，this.state會直接獲取實例的state屬性，若是構造其中沒有初始化state這個屬性（好比React中的UI組件），說明組件沒有自身狀態，此時即便調用原型方法彷佛也沒什麼影響。

事實上的確是這樣，這裏的bind(this)所但願提早規避的，就是著名的this指針丟失的問題。

例如使用解構賦值的方式獲取某個屬性方法時，就會形成引用轉換丟失this的問題:

const toggleButton = new ToggleButton();

import {handleClick} = toggleButton;

上例中解構賦值獲取到的handleClick這個方法在執行時就會報錯，Class的內部是強制運行在嚴格模式下的，此處的this在賦值中丟失了原有的指向，在運行時指向了undefined，而undefined是沒有屬性的。

另外一個存在的限制，是沒有綁定this的響應函數在異步運行時可能會出問題，當它做爲回調函數被傳入一個異步執行的方法時，一樣會由於丟失了this的指向而引起錯誤。

若是沒有強制指定組件實例方法的this，在未來的使用中就沒法安心使用引用轉換或做爲回調函數傳遞這樣的方式，對於後續使用和協做開發而言都是不方便的。

5. 小結

this的使用很是靈活，但這種靈活性也帶來了不少混亂。這裏的bind(this)是爲了改進javascript語言級的缺陷，並非只有React中才須要這樣作，這個問題是伴隨着面向對象編程而產生的，在使用javascript進行插件和框架的開發時，這個問題的影響會更加明顯。之因此說它是一個語言級的缺陷，是由於Java中對於this在一樣場景下的指向更符合正常思惟邏輯，而javascript中若是不顯示綁定，就會出現語言運行結果和方法的命名錶意不一致的狀況。

關於this更詳盡的分析，能夠參考筆者的博文《javascript基礎修煉系列-What's this》上下篇(連接地址)。

參考

[1]《ES6-Class基本語法》http://www.javashuo.com/article/p-qcbunqul-k.html