JavaScript闭包解决循环变量引用问题
作者:木棉时间:2026-10-25 09:21:24浏览:648
本文解析JavaScript中循环内函数引用变量导致始终获取最后一个值的常见问题。通过对比直接返回变量与使用闭包按值传递参数的两种实现方式,详细说明了利用立即执行函数将循环变量i的值固定到内部作用域的原理,从而确保每个函数能正确返回对应的索引值。
JavaScript闭包解决循环变量引用问题
代码示例如下:
<script type="text/javascript">
function createArray() {
var arr = new Array();
for (var i = 0; i < 10; i++) {
arr[i] = function () {
return i;
}
}
return arr;
}
var funcs = createArray();
for (var i = 0; i < funcs.length; i++) {
document.write(funcs[i]() + "<br />");
}
//上述代码输出结果均为变量i的最终值(即10),共输出10个10,这并非预期行为
//原因分析:每个内部函数均引用createArray函数的活动对象,因此它们共享同一个变量i(按引用传递)
//解决策略:将按引用传递参数转换为按值传递
function createArray() {
var arr = new Array();
for (var i = 0; i < 10; i++) {
arr[i] = function (num) {
return function () {
return num;
}
} (i);//通过调用该匿名函数来返回内部匿名函数,此步骤实现了参数的按值传递
}
return arr;
}
var funcs = createArray();
for (var i = 0; i < funcs.length; i++) {
alert(funcs[i]() + "<br />");
}
//上述代码输出符合预期结果
</script>作者最新文章
JS合并多个数组的三种方法:concat、spread与flat
2026-11-05 17:39:45
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
