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