1. 自動綁定 (事件綁定)

綁定this: React為什么要這么做?

• 是js中this綁定方式?jīng)Q定的，和react工作方式無關(guān)。
• 函數(shù)處理, 是作為回調(diào)傳遞的，這樣就會丟失了上下文, 所以this為 undefined
• this不是默認指向在全局的嗎? 在嚴格模式下Strict mode, 就是個undefined, 不嚴格模式為全局

// 三種方式 // 1. 構(gòu)造器綁定 constructor (props) {super(props)this.handleClick3 = this.handleClick3.bind(this)}// 2. 箭頭函數(shù) <button onClick={() => this.handleClick2()}>// 3. bind方式 <button onClick={this.handleClick4.bind(this)}>

2. 為什么要綁定this?

LIN.JY666：[JS基礎(chǔ)] 7 - this, call/apply/bind/箭頭函數(shù)?zhuanlan.zhihu.com

• 如果是個函數(shù)調(diào)用，那么this指向函數(shù)內(nèi)部，如果是非嚴格模式，那么this指向window
• 如果是個對象里的函數(shù)調(diào)用，那么this指向該對象
• this要等到執(zhí)行的時候，才確定是什么。

為了綁定當前執(zhí)行的環(huán)境, 當前執(zhí)行的作用域

const object = {name: '123',fn: function () {// 隱式綁定console.log('this.name', this.name)} } const name = 'test'// 1. ? object.fn() // 返回'123' 對象里的函數(shù)調(diào)用, this指向該對象// 2. ? objFn = object.fn objFn() // 返回 test 函數(shù)調(diào)用，那么this指向函數(shù)內(nèi)部，如果是非嚴格模式，那么this指向window// 3. 綁定, object.fn的this 使用object內(nèi)部 objFnn = object.fn.bind(object) objFnn() // '123'

總結(jié)

以上是生活随笔為你收集整理的spinbox 上下箭头事件_[React] 3 - 自动绑定 (事件绑定)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。