Question

我意识到这可能被归类为重复项，但是我已经详细阅读了this question and the replies，但仍然无法理解。

我有这段代码，但是在'focus'函数中，'i'始终为2（pageSearchInput.length值），并且我希望在每个循环中它分别为0,1。

我了解这是一个范围界定问题，但是我不知道如何简单地使用'let'来解决此问题。

如果有人可以解释这是如何工作的，我将非常感激。

<input onclick="storeDate()" type="submit" name="Button" value="Button" />

<p id="demo"></p>

Answer 1

只需将i作为函数的参数并将其传递，然后返回处理事件的函数即可：

for (i = 0; i < pageSearchInput.length; i++) {

    pageSearchInput[i].addEventListener("focus", (function(i){
      return function() {
        pageSearchContainer[i].style.outline = "4px solid #ffcc33";
        pageSearchButton[i].style.backgroundColor = "#008920";
        pageSearchButton[i].style.border = "1px solid #008920";
      };
    })(i));

}

Answer 2

如果您不想使用let，则应创建一个包装函数。

for (i = 0; i < pageSearchInput.length; i++) {


    pageSearchInput[i].addEventListener("focus", function(){
        return (function(i) {
            pageSearchContainer[i].style.outline = "4px solid #ffcc33";
            pageSearchButton[i].style.backgroundColor = "#008920";
            pageSearchButton[i].style.border = "1px solid #008920";
        })(i);
    });

}

Answer 3

您可以使用IIFE（立即调用函数表达式）

(function () {
  statements
})();

这是一种设计模式，也称为自执行匿名功能，包含两个主要部分。第一个是匿名函数，其词法范围包含在分组运算符（）中。这样可以防止在IIFE习语中访问变量以及污染全局范围。

第二部分创建立即执行的函数表达式（），JavaScript引擎将通过该表达式直接解释该函数。

使用IIFE，您的代码应为：

for (i = 0; i < pageSearchInput.length; i++) {
  (function(i){
     pageSearchInput[i].addEventListener("focus", function(){

       pageSearchContainer[i].style.outline = "4px solid #ffcc33";
       pageSearchButton[i].style.backgroundColor = "#008920";
       pageSearchButton[i].style.border = "1px solid #008920";

    });
  })(i);
}

Answer 4

您必须使用let关键字才能在i范围内保留loop的值。

for (let i = 0; i < pageSearchInput.length; i++) {

另一种方法是使用Immediately-invoked function expression

(function(i){
   pageSearchInput[i].addEventListener("focus", function(){

   });
})(i);

Answer 5

您可以尝试使用IIFE来解决与范围相关的问题。

for (i = 0; i < pageSearchInput.length; i++) {
   (function(j){
    return pageSearchInput[j].addEventListener("focus", function(){

        pageSearchContainer[j].style.outline = "4px solid #ffcc33";
        pageSearchButton[j].style.backgroundColor = "#008920";
        pageSearchButton[j].style.border = "1px solid #008920";

    })
  }(i))

}

有关详细信息，请参阅此帖子中的说明 http://learnwebtechs.com/2018/05/11/understanding-javascript-closures-with-example

Java中for循环的作用域问题

5 个答案: