将"this“传递给函数JS

Question

我的老师给了我们一些代码来使用，她告诉我们不要接触下面的代码，因为她还没有教给我们：

for ( i = 0; i < matrixOne.length; i++) {
document.getElementsByTagName("td")[i].addEventListener("click", function() {
    cellClicked(this);
});

其中矩阵1定义为：

var matrixOne = document.getElementsByTagName("td");

我需要让cellClicked()函数工作，但我不明白当this作为参数cellClicked(this);传递时，它指的是什么。

如果不知道this代表什么，我就不能完成cellClicked函数，因为我现在不知道传递的是什么。有人能解释一下关键字this在这里是如何工作的吗，即它的上下文是如何定义的？

供将来参考:这个问题已经解决了，this引用的是getElementsByTagName("td")[i]，如果从事件侦听器中单击该单元格，则会传递该单元格。

Answer 1

我不是这方面的专家(双关语)，但我相信this关键字将指向创建它的上下文(或包含它的函数)。

在您的例子中，这意味着上下文是代码的结果：

document.getElementsByTagName("td")[i]

...because，它是向其中添加函数的上下文。

结果:将有一个匿名函数添加到每个TD元素，并且每个元素都将使用对cellClicked(this)的不同调用进行定义，并且对于每个元素，this都将指向创建它的特定TD。

编辑：为了使它更清晰，假设您用以下内容替换了循环的内容：

var currentTd = document.getElementsByTagName("td")[i];

currentTd.addEventListener("click", function() {
    cellClicked(this);
});

这可能使我们更容易认识到两件事：

在loop.的每次迭代中，this td (currentTd)是添加函数的上下文。

• ..and

• 的值因此而不同

Answer 2

希望这对你有所帮助，顺便说一句，我不知道你之前有什么代码，但总的来说，最好把for(var i = 0...z放在上面，也许你忘记了var，或者你之前有

在这里，您可以看到this的确切含义以及您的cellClicked()在哪个元素上引用，运行代码:)

​

const matrixOne = document.getElementsByTagName("td");

for (var i = 0; i < matrixOne.length; i++) {
document.getElementsByTagName("td")[i].addEventListener("click", function() {
    console.log(this);
});
}

<table>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>D</td>
    <td>E</td>
    <td>F</td>
  </tr>
  <tr>
    <td>E</td>
    <td>F</td>
    <td>G</td>
  </tr>
  
</table>

​