【JavaScript】在循环内使用闭包

本文主要是介绍【JavaScript】在循环内使用闭包，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

================== 基本循环语句 ==================
for (var i = 0; i < 5; i++) {console.log(i);
}
console.log(i);
//这个大家应该很快就知道了，012345================== setTimeout与var语句的for循环 ==================
for (var i = 0; i < 5; i++) {setTimeout(function() {console.log(i);}, 1000);
}
console.log(i);
//这个大家就要小心一点了，答案是5    55555
//在setTimeout执行之前，for循环早就执行完了，i的值早已经是5了，所以一开始是执行，最后面的console.log(i);
//在for循环的时候一下子自定义5个setTimeout，大概一秒后，就是输出55555================== 立即执行函数 ==================
for (var i = 0; i < 5; i++) {(function(j) { // j = isetTimeout(function() {console.log(j);}, 1000);})(i);
}
console.log(i); 
//这里的解析和上面基本一样，只是用 闭包 来记录每一次循环的i,
//所以答案是5     01234================== 闭包 ==================
var output = function (i) {setTimeout(function() {console.log(i);}, 1000);
};for (var i = 0; i < 5; i++) {output(i); // 这里传过去的 i 值被复制了
}
console.log(i);//这里的解析和上面基本一样，把i当参数传进output，记录每一次循环的i,
//所以答案是5     01234================== let语句 ==================
for (let i = 0; i < 5; i++) {setTimeout(function() {console.log(i);}, 1000);
}
console.log(i);
//结果是  报错   01234 
//注意i是用let定义的，不是var

实际中的使用场景

var elem = document.getElementsByTagName('div'); // 如果页面上有5个divfor(var i = 0; i < elem.length; i++) {elem[i].onclick = function () {alert(i); // 总是5};
}

　　上方是一个很常见闭包问题，点击任何div弹出的值总是5，因为当你触发点击事件的时候i的值早已是5，可以用下面方式解决（共有上述分析中的立即执行函数、闭包、let语句 3种写法）：

var elem = document.getElementsByTagName('div'); // 如果页面上有5个divfor(var i = 0; i < elem.length; i++) {(function (w) {elem[w].onclick = function () {alert(w); // 依次为0,1,2,3,4};})(i);
}