ES6 箭頭函數(shù)this, bind(this)的總結(jié)

今天在擼代碼的時候發(fā)現(xiàn)了 在react項目中this的貓膩。
我發(fā)現(xiàn)在使用React中 如果使用ES6的Class extends寫法 如果onClick綁定一個方法 需要bind(this),
而使用React.createClass方法 就不需要.
那這又是為什么呢
上網(wǎng)查了資料發(fā)現(xiàn):React.createClass 是es5的寫法默認是綁定了bind方法,而es6中 新增加了class,綁定的方法需要綁定this,如果是箭頭函數(shù)就不需要綁定this,用箭頭的方式
第一種寫法:

handleClick(e) {
    console.log(this);
}
render() {
    return (
        <div>
            <span onClick={this.handleClick.bind(this)}>點擊</span>
        </div>
    );
}

第二種寫法:

    super(props);
    this.handleClick = this.handleClick.bind(this)
}
handleClick(e) {
    console.log(this);
}
render() {
    return (
        <div>
            <spanonClick={this.handleClick}>點擊</span>
        </div>
    );
}

第三種寫法:

handleClick = (e) => {
    // 使用箭頭函數(shù)(arrow function)
    console.log(this);
}
render() {
    return (
        <div>
            <h1 onClick={this.handleClick}>點擊</h1>
        </div>
    );
}```
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容