首頁(yè) 猿問(wèn) 萌新求教！react里面的this...

萌新求教！react里面的this指向問(wèn)題求解答！

JavaScript

人到中年有點(diǎn)甜 2019-10-08 09:51:00

才學(xué)react幾天求問(wèn)大神react的this問(wèn)題classAppextendsReact.Component{//constructor(props){//super(props)//}state={name:'ls'}render(){return點(diǎn)擊觸發(fā)事件}fn(){console.log(1);console.log(this);}}為什么點(diǎn)擊之后這里的this是打印的undefined而不是這個(gè)實(shí)例我知道4個(gè)解決辦法但是我就是搞不懂為什么this指向的undefined按理說(shuō)這里this.fn觸發(fā)了不就是對(duì)象里面方法的調(diào)用嗎既然這樣方法里面的this不就是指向這個(gè)對(duì)象的嗎為什么會(huì)是undefined聽(tīng)大佬說(shuō)這個(gè)this指的是點(diǎn)擊這個(gè)事件所以是undefined那我用箭頭函數(shù)為什么就又可以了（箭頭函數(shù)沒(méi)有this，this會(huì)不斷往上作用域鏈尋找）classAppextendsReact.Component{//constructor(props){//super(props)//}state={name:'ls'}render(){return點(diǎn)擊觸發(fā)事件}fn=()=>{console.log(1);console.log(this);}}

查看完整描述

2 回答

炎炎設(shè)計(jì)

TA貢獻(xiàn)1808條經(jīng)驗(yàn) 獲得超4個(gè)贊

你要在constructor里把fn里的this指向綁定到這個(gè)組件。還有state寫(xiě)到constructor函數(shù)里classAppextendsReact.Component{constructor(props){super(props);this.state={}//這里綁定，這樣fn函數(shù)里的this就指向這個(gè)組件this.fn=this.fn.bind(this);}fn(){console.log(this);}render(){return點(diǎn)擊觸發(fā)事件}}

反對(duì) 回復(fù) 2019-10-08

30秒到達(dá)戰(zhàn)場(chǎng)

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超6個(gè)贊

這是由JavaScript本身產(chǎn)生的問(wèn)題首先，class的本質(zhì)是基于原型的prototype當(dāng)你定義方法的時(shí)候使用箭頭函數(shù)，這個(gè)時(shí)候this的指向已經(jīng)確定好了，就是指向App，所有調(diào)用不會(huì)有問(wèn)題然而，當(dāng)你定義方法的時(shí)候使用fn(){}這種方式就相當(dāng)于App.prototype.fn=function(){}這個(gè)函數(shù)只有在調(diào)用的時(shí)候才能確定this的指向，所以在onClick調(diào)用fn函數(shù)的時(shí)候，默認(rèn)情況下，this是指向全局的。但是，在class中默認(rèn)使用嚴(yán)格模式，不會(huì)默認(rèn)綁定，所以打印出來(lái)的this就是undefined

反對(duì) 回復(fù) 2019-10-08