JavaScript函数作用域问题-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

JavaScript函数作用域问题

PHP中文网 2017-04-11 12:01:52

[JavaScript讨论组]

376

    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

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

PHP中文网

认证0级讲师

全部回复(3)

高洛峰2017-04-11 12:03:52 3楼

第一个是闭包，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
后面的就跟前面差不多了，不再解释

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

赞 +0

添加回复

大家讲道理2017-04-11 12:03:52 2楼

不能说这和函数作用域无关，闭包不就是基于函数作用域而来的嘛。
第一种形式如 @小石头若海所说函数引用的i是全局作用域下的i而第二种形式确实把i传入一个匿名函数，这是函数里面的i不再是全局作用域下的i，而是当前匿名函数作用域的i了。所以结果不同。

赞 +0

添加回复

伊谢尔伦2017-04-11 12:03:52 1楼

把第二种情况改写成这样

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

你是否就能理解？
ps:闭包和匿名函数即便是有经验的程序员也经常混用，闭包指的是有权访问另一个函数作用域变量的函数，这里的关键就在于作用域链，立即执行函数是解析到就执行的，而匿名函数只会分配一个指向该函数的指针。

赞 +0

添加回复