addEventListener 行为怪异[重复]答案

【问题标题】：addEventListener behaving weirdly [duplicate]addEventListener 行为怪异[重复]
【发布时间】：2020-09-30 10:15:45
【问题描述】：

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

所以，我想在 js 中试验 this 关键字。据我所知this 应该返回对象的名称。

所以，我希望这段代码返回 button 对象，但它返回 Window {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)
}
))

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

<button class = "a drum">w</button>

这是与此结果相关的代码 -

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

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

据我所知，它们都是相同的代码，只是编写方式不同。所以，请解释为什么我会出现这种行为。

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

 <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Drum Kit</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
</head>

<body>

  <h1 id="title">Drum ???? Kit</h1>
  <div class="set">
    <button class="w drum">w</button>
    <button class="a drum">a</button>
    <button class="s drum">s</button>
    <button class="d drum">d</button>
    <button class="j drum">j</button>
    <button class="k drum">k</button>
    <button class="l drum">l</button>
  </div>


  <script src="./index.js"></script>
</body>

</html>

任何帮助表示赞赏。谢谢。

【问题讨论】：

区别在于箭头函数（() => { }）和函数表达式（function() {}）。 this 的各自值在两种情况下都不同。
谢谢，你能详细解释一下为什么第一种方法行不通吗？
@Sirko 是对的，您可以在文档developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 中阅读
箭头函数不接受绑定上下文。箭头函数中的this 继承父作用域的this。在那种情况下，它恰好与window 对象有关。正常的匿名函数会考虑上下文。所以他们的上下文被成功设置为 DOM 元素。
另一个信息来源可能是这个问题：stackoverflow.com/a/34361380/1169798

标签： javascript html jquery event-handling

【解决方案1】：

箭头函数没有自己的this，而以“经典”方式声明的函数有。

这样，在第一个示例中，回调从外部范围（恰好是window）继承this。这个特定的主题is also detailly explained at MDN，所以，我建议您查看它以获取更多信息。

【讨论】：

嘿，谢谢。我有一个疑问——如果箭头函数没有自己的this，他们会在全局范围内查找。但是为什么他们返回window 他们应该像其他人一样返回undefined 对吗？？
@default-303 我不这么认为。全局 this 是 window 在全局范围内尝试 console.log(this); 您会看到该窗口已记录。