Javascript中箭头函数中的这个范围[重复]

Question

根据我的理解，箭头函数应该与创建它的上下文具有相同的范围。 就像下面一个返回：“这是绿色大号的框号”，我明白了。

let box6={
    color:'green',
    position:1,
    font:'big',
    clickMe:function(){
    return ()=>{
    let str='This is the box number '+this.color+' '+ this.font;
    console.log(str)
    }  }
    }

但是在 React 类中，handleClick 箭头函数是在类 LoggingButton 中定义的，它假设与它具有相同的作用域，但在控制台中，它返回：这是 LoggingButton，我认为它应该返回全局作用域或任何作用域级别高于 LoggingButton。 为什么会这样？ 非常感谢！！！

class LoggingButton extends Component {
  handleClick=()=>{
    console.log('this is :', this)
  }
  render() {
    return (
      <div className="App">
       <button onClick={this.handleClick}>Click Me</button>
      </div>
    );
  }
}

Answer 1

这很简单。

()=>{} 与function(){}.bind(this) 相同。你的情况是LoggingButton。

如果有帮助，请告诉我。