Javascript ReactJs中的这个关键字以及为什么我们会失去上下文

类Foo扩展了React.Component{
建造师（道具）{
超级（道具）；
}
handleClick（事件）{
console.log（this）；//“this”未定义
}
render（）{
返回(
点击我
);
}
}
ReactDOM.render(
,
document.getElementById（“应用程序”）
);
这是由于上下文使用了
箭头功能

handleClick是在按钮的单击事件上下文中调用的，因为它指的是handleClick中的窗口上下文，但当您使用箭头函数时，它将解决这个问题
我对这个关键字很感兴趣，但我不明白为什么在这种情况下，当我单击按钮时，它是未定义的？在这种情况下，这应该指向类Foo，为什么它是windows对象？在这种情况下，上下文是如何丢失的？因为onClick回调是在全局上下文中调用的，而在这种情况下，全局上下文是窗口。此规则对类内的所有方法都有效吗？我们应该绑定类组件内的所有方法？我们应该绑定类组件内的所有方法否-仅当当前执行上下文更改意味着在您的情况下-在onClick的上下文中调用handleClick函数时当从内联事件处理程序调用代码时，它的this设置为放置侦听器的DOM元素，现在在onClick中，内部函数的this未设置，因此它返回全局/窗口对象（即非严格模式下的默认对象，该模式不由调用设置）。看起来react正在onClick上绑定
窗口
对象，如果显式绑定
this.handleClick.bind（this）
handleClick = (event)=>{
    console.log(this); //
  }