将“this”传递给函数 JS [关闭]答案

【问题标题】：passing "this" to a function JS [closed]将“this”传递给函数 JS [关闭]
【发布时间】：2025-12-19 09:20:17
【问题描述】：

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

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

矩阵一定义为：

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

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

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

供将来参考：这个问题已解决，this 指的是getElementsByTagName("td")[i]，如果从事件侦听器单击单元格，则会通过。

【问题讨论】：

您可以迭代集合，而不是 for 循环。 document.getElementsByTagName("td").forEach(function() { })
this binding in event handlers 是它的工作方式。也可以将event作为参数传递，引用event.target获取目标dom节点。我不太清楚你在问什么，或者问题是什么。
你说你不明白this 指的是什么，但在下一句中，你说（正确地）它是单元格。我真的不确定你想在这里问什么。
@zfrisch 如果您能理解 OP 的具体问题是什么，那么您应该给出答案。我的意思不是讽刺：有时某些人对人们真正想问的问题有更好的洞察力，他们提供答案是有意义的。（国际海事组织，即使这意味着被否决而被遗忘）。您还应该编辑 OP 的问题以使其更好。

标签： javascript arrays function scope this

【解决方案1】：

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

在您的情况下，这意味着上下文是代码的结果：

document.getElementsByTagName("td")[i]

...因为这是添加函数的上下文。

结果：每个TD元素都会添加一个匿名函数，每个元素都将通过对cellClicked(this)的不同调用来定义，对于每个元素，this将指向具体的 TD 它是在其中创建的。

编辑：为了更明确和清晰，假设您将循环的内容替换为以下内容：

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

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

这可能更容易实现两件事：

td 元素 (currentTd)是添加函数的上下文。
..因此，this 的值对于循环的每次迭代都会有所不同。

【讨论】：

是的，你在这个例子中是正确的。感谢您花时间这么清楚地回答。

【解决方案2】：

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

在这里您可以确切地看到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>

【讨论】：