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

最新推荐文章于 2024-08-20 08:40:28 发布

長风

最新推荐文章于 2024-08-20 08:40:28 发布

阅读量3.6k

点赞数 1

分类专栏：前端文章标签： javascript for循环闭包作用域

本文链接：https://blog.csdn.net/weixin_38636706/article/details/74995535

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

長风

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录