浅谈JS闭包中的循环绑定处理程序

下面是关于“浅谈JS闭包中的循环绑定处理程序”的详细攻略。

什么是闭包

闭包指的是一个函数可以访问并修改它所在的词法作用域中的变量，即使这个函数在它所在的词法作用域外被调用。在 JavaScript 中，函数就是闭包。

为什么需要闭包

JavaScript 中引入闭包的一个重要原因是函数作用域的变量是“静态”绑定的，即它们与它们所在的上下文是在它们被定义和分配时就绑定的。而函数在运行时可以动态地创建和修改变量，所以需要利用闭包来实现动态绑定。

循环中的闭包问题

在 JavaScript 中，经常会遇到在循环中绑定事件处理程序的问题。例如，以下代码：

var buttonList = document.getElementsByTagName('button');
for (var i = 0; i < buttonList.length; i++) {
   buttonList[i].addEventListener('click', function() {
       // do something
   });
}

这段代码的意图是为按钮列表中的每个按钮绑定一个 click 事件处理程序。但由于 JavaScript 中的变量作用域是函数作用域而不是块级作用域，并且 for 循环的初始化、条件和增量都在同一个上下文中，因此在循环结束后，i 的值始终为 buttonList.length，导致所有按钮都绑定了相同的事件处理程序（点击任何一个按钮都会执行最后一个按钮的事件处理程序）。

解决方法：使用闭包

解决这个问题的一种方法是使用闭包创建一个新的函数作用域，使得每个函数都可以引用一个独立的变量 i。例如：

var buttonList = document.getElementsByTagName('button');
for (var i = 0; i < buttonList.length; i++) {
  (function(i) {
    buttonList[i].addEventListener('click', function() {
      // do something
    });
  })(i);
}

这段代码使用了一个自执行函数创建了一个新的函数作用域，局部变量 i 被复制为新的 i，使得每个函数都绑定了一个独立的点击事件处理程序。

示例：计数器

以下代码是一个计数器的示例，通过使用闭包，每个按钮都可以维护一个独立的计数器。

<button>0</button>
<button>0</button>
<button>0</button>
<button>0</button>
<script>
var buttonList = document.getElementsByTagName('button');
for (var i = 0; i < buttonList.length; i++) {
  (function(i) {
    var count = 0;
    buttonList[i].addEventListener('click', function() {
      count++;
      buttonList[i].innerHTML = count;
    });
  })(i);
}
</script>

在这个示例中，我们使用闭包创建了一个新的函数作用域，局部变量 count 和 i 被复制为新的 count 和 i，使得每个按钮都维护了一个独立的计数器。点击每个按钮都会使得对应计数器加 1。

示例：获取远程数据

以下代码是一个获取远程数据的示例，通过使用闭包，每个按钮都可以获取独立的远程数据。

<button>Load data 1</button>
<button>Load data 2</button>
<button>Load data 3</button>
<button>Load data 4</button>
<script>
var buttonList = document.getElementsByTagName('button');
for (var i = 0; i < buttonList.length; i++) {
  (function(i) {
    buttonList[i].addEventListener('click', function() {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://api.example.com/data?id=' + (i + 1), true);
      xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
          console.log(xhr.responseText);
        }
      };
      xhr.send();
    });
  })(i);
}
</script>

在这个示例中，我们使用闭包创建了一个新的函数作用域，局部变量 i 被复制为新的 i，使得每个按钮发送的请求都是独立的。点击每个按钮都发送一个请求，并输出响应数据。

通过以上两个示例，可以看到闭包的强大之处，它可以通过动态创建函数作用域，使得每个函数绑定的事件处理程序都可以引用一个独立的变量。