今天在写个一段js代码出现了变量值出现异常的问题,把代码做了提取,简单的如下面
<script>
function a1(){
var a = [{"name":"1"},{"name":"2"},{"name":"3"}];
for(i=0;i<a.length;i++){
alert(i+" first");
a2(a[i]);
alert(i+" second");
}
}
function a2(obj){
for (i in obj) {
}
return "hello";
}
</script>
<body onload="a1();">
在第一次alert(i)是 0 first
在第二次alert(i)是 name second
为什么会出现这样的情况,明明在a2函数传进去的是实参,并且也没有对参数a[i]进行改写
在反复查看问题后发现是i变量的问题,在函数a1()中,i被定义成为了全局变量,而在函数a2()中,i又是一个全局变量,所以在a2的for (i in obj) 循环中i被重新赋值成"name"
这个乌龙是没有养成在一些临时函数定义成局部变量造成的,特别是在一些for,while,if的操作中,临时变量必须定义成局部变量否则会出现全局变量被改写的情况。
再回顾一下定义全局变量/局部变量的规则
在函数外部,使用var,或直接使用变量,如var a=1;或 a=1; 就定义了全局变量
在函数内部,直接使用变量,如a=1;也定义了全局变量
在函数内部,使用var进行定义就是局部变量
修改一下上面的代码
<script>
function a1(){
var a = [{"name":"1"},{"name":"2"},{"name":"3"}];
for(var i=0;i<a.length;i++){
alert(i+" first");
a2(a[i]);
alert(i+" second");
}
}
function a2(obj){
for (var i in obj) {
}
return "hello";
}
</script>
<body onload="a1();">