为什么React内联事件调用函数时this为undefined，原生监听指向调用者？

本质是两种场景下showThis函数的调用方式不同，JavaScript普通函数的this指向完全由调用时的上下文决定，和定义位置无关。

1. React内联onClick绑定场景 #

你写onClick={myObj.showThis}的时候，只是把showThis这个普通函数的引用传给了React的合成事件系统，等价于执行了如下逻辑：

// 1. 先把函数从myObj对象上剥离，拿到单独的函数引用
const handler = myObj.showThis;
// 2. 事件触发时React内部直接调用这个函数
handler(event); 

此时函数属于无上下文的直接调用，同时React的事件回调默认在严格模式下执行，严格模式中普通函数直接调用时this不会默认指向全局对象（浏览器下是window），而是直接为undefined，因此你看到输出为undefined。

如果要让这里的this指向myObj，有两种常用修正方式：

• 改成箭头函数包裹：onClick={() => myObj.showThis()}
• 提前绑定this：onClick={myObj.showThis.bind(myObj)}

2. 原生addEventListener绑定场景 #

原生DOM的事件绑定有固定规则：如果直接把函数作为回调传给addEventListener，事件触发时浏览器会自动把回调的this绑定到触发事件的DOM元素本身。
你示例中如果现象是this指向按钮，说明你的实际执行逻辑是直接把showThis作为回调传给了addEventListener，等价于：

document.getElementById('btn').addEventListener('click', myObj.showThis)

此时浏览器调用回调时会主动把this绑定到触发点击的按钮元素，因此输出为按钮DOM。
注：你示例中写的在匿名函数内部调用myObj.showThis()的写法，属于作为对象方法调用，this正常应该指向myObj，如果实际输出为按钮，大概率是代码书写误差导致。

内容的提问来源于stack exchange，提问作者happy_story