首頁猿問 react里面的this指向問題

react里面的this指向問題

JavaScript

人到中年有點甜 2019-10-16 11:17:09

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

查看完整描述

2 回答

函數(shù)式編程

TA貢獻(xiàn)1807條經(jīng)驗獲得超9個贊

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

反對回復(fù) 2019-10-16

當(dāng)年話下

TA貢獻(xiàn)1890條經(jīng)驗獲得超9個贊

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

反對回復(fù) 2019-10-16