今天在看最新的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時可以時刻指向這一元件。