关于javascript函数的小问题。-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

关于javascript函数的小问题。

ringa_lee 2017-04-11 09:01:52

[JavaScript讨论组]

208

 <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？

ringa_lee

全部回复(4)

PHPz2017-04-11 09:03:52 4楼

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没有任何关系

赞 +0

添加回复

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

js 只有函数作用域，因此只有一个变量的名字叫做 fn，
虽然 fnArr 里面是10个不同的但是代码一样的函数，但是这些不同函数都引用了一个叫做 fn 的全局变量，那么这一个全局变量就只有一个值。你写的是console.log(fn) 而不是 console.log(argument.callee)

赞 +0

添加回复