我們知道个绍，由于瀏覽器的工作原理翩蘸，事件處理函數(shù)當(dāng)中的this都是指向當(dāng)前的綁定了事件處理函數(shù)的DOM節(jié)點(diǎn)對(duì)象币喧。但是一般在開(kāi)發(fā)過(guò)程中我們都需要其內(nèi)部的this指向的應(yīng)該是這個(gè)組件的實(shí)例本身。常用的有以下三種方法：
方法一
export default class Test extends React.Component {
constructor () {
super()
this.value = 1
this.handleClick = this.handleClick.bind(this)
}
handleClick () {
console.log(this.value)
}
render () {
return <div>
<button onClick={this.handleClick}>點(diǎn)我</button>
</div>
}
}
這種方法是由我們?cè)跇?gòu)造函數(shù)中手動(dòng)為事件處理函數(shù)硬綁定this伤为。
方法二
export default class Test extends React.Component {
constructor () {
super()
this.value = 1
}
handleClick () {
console.log(this.value)
}
render () {
return <div>
<button onClick={this.handleClick.bind(this)}>點(diǎn)我</button>
</div>
}
}
這種方法其實(shí)和第一種應(yīng)該是一樣的咒循，只不過(guò)綁定的位置發(fā)生了變化而已。
方法三
export default class Test extends React.Component {
constructor () {
super()
this.value = 1
}
handleClick (e) {
console.log(e)
console.log(this.value)
}
render () {
return <div>
<button onClick={(e) => {
this.handleClick(e)
}}>點(diǎn)我
</button>
</div>
}
}
第三種方法運(yùn)用的是箭頭函數(shù)內(nèi)部this不可變性 (不可變性不是指箭頭函數(shù)內(nèi)部的 this永遠(yuǎn)指向一致绞愚，而是指其內(nèi)部的 this永遠(yuǎn)指向箭頭函數(shù)被定義時(shí)外部最近的 this叙甸。
在這種情況下，由于事件處理函數(shù)是一個(gè)箭頭函數(shù)位衩，那沒(méi)箭頭函數(shù)內(nèi)部的this指向就不可以被改變了裆蒸，this指向離箭頭函數(shù)最近的外部this，而render()方法中的this由于react的自動(dòng)綁定機(jī)制糖驴，this指向?qū)嵗旧砹诺唬约^函數(shù)的this也指向?qū)嵗旧怼６?code>this.handleClick()這種調(diào)用方式其實(shí)和handleClick.apply(this)是等效的贮缕，所以這種寫法也可以久妆。
ES7的寫法
export default class Test extends React.Component {
constructor () {
super()
this.value = 1
}
handleClick = (e) => {
console.log(e)
console.log(this.value)
}
render () {
return <div>
<button onClick={this.handleClick}>點(diǎn)我</button>
</div>
}
}
不過(guò)，在Class中直接賦值是ES7的寫法(其實(shí)和下面的寫法等價(jià))跷睦，ES6并不支持筷弦，只用ES6的話可以用下面寫法
export default class Test extends React.Component {
constructor () {
super()
this.value = 1
this.handleClick = (e) => {
console.log(e)
console.log(this.value)
}
}
render () {
return <div>
<button onClick={this.handleClick}>點(diǎn)我</button>
</div>
}
}
總結(jié)
介紹了五種寫法，總的來(lái)說(shuō)可以分為兩類抑诸，前三種是一類烂琴，后兩種算一類。這兩類最大的區(qū)別就是前者的事件處理函數(shù)是定義在類的原型之上蜕乡，實(shí)現(xiàn)了代碼的復(fù)用奸绷。而后者的事件處理函數(shù)是作為實(shí)例屬性，每個(gè)類的實(shí)例在實(shí)例化時(shí)都需要定義一遍事件處理函數(shù)层玲。
