您的位置:首页 > 其它

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,用箭头的方式
第一种写法:
_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>
);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: