下面有一段代码,不太明白这样写的原理和js含义

代码如下:

1 var a = [];
2 for (var i = 0; i < 10; i++) {
3   a[i] = function () {
4      console.log(i);
5   };
6 }
7 a[6](); //

在单步的时候,是从第1行开始,下面进入循环第2、3行,然后这样2、3行循环,直到i=10时执行7、4、5行,整个代码执行结束,输出10
问题1:第7行的写法是什么含义?一般都用于什么场景
问题2:为什么会先执行7行,后执行4、5行,且4、5行只执行一次

阅读 1.8k
2 个回答

问题1 : a[6]()相当于函数调用
问题2 : 4,5行只是声明了函数没有调用,到了第10行执行a[6]()相当于函数调用,所以执行了4,5行

看了楼上的回答感觉缺少点什么,我来补充点。
这个代码好多地方是故弄玄虚,其实就是 JS之经典for循环闭包问题

var a = []; // 声明一个数字
for (var i = 0; i < 10; i++) {
    // 生成数组里面的成员
    a[i] = function () {
        console.log(i);
    };
}
console.log(i) // 10
console.log(a) // 里面有十个匿名函数
console.log(a[6]) // 一个匿名函数
a[6](); // 执行函数

我们由上而下执行代码:

代码第2行的 for 循环的中是给数组 a 添加成员

// 向数组添加元素的一个方法:
var arr = [];
arr[0] = 100;
arr[1] = 200;
console.log(arr) // [100, 200] 

所以经过十次循环后 a 现在里面是什么呢? 如下图

clipboard.png

那请问 i 是多少呢? i 是代码的第2行 for 里面声明的,但 for 不是作用域环境,所以声明的 i 其实是全局函数

就像这样。
var i;
for (i = 0; i < 10; i++ ) {
    ......
}

那么通循环后 i 的 值已经是 10

那么到 a[6]() 这一行了,其实就是数组执行数组 a 的第7个元素,当然恰巧这个元素是个 function

a[6] 是什么呢?(其实a的10个元素里面都是一样的代码)

clipboard.png

a[6]() //等于下面

function() {
    console.log(i) // 输出这个全局函数 i 的值而已
}()

说的有点唠叨,但是感觉上个回答比较笼统,所以多说见谅。

至于你的说应用场景,不好说,面试题算一个。:)
下面链接大同小异,有的简单有的详细,可以认真看看,就明白我说的了。

JS中for循环里面的闭包问题的原因及解决办法
JS之经典for循环闭包问题解决方法
用9种办法解决 JS 闭包经典面试题之 for 循环取 i

推荐问题
宣传栏