ES6 let解决for循环注册事件获取计数器的问题

每一天，每一步

于 2021-10-13 21:00:00 发布

阅读量289

点赞数

本文链接：https://blog.csdn.net/u010234868/article/details/120746769

版权

ES6 ES7 ES8 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

本文探讨了JavaScript中全局变量i在for循环中导致的常见问题，即事件处理函数内部引用到的i是循环结束后的最终值。通过闭包的概念，介绍了如何使用立即执行函数表达式和let关键字来解决这个问题，确保每个事件处理函数能够保留其执行时的i值。文章深入浅出地解释了闭包的工作原理，并展示了如何在实际编程中避免全局变量污染和确保作用域安全。

摘要由CSDN通过智能技术生成

使用var全局声明变量i：


var arr = [{}, {}, {}];
for (var i = 0; i < arr.length; i++) {
  arr[i].onclick = function () {
    console.log(i);
  }
}
arr[0].onclick();
arr[1].onclick();
arr[2].onclick();

输出结果为：

原因是：i是使用var声明的全局变量，在onclick事件执行时，全局变量i已经在循环执行完毕后累加到了3。

该问题可以使用函数的闭包机制（借助于函数作用域）解决：

var arr = [{}, {}, {}];
for (var i = 0; i < arr.length; i++) {
  arr[i].onclick = (function (i) {
    return function () {
      console.log(i);
    }
  })(i);
}
arr[0].onclick();
arr[1].onclick();
arr[2].onclick();

输出结果为：

同样的我们可以使用let声明变量，将作用域控制在块内（其实利用的也是闭包机制）：


var arr = [{}, {}, {}];
for (let i = 0; i < arr.length; i++) {
  arr[i].onclick = function () {
    console.log(i);
  }
}
arr[0].onclick();
arr[1].onclick();
arr[2].onclick();

输出结果为：