javascript - 单击按钮时， "this"在显示描述函数中如何工作？

Question

我正在 Udemy 上学习 JavaScript，有一项任务是编写一段代码，在单击“查看更多”按钮时显示内容。

我不明白怎么办this在显示内容代码中工作以及 JavaScript 如何理解变量 t是。 我在 QA 部分找到了解决方案，但我不确定它是如何工作的。 显然，for i++循环代码是必要的，以便该代码适用于选项卡中的每个按钮。

问题:

1. this 怎么样？在这里工作，为什么有必要？
2. JavaScript 如何理解 t是？

let desctiptionTab = document.querySelectorAll('.description-btn');

for (let i = 0; i < desctiptionTab.length; i++) {
  desctiptionTab[i].addEventListener('click', function() {
    Modal(this);
  });
}

function Modal(t) {
  overlay.style.display = 'block';
  t.classList.add('more-splash');
  document.body.style.overflow = 'hidden';
};

Answer 1

在您的代码中，您试图在 HTML 元素的 click 事件上实现某些目标。这就是您使用 addEventListener 附加点击事件的原因。

现在，JS 中的函数通常具有运行时作用域(除非您使用 call、bind 或 apply More Info )，这意味着 this 值可以根据调用函数时的上下文而改变。在您的情况下，this 的值是单击的 HTML 元素，您将使用该元素将其作为参数 t 传递给 Modal(t) .

document.getElementById('hello').addEventListener('click', function() {
  console.log(this);
});

<div id="hello">Hello</div>