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