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

时间：2021-02-01 14:58:28

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);
      };
 }









标签：

相关文章