Javascript 无法理解代码示例中的上下文

在下面的代码片段中，我不清楚React是如何管理这个的

class Main extends React.Component {
    private name: string

    constructor(props: any) {
        super(props)
        this.name = 'heisenberg'
    }
    render() {
        return (
            <div>
                {this.sayMyName()}
                <button onClick={this.sayMyName}>Say My Name</button>
            </div>
        )
    }
    sayMyName(): string {
        return this.name
    }
}

类主扩展React.Component{
私有名称：string
构造器（道具：任何）{
超级（道具）
this.name='heisenberg'
}
render（）{
返回(
{this.sayMyName（）}
说出我的名字
)
}
sayMyName（）：字符串{
返回此名称
}
}

这是第一次在页面中打印

heisenberg

，当我点击按钮时，它说

this

是

undefined

，我很清楚，

React

不会自动将

this

绑定到所有方法

因此，当我直接从

{}

内部调用

sayMyName

方法，然后从按钮单击调用时，上下文的具体变化情况如何

添加屏幕截图

在单击按钮之前

点击按钮后

---

onclick事件是异步的。调用回调时，它是从全局上下文调用的，因此

此

在非严格模式下设置为

窗口

对象，或在严格模式下设置为未定义

要解决此问题，请在render方法中创建一个箭头函数（箭头函数从定义它们的上下文中获取其值

this

），然后将其传递到按钮：

<button onClick={event => this.sayMyName(event)}>Say My Name</button>

这个人就你的问题写了一篇好文章。基本上，他说你可以责怪JavaScript是这样的

---

简而言之，

this

上下文不会丢失。。。它或多或少指向全局对象

private？？？据我所知，JavaScript没有任何私有关键字。我添加了typescript支持哦，这很有意义。编辑标记Hanks，我应该添加typescript标记，但我不认为这是TypeScriptOK造成的。我认为问题在于您没有将按钮绑定到事件处理程序。他已经知道如何解决问题。他只是想知道为什么我们必须将

这个

绑定到对象。@Demon，正如我所说的，因为它是从全局上下文调用的异步回调。“你想让我对我的答案补充什么？”尼古拉斯托尔，是的，我现在只需要知道这些。谢谢你。我不知道这些信息。@ ParnabSanyal，然后考虑接受这个答案。是的，我会说。

constructor(props: any) {
    super(props);
    this.name = 'heisenberg';
    this.sayMyName = this.sayMyName.bind(this);
}