您的位置：首页 > Web前端 > JavaScript

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

2017-07-11 19:51 603 查看

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
.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);
};
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript for循环 闭包 作用域
相关文章推荐
新的分享
章节导航