javascript - 为什么 dom 事件监听器回调中的 `this` 值不是窗口？

Question

让我们看一下下面的代码:

const div = document.getElementById('foo');
div.addEventListener('click', function() {
  console.log(this);
});

<div id="foo">click me</div>

此按钮将始终记录我单击的 dom 元素。我一直都知道这是真的，并且我知道我可以在此处使用箭头函数将 this 的值设置为 window。我们假设此问题使用非箭头函数语法。

据我所知，this 的值根据封闭函数的调用方式获取其值。当然不会在 dom 元素上调用此事件监听器的回调。

在我看来，当单击 div 时，它将匿名函数添加到消息队列中。当队列为空时，它会在全局执行上下文中调用匿名函数(也许这是我错的地方)。

如果是在全局执行上下文中调用该匿名函数，那么 this 的值不应该是窗口吗？

这又回到了标题问题，为什么 dom 事件监听器回调中的 this 值不是 window ？ (假设回调不是箭头函数)

Answer 1

这是因为它是附加到 div 对象的方法 - 可以这样想:

const div = {
    addEventListener: function(event, callback) {...}
};

在此示例中，this 将引用 div，如您所料。

这就是您的代码中实际发生的情况，只是定义不同。