2

for循环:

 for (var i=1; i<=5; i++) {
   setTimeout( function timer() {
     console.log( i );
   }, i*1000 );
}

/* 控制台打印:
    6
    6
    6
    6
    6
    6
 */
    

但是我们希望的结果是:

1
2
3
4
5

原因是,延迟函数的回调会在循环结束时才执行。当定时器运行时即使每个迭代中执行的是setTimeout(.., 0),所有的回调函数依然是在循环结束后才会被执行,因此会每次输出一个6 出来。

我们改写一下:

 for (var i=1; i<=5; i++) {
  (function() {
     setTimeout( function timer() {
        console.log( i );
     }, i*1000 );
   })();
}
/*
    6
    6
    6
    6
    6
*/

原因:如果作用域是空的,那么仅仅将它们进行封闭是不够的。它需要包含一点实质内容才能为我们所用。它需要有自己的变量,用来在每个迭代中储存i 的值:

继续改写:

 for (var i=1; i<=5; i++) {
    (function() {
        var j = i;//保存外部变量
        setTimeout( function timer() {
            console.log( j );
        }, j*1000 );
    })();
}
/*
    1
    2
    3
    4
    5
*/
//代码改进:(将i当参数传进去)
 for (var i=1; i<=5; i++) {
    (function(j) {
        setTimeout( function timer() {
            console.log( j );
        }, j*1000 );
    })( i );
}

总结

当函数可以记住并访问所在的词法作用域,即使函数是在当前词法作用域之外执行,这时
就产生了闭包。

平平不平
343 声望18 粉丝

下一篇 »
箭头函数