Javascript addEventListener行为古怪

我最近开始学习dom。我计划做一个网站，有几个按钮点击这些按钮，该网站会发出鼓声（不同的按钮有不同的鼓声）

所以，我想在js中试用

这个
关键字。据我所知，
此
应返回对象的名称

因此，我希望此代码返回我
按钮
对象，但它返回
窗口{parent:Window，opener:null，top:Window，length:0，frames:Window，}

这是我的js文件-

var buttons = document.querySelectorAll('.drum')
console.log(buttons)
buttons.forEach(button => button.addEventListener('click', () =>{
    console.log(this)
}
))

但奇怪的是，下面的代码给了我想要的对象，即像这样给
按钮
对象-

w

以下是与此结果关联的代码-

var num = document.querySelectorAll('.drum').length

for (var i = 0; i < num ; i++){
    document.querySelectorAll('.drum')[i].addEventListener('click', function(){
        console.log(this);
    })
}

var num=document.querySelectorAll（'.drum'）.length
对于（变量i=0；i

就我所见，它们都是相同的代码，只是编写方式不同而已。
所以，请解释我为什么会有这种行为

如果有人感兴趣，这里是html文件-


鼓套件
鼓箭头函数没有自己的
这个
，同时以“经典”方式声明的函数也有

这样，在第一个示例中，回调从外部作用域（恰好是
window
）继承
This
。因此，我建议您查看此特定主题以了解更多信息。
箭头函数（
（）=>{}
）和函数表达式（
function（）{}
）之间的区别。
此
的各自值在两种情况下都不同。谢谢，您能详细解释第一种方法不起作用的原因吗？@Sirko是正确的，您可以在文档箭头中阅读函数不接受绑定上下文<箭头函数中的code>this
继承父作用域的
this
。在这种情况下，它恰好与
window
对象在一起。正常的anon函数在上下文中使用。因此，他们的上下文被成功地设置为DOM元素。我有一个疑问-如果箭头函数没有自己的
this
，它们会在全局范围内查找它。但是他们为什么返回
窗口
呢？他们应该像其他人一样返回
未定义的
对吧？？？@default-303我不这么认为。全局
此
是
窗口
尝试
控制台.log（此）在全局范围内&您将看到该窗口被记录。