es6中为什么要bind(this)
2017-08-22 15:28
316 查看
在使用React中 如果使用ES6的Class extends写法 如果onClick绑定一个方法 需要bind(this),
而使用react.createClass方法 就不需要.
请问这是为什么呢
解释:React.createClass 是es5的写法默认是绑定了bind方法,而es6中 新增加了class,绑定的方法需要绑定this,如果是箭头函数就不需要绑定this,用箭头的方式
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
而使用react.createClass方法 就不需要.
请问这是为什么呢
解释:React.createClass 是es5的写法默认是绑定了bind方法,而es6中 新增加了class,绑定的方法需要绑定this,如果是箭头函数就不需要绑定this,用箭头的方式
第一种写法: _handleClick(e) { console.log(this); } render() { return ( <div> <h1 onClick={this._handleClick.bind(this)}>点击</h1> </div> ); }1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
第二种写法: constructor(props) { super(props); this._handleClick = this._handleClick.bind(this) } _handleClick(e) { console.log(this); } render() { return ( <div> <h1 onClick={this._handleClick}>点击</h1> </div> ); }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
第三种写法: _handleClick = (e) => { // 使用箭头函数(arrow function) console.log(this); } render() { return ( <div> <h1 onClick={this._handleClick}>点击</h1> </div> ); }
相关文章推荐
- es6中为什么要bind(this)
- javascript this 和 es6 箭头函数this 的理解以及call()、apply()、bind()的用法
- bind(this)和es6箭头函数
- React为什么要用 bind才不丢失this
- 为什么要这样写final ReentrantLock lock = this.lock; ?
- JS中改变this指向的方法(call和apply、bind)
- socket 关闭但端口占用问题 Bind: Address Already in Use Or How to Avoid this Error when Closing TCP Connections
- 为什么静态方法中不能用this和super关键字?
- 为什么java的构造方法中this()或者super()要放在第一行
- ButterKinfe.bind(this) @BindView时出现NullPointerException
- Javascript通过bind()掌控this
- java中静态方法中为什么不能使用this、super和直接调用非静态方法
- React组件方法中为什么要绑定this
- 为什么java构造函数的构造器只能在第一行写this() super()
- 为什么要使用“var me=this”这样的写法
- $(this).bind("change",itemno_change);
- es6箭头函数中this的问题
- es6箭头函数的this与es5函数的this比较
- React事件处理函数中绑定this的bind()函数
- react 的 bind this 几种方法