react里面的this指向问题怎么回事哈啊？

Question

才学react几天求问大神react的this问题classAppextendsReact.Component{//constructor(props){//super(props)//}state={name:'ls'}render(){return点击触发事件}fn(){console.log(1);console.log(this);}}为什么点击之后这里的this是打印的undefined而不是这个实例我知道4个解决办法但是我就是搞不懂为什么this指向的undefined按理说这里this.fn触发了不就是对象里面方法的调用吗既然这样方法里面的this不就是指向这个对象的吗为什么会是undefined听大佬说这个this指的是点击这个事件所以是undefined那我用箭头函数为什么就又可以了（箭头函数没有this，this会不断往上作用域链寻找）classAppextendsReact.Component{//constructor(props){//super(props)//}state={name:'ls'}render(){return点击触发事件}fn=()=>{console.log(1);console.log(this);}}

Answer 1

你要在constructor里把fn里的this指向绑定到这个组件。还有state写到constructor函数里
classAppextendsReact.Component{
constructor(props){
super(props);
this.state={}
//这里绑定，这样fn函数里的this就指向这个组件
this.fn=this.fn.bind(this);
}
fn(){
console.log(this);
}
render(){
return点击触发事件
}
}
                            

Answer 2

这是由JavaScript本身产生的问题
首先，class的本质是基于原型的prototype
当你定义方法的时候使用箭头函数，这个时候this的指向已经确定好了，就是指向App，所有调用不会有问题
然而，当你定义方法的时候使用fn(){}这种方式就相当于
App.prototype.fn=function(){}
这个函数只有在调用的时候才能确定this的指向，所以在onClick调用fn函数的时候，默认情况下，this是指向全局的。但是，在class中默认使用严格模式，不会默认绑定，所以打印出来的this就是undefined