# 绑定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的绑定生效，并且可以传递参数，而且效果较好。其中构造函数方式最优，我们在学习使用中不要计较最优这种情况。能实现效果，并且维护好代码才最优秀。