轉自http://blog.csdn.net/jutal_ljt/article/details/53381670
今天在看最新的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技術文檔中找到了這一函數的具體作用如下：
<b>bind()方法會創建一個新函數，當這個新函數被調用時，它的this值是傳遞給bind()的第一個參數, 它的參數是bind()的其他參數和其原本的參數. </b>
之后在后面的一個例子很好的解釋了React這里使用bind的作用：
<i>創建綁定函數 </i>
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
結合這里的例子進行理解，<b>React構造方法中的bind即將handleClick函數與這個組件Component進行綁定以確保在這個處理函數中使用this時可以時刻指向這一組件。</b>
