JavaScript函数作用域问题

问题描述

问 题

    var loop1, loop2, loop3, loop4, loop5;
    for (var i = 0; i <= 5; i++) {
        switch(i) {
            case 1:
                loop1 = function() { console.log(i++); };
                break;
            case 2:
                loop2 = function() { console.log(i++); };
                break;
            case 3:
                loop3 = function() { console.log(i++); };
                break;
            case 4:
                loop4 = function() { console.log(i++); };
                break;
            case 5:
                loop5 = function() { console.log(i++); };
                break;
            default:
                break;
        }
    }
    loop1();        //6
    loop2();        //7    
    loop3();        //8
    loop4();        //9
    loop5();        //10

    for (var i = 0; i <= 5; i++) {
        (function(i) {
            switch(i) {
                case 1:
                    loop1 = function() { console.log(i++); };
                    break;
                case 2:
                    loop2 = function() { console.log(i++); };
                    break;
                case 3:
                    loop3 = function() { console.log(i++); };
                    break;
                case 4:
                    loop4 = function() { console.log(i++); };
                    break;
                case 5:
                    loop5 = function() { console.log(i++); };
                    break;
                default:
                    break;
            }
        })(i);
    }
    loop1();        //1
    loop2();        //2
    loop3();        //3
    loop4();        //4
    loop5();        //5

关于函数的作用于问题，为什么会发生这种情况？

解决方案

第一个是闭包，loop1,loop2,loop3,loop4,loop5中的变量引用的变量i其实是同一个，都是父function（这里应该是全局作用域）中的i。
注意：它们引用的是同一个变量，都是循环中的那个i。
所以当for循环结束的时候，i已经是6了；
所以调用loop1的时候，又因为输出的是i++（++在后，先引用，后加），即输出6，但i已经是7了；
后面依此类推，分别输出7,8,9,10.

第二个是匿名函数自执行，要注意跟第一个的区别。匿名函数自执行的方式可以看到，变量i以形参的形式传递到匿名函数内部了，所以在这个匿名函数中用到的i就不再是父function中的变量i了，完全是不同的两个。而且由于匿名函数自执行的原因，5个loop分别引用的也是各自的i，互不相关。
注意：它们引用的不再是同一个变量，不再是循环中的那个i
后面的就跟前面差不多了，不再解释

这个题目考的是闭包，可以查看闭包的相关资料。

这篇关于JavaScript函数作用域问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！