我可以通过“新”吗？ addEventListener 的匿名函数

Question

我使用这样的代码将参数传递给事件处理函数。但是，在这种特殊情况下，循环会引起问题。在所有 activeVisual 调用中只能访问最后一个 linkTags[i]。这与传递参数的匿名函数在整个循环中是同一个这一事实有关。

  for (var i = 0; i < linkTags.length; i++) {
    addCrossEvent(linkTags[i], "click", launchLink);
    addCrossEvent(linkTags[i], "mousedown", 
      function(evt) {
        activeVisual(evt, linkTags[i]);
      });
  }

现在，我记得尝试在匿名函数声明之前添加 new ，如下所示：

  for (var i = 0; i < linkTags.length; i++) {
    addCrossEvent(linkTags[i], "click", launchLink);
    addCrossEvent(linkTags[i], "mousedown", 
      new function(evt) {
        activeVisual(evt, linkTags[i]);
      });
  }

它不起作用。 activeVisual 永远不会被调用。有人可以向我解释一下为什么以及如何让它发挥作用吗？

更新最终解决方案

感谢下面的所有回复，我的工作代码现在看起来像这样：

  // Function that provides pass of event handling parameters with separate copy in each loop
  function callbackHandler(index) {
    return function(evt) {
      activeVisual(evt, linkTags[index]);
    }
  }
  ...
  for (var i = 0; i < linkTags.length; i++) {
    ...
    addCrossEvent(linkTags[i], "mousedown", callbackHandler(i));
  }

Answer 1

您需要这样做：

addCrossEvent(linkTags[i], "mousedown", 
      (function(i) {
          return function(evt) {
              activeVisual(evt, linkTags[i]);
          }
      )(i);
);

问题在于迭代器变量 i 在每次迭代时都会发生变化，并且传递了它的引用，但 i 的值不会被复制。以这种方式将其作为参数传递给包装函数，将导致复制，并且它将在该特定迭代中接收实际值。

Answer 2

为了完整起见，这里解释了为什么您使用 new 的方式不起作用：

当您使用 new 调用函数时，该函数会生成一个空对象（您可以参考到函数内部的 this 并继承自函数原型）并返回它。
因此，您实际上不会传递函数作为回调处理程序，而是传递函数返回的对象。

只要对象实现 EventListner 接口，以便可用作事件处理程序。如果你这样做，你可以使用你的代码进行一些修改：

  for (var i = 0; i < linkTags.length; i++) {
    addCrossEvent(linkTags[i], "click", launchLink);
    addCrossEvent(linkTags[i], "mousedown", 
      new (function(index) {
        this.handleEvent = function(evt) {
            activeVisual(evt, linkTags[index]);
        }
      })(i));
  }

这实际上类似于@Luca的答案，因为 i 的值是在对象创建时捕获的。上面的代码实际上与：

function CallbackHandler(index) {
    this.handleEvent = function(evt) {
        activeVisual(evt, linkTags[index]);
    }
}

for (var i = 0; i < linkTags.length; i++) {
    addCrossEvent(linkTags[i], "click", launchLink);
    addCrossEvent(linkTags[i], "mousedown", new CallbackHandler(i));
}

也就是说，我发现返回函数的立即函数的用法更容易阅读，并且我认为使用函数作为事件处理程序而不是对象也更常见。

工作演示