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

导致此代码无法正常工作的原因是：该方法的问题是您没有提供函数作为第二个参数。您正在调用一个函数-该函数使事物变蓝。它没有返回使事情变蓝的函数。因此，您立即将其变为蓝色，并且单击发生时，没有什么可调用的，因为调用的函数没有返回任何值。

但是第一句话之后我迷路了。有人会愚蠢的吗？也许对代码进行直观的说明会有所帮助！

代码：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";
}

最佳答案

原因说明：您有这行：

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

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

现在，仅传递SOBoxColor并不会满足您的要求。是的，这将使单击发生时调用SOBoxColor，但是您不会将i值传递给它。

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

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

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

现在，这将起作用。

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

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

...，并且您的绑定也可以不使用i参数：

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

仍然可以更简洁地完成操作，因为单击发生时，浏览器已经为我们提供了很好的服务：它将this关键字设置为添加了事件处理程序的元素，因此最终并没有甚至有必要将submitSOBox[i]明确绑定到它。这也将起作用：

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

...只要您将SOBoxColor功能更改为可以与this一起使用。