JavaScript中几种常用的解决for循环中引用同一循环变量对象的方法

来源：互联网发布：吕宋岛台风知乎编辑：程序博客网时间：2024/05/29 17:41

JavaScript中几种常用的解决for循环中引用同一循环变量对象的方法

示例代码前提：HTML代码默认如下

<body>    <button>0</button>  <button>1</button>  <button>2</button>  <button>3</button>  <button>4</button>  <button>5</button></body>

在日常编写JS代码时，我们经常会遇到类似于下面这种情况：

想让每个按钮被点击时，引用被点击的那个按钮的索引，类似于如下情况

<script type="text/javascript">  var btns = document.getElementsByTagName('button');  for(var i=0;i<btns.length;i++){      btns[i].onclick = function(){         alert(i); //结果每次弹出框中的i值都为6       };</script>

出现上述情况是因为JS中没有块级作用域，for循环中的循环变量 i 是在全局作用域中，点击函数中指向的又是同一变量 i ，而这个 i 在最后一次循环后值被改变为6。

最近无意中发现几种比较常用的解决方法：

方法一：在for循环外部创建独立的函数作用域，将循环变量值传过去：

 for (var i = 0; i < 3; i++) {     bindEvent(i); //每循环一次就传一次i  }; function bindEvent(n) {     btns[n].onclick = function () {          alert(n);  };

方法二：在点击函数前存储循环变量 i 的值：

 for(var i=0;i<btns.length;i++){     btns[i].index = i;     btns[i].onclick = function(){           alert(this.index);      }; }

方法三：用闭包方法解决（私有作用域）：

 for(var i=0;i<btns.length;i++){     (function(j){        btns[j].onclick = function(){       alert(j);          };      })(i); }

方法四：用ECMA新增let关键词代替var ：

let关键字，将变量绑定在声明它的作用域中（即块级作用域）。

 for(let i=0;i<btns.length;i++){      btns[i].onclick = function(){           alert(i);      }; }

阅读全文

0 0