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基本文法》

https://www.cnblogs.com/ChenChunChang/p/8296350.html