for循环中输出同一变量值

最新推荐文章于 2024-04-18 13:33:30 发布

原创最新推荐文章于 2024-04-18 13:33:30 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#闭包

个人小总结同时被 2 个专栏收录

23 篇文章

订阅专栏

javascript

11 篇文章

订阅专栏

本文探讨了JavaScript中常见的循环结合setTimeout导致的变量污染问题，并提供了三种利用闭包解决问题的方法，包括通过参数传递、声明局部变量以及返回函数的方式。

//循环输出通一变量值
for(var i=0;i<5;i++){  console.log(i)   //0,1,2,3,4  全局
   setTimeout(function(){
       console.log(i)                   //5,5,5,5,5  内部 
   },1000);
}

为什么会产生这样的结果？

首先,这里的i属于全部变量，即函数中所获取的i。

再者，i<5时，i一直在自加，知道i=5时停止自加，然后开始执行函数，所以目前函数中i已经为5。

使用闭包解决：

//方法一：i作为参数传递至内部函数  
for(var i=0;i<5;i++){
   (function(k){
    setTimeout(function(){console.log(k)},1000)
    })(i);
}

//方法二：闭包内声明局部变量K,将i赋值给K  
for(var i=0;i<5;i++){
   (function(){
    var K = i;
    setTimeout(function(){console.log(K)},1000)
    })();
}

//方法三：闭包内返回函数
for(var i=0;i<5;i++){
    (function(){
       return function(){console.log(i)}
     })()()
}
或for(var i=0;i<5;i++){
    setTimeout((function(k){
       return function(){console.log(k)}
     })(i),1000)
}或
for(var i=0;i<5;i++){
    (function(k){
       return function(){console.log(k)}
     })(i)()
}