js关于for循环中的闭包问题

本文通过一个具体的JavaScript代码示例,详细解释了JavaScript中闭包的概念以及变量作用域的工作原理。阐述了循环中使用闭包导致的所有函数共享相同变量i的现象。

因为js没有块级作用域for循环的循环体不是一个作用域你的第一段代码等效于以下展开

var arr=[];
var i=0;

arr.push(function(){console.log(i);});
i++;
arr.push(function(){console.log(i);});
i++;
arr.push(function(){console.log(i);});
i++;
arr.push(function(){console.log(i);});
i++;

arr[0]();
arr[3]();

arr[0]~arr[3]里保存的都是一个匿名函数function(){console.log(i)},这四个匿名函数共享同一个上下文环境。匿名函数引用上下文环境中的变量i,所以当arr[x]执行的时候,匿名函数从上下文环境中取得i的值并输出。arr[x]执行的时候上下文环境中的i是什么,就会输出什么。

about https://www.jianshu.com/p/59bc4e1ea7cb

在 JavaScript 中,for 循环里使用 setTimeout 会出现闭包问题。以如下代码为例: ```javascript for(var i = 0; i < 4 ; i++){ setTimeout(function(){ console.log(i) }, i * 1000); } ``` 这里的问题在于,`setTimeout` 是异步执行的,当循环执行时,`setTimeout` 中的回调函数会被放入任务队列,等待当前调用栈清空后执行。而 `var` 声明的变量是函数作用域,循环结束时,`i` 的值已经变为 4,所以当 `setTimeout` 的回调函数执行时,输出的 `i` 都是 4 [^1]。 针对这个问题,有以下几种解决方案: 1. **使用闭包**:通过闭包将 `i` 的变量驻留在内存中,当输出 `j` 时,引用的是部函数的变量值 `i`,`i` 的值是根据循环来的,执行 `setTimeout` 时已经确定了里面的输出。示例代码如下: ```javascript for (var i=1; i<=5; i++) { (function(j) { setTimeout( function timer() { console.log( j ); }, j*1000 ); })(i); } ``` 在这个代码中,每次循环都会创建一个新的函数作用域,将当前的 `i` 值传递给 `j`,从而保证每个 `setTimeout` 回调函数都能获取到正确的 `i` 值 [^2][^3]。 2. **拆分结构**:将 `setTimeout` 封装在一个函数中,每次循环调用该函数并传递 `i` 的值。示例代码如下: ```javascript function timer(i) { setTimeout(function() { console.log( i ); }, i*1000 ); } for (var i=1; i<=5;i++) { timer(i); } ``` 这样每个 `timer` 函数调用都会有自己的 `i` 值副本 [^3]。 3. **使用 `let` 声明变量**:`let` 声明的变量具有块级作用域,每次循环都会创建一个新的变量副本。示例代码如下: ```javascript for (let i=1; i<=5; i++) { setTimeout( function timer() { console.log( i ); }, i*1000 ); } ``` 由于 `let` 的块级作用域特性,每个 `setTimeout` 回调函数都能获取到正确的 `i` 值 [^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值