关于javascript函数的小问题。

问题描述

问 题

 <script type="text/javascript">     
        var fnArr = [];
        for (var i = 0; i < 10; i ++) {
             var fn=function(){

                 return console.log(fn);
             }
             fn.index=i;
             fnArr[i]=fn;
        }
        console.log( fnArr[2]());  //
     </script>

如上代码，当我打印这个fn的时候，我用火狐开发工具查看了一下当前函数的index，发现当前函数的index值为9，如下图

当我打印整个数组fnArr的时候会发现他的函数每一个的值等于他的index数值。

问题是为什么执行fnArr[2]()的时候当前函数的index变成了9？

解决方案

1.JS的变量是没有代码块级作用域的，只有函数作用域
2.变量的作用域在函数声明的时候确定，而非执行时，这就是词法作用域的概念
那么问题的代码:

var fnArr = [];
for (var i = 0; i < 10; i ++) {
     var fn=function(){

         return console.log(fn);
     }
     fn.index=i;
     fnArr[i]=fn;
}
console.log( fnArr[2]());  //

等价于=>

var fnArr = [];
var fn;//A
var i;//B
for (i = 0; i < 10; i ++) {
     fn=function(){//C
         console.log(fn.index);//D
     }
     fn.index=i;
     fnArr[i]=fn;
}
console.log( fnArr[2]()); //

那么就意味着C处声明的匿名函数中的变量fn作用域不会发生变化，还是绑定的A处声明的变量，指向始终是for循环后的最后一次赋值的fn函数对象，执行D后输出的fn对象的index都是同一个值9

如果想要保持index和循环时的值对应，可以这样修改：

var fnArr = [];
var fn;//A
var i;//B
for (i = 0; i < 10; i ++) {
     fn=function fnInner(){//C
         console.log(fnInner.index);//D
     }
     fn.index=i;
     fnArr[i]=fn;
}
console.log( fnArr[2]()); //

为赋值的匿名函数声明一个名字，同时在函数体内引用这个函数名-作为函数对象的变量
或者

var fnArr = [];
var fn;//A
var i;//B
for (i = 0; i < 10; i ++) {
     (function(index){
         var fn=function(){//C
             console.log(fn.index);//D
         }
         fn.index=index;
         fnArr[index]=fn;
     }(i));
}
console.log( fnArr[2]()); //

匿名自执行函数构成自己的一个独立作用域，其中的fn和A处声明的fn没有任何关系

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