# 綁定this并傳參的三種方式 綁定this并傳參，一般推薦這三種方法。在初學時我們一般以bind為主。但是真正項目中哪種更好呢？ 答案是構造函數。 ## 解釋 原因是因為其它的綁定功能每次觸發事件都需要重新bind一次或是其它，而在構造函數中只會出現一次。所以它最好，性能上來講優秀一點。 下面的Emoji表情在win10中通過快捷鍵 ctrl+shift+b鍵可以快速生成，不過要注意快捷鍵沖突，比如chrome瀏覽器中就會沖突。  ## 1. 在事件中綁定this并傳參： ``` <input type="button" value="在事件中綁定this并傳參" onClick={this.handleMsg1.bind(this, '??', '??')} /> // 在事件中綁定this并傳參 handleMsg1(arg1, arg2) { console.log(this); // 此時this是個null this.setState({ msg: '在事件中綁定this并傳參：' + arg1 + arg2 }); } ``` ## 2. 在構造函數中綁定this并傳參: ``` // 修改構造函數中的代碼： this.handleMsg2 = this.handleMsg2.bind(this, '??', '??'); <input type="button" value="在構造函數中綁定this并傳參" onClick={this.handleMsg2} /> // 在構造函數中綁定this并傳參 handleMsg2(arg1, arg2) { this.setState({ msg: '在構造函數中綁定this并傳參：' + arg1 + arg2 }); } ``` ## 3. 用箭頭函數綁定this并傳參： ``` <input type="button" value="用箭頭函數綁定this并傳參" onClick={() => { this.handleMsg3('??', '??') }} /> // 用箭頭函數綁定this并傳參 handleMsg3(arg1, arg2) { this.setState({ msg: '用箭頭函數綁定this并傳參：' + arg1 + arg2 }); } ``` # 總結 上面的三種方式都可以對this的綁定生效，并且可以傳遞參數，而且效果較好。其中構造函數方式最優，我們在學習使用中不要計較最優這種情況。能實現效果，并且維護好代碼才最優秀。