es6中爲什麼要bind(this)

在使用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>
    );
}
第二種寫法:
constructor(props) {
    super(props);
    this._handleClick = this._handleClick.bind(this)
}
_handleClick(e) {
    console.log(this);
}
render() {
    return (
        <div>
            <h1 onClick={this._handleClick}>點擊</h1>
        </div>
    );
}
第三種寫法:
_handleClick = (e) => {
    // 使用箭頭函數(arrow function)
    console.log(this);
}
render() {
    return (
        <div>
            <h1 onClick={this._handleClick}>點擊</h1>
        </div>
    );
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章