javascript - 新手 - 操作闭包和 For 循环

Question

此代码不起作用的原因是:此方法的问题是您没有提供函数作为第二个参数。您正在调用一个函数 - 该函数使事物变蓝。它没有返回使事情变蓝的函数。因此，您立即将事情变成蓝色，当点击发生时，没有什么可调用的，因为您调用的函数没有返回任何内容。

但我在第一句话之后迷路了。有人可以把它弄糊涂吗？也许代码的直观解释会有所帮助!

代码:https://jsfiddle.net/2yfj89af/1/

var submitSOBox = document.getElementsByClassName("submitSOBox");

for (i = 0; i < submitSOBox.length; i++) {
    submitSOBox[i].addEventListener('click', SOBoxColor(i));
}

function SOBoxColor(i) {
    submitSOBox[i].style.backgroundColor = "blue";
}

Answer 1

原因解释:你有这一行:

submitSOBox[i].addEventListener('click', SOBoxColor(i));

这会调用 addEventListener，它需要一个函数作为最后一个参数。您提供 SOBoxColor(i)，它不是函数，而是函数返回的值——您调用它。要传递函数，您需要传递类似 SOBoxColor 的内容，因此无需调用它。这是必需的，因为您的浏览器需要知道在点击事件发生时调用什么。

现在，仅传递 SOBoxColor 不会执行您想要的操作。是的，它会在发生点击时调用 SOBoxColor，但您不会将 i 值传递给它。

为此，您需要修改函数版本，以某种方式将 i 值预填充为参数。幸运的是，有一种方法可以使用 bind 方法创建这样一个修改后的函数，它返回相同的函数，但绑定(bind)了一些东西:

submitSOBox[i].addEventListener('click', SOBoxColor.bind(submitSOBox[i], i));

bind 的第一个参数决定了特殊的 this 是什么对象将表示何时调用 SOBoxColor，第二个参数是 i 将是什么。

现在，这将起作用。

但是，如果您在 SOBoxColor 函数中使用 this 关键字，您可以做得更好，因为那样您甚至不需要 i 参数:

function SOBoxColor() {
    this.style.backgroundColor = "blue";
}

...并且您的绑定(bind)也可以不使用 i 参数:

submitSOBox[i].addEventListener('click', SOBoxColor.bind(submitSOBox[i]));

它仍然可以做得更简洁，因为当点击发生时，浏览器已经为我们提供了一个很好的服务:它将 this 关键字设置为您添加了事件处理程序的元素，所以最后甚至没有必要明确地将 submitSOBox[i] 绑定(bind)到它。这也适用:

 submitSOBox[i].addEventListener('click', SOBoxColor);

...前提是您更改了 SOBoxColor 函数以使用 this。