React事件處理函數中綁定this的bind()函數

今天在看最新的React官方教程時發現了一個問題，開始全面使用ES6語法的React在Handling Events這節中，提到了綁定的事件處理函數要如今構造函數中使用bind()將this進行正確的綁定，涉及到的代碼以下：

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

 

以前就一直對bind()函數理解不夠深刻，這裏使用bind()的做用一開始不是很明白，就在網上查閱了資料，在MDN技術文檔中找到了這一函數的具體做用以下： 
bind()方法會建立一個新函數，當這個新函數被調用時，它的this值是傳遞給bind()的第一個參數, 它的參數是bind()的其餘參數和其本來的參數. 
以後在後面的一個例子很好的解釋了React這裏使用bind的做用：

建立綁定函數 
bind() 最簡單的用法是建立一個函數，使這個函數不論怎麼調用都有一樣的 this 值。JavaScript新手常常犯的一個錯誤是將一個方法從對象中拿出來，而後再調用，但願方法中的 this 是原來的對象。（好比在回調中傳入這個方法。）若是不作特殊處理的話，通常會丟失原來的對象。從原來的函數和原來的對象建立一個綁定函數，則能很漂亮地解決這個問題：

this.x = 9; 
var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 返回 81

var retrieveX = module.getX;
retrieveX(); // 返回 9, 在這種狀況下，"this"指向全局做用域

// 建立一個新函數，將"this"綁定到module對象
// 新手可能會被全局的x變量和module裏的屬性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81

 

結合這裏的例子進行理解，React構造方法中的bind即將handleClick函數與這個組件Component進行綁定以確保在這個處理函數中使用this時能夠時刻指向這一組件。