js for循环，为什么一定要加var定义i变量
更新时间：2010年06月25日 20:45:20 作者：
我知道，有些人（譬如之前的我）写js的for循环时，都不习惯加上var，这当然是语法允许的。
譬如下面。
for(i=0;i<10;i++){//就不写成: var i=0
alert(i);
}
但是，这真的不是个好习惯，下面我就说说为什么写Js的for循环一定要加var，否则会时不时给你带来烦人难查的bug。
譬如现在我们要实现这样的功能：输出
10
20
30
40
50
60
70
80
90
100
通过下面code实现，WriteNumber从1到10循环，每次循环调用TenTimes方法返回10倍的索引值。
<script type="text/javascript">
function WriteNumber() {
for (i = 1; i <= 10; i++) {
document.write(TenTimes(i) + "<br/>")
}
}
function TenTimes(v) {
var result = 0;
alert(i);
for (i = 1; i <= 10; i++) {
result += v;
}
return result;
}
WriteNumber();
//alert(i)
</script>
你会发现最终只输出了10。大家可以用下面的代码框运行测试。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
关于在WriteNumber和TenTimes方法里加不加var，就是说是否声明索引变量i有4种情况：
第一种情况，WriteNumber和TenTimes各有1个for循环，2个循环里均没有用var声明i索引变量。
运行结果：会alert出1。结果只输出了10，不是我们所想要的。
分析：执行WriteNumber时，其作用域内并没有找到声明过的变量i，直接对i进行赋值，则隐式的将i声明为全局变量，（对于函数内部未声明过的变量，如果给它赋值，会隐式的将它声明为全局变量。） 循环开始，i=1，调TenTimes方法，发现TenTimes方法也没有声明过变量i ，所以TenTimes里的i就是全局变量i，就和WriteNumber的i成了同一个。 这时line9 alert出来的自然是1了。TenTimes循环了10次，使得全局的i变成了11，自然WriteNumber就不会执行第2次循环操作了。
验证：如果在WriteNumber();语句后加alert(i)，即取消line16的注释，会发现alert出12（12=10+2个i++），证明了i此时为windows对象。
第二种情况，WriteNumber声明了i变量，即line3: var i=1，TenTimes未声明i变量，即line10: i=1。
运行结果：line9 alert(i)处报i未定义错误 ，因为WriteNumber有声明过变量i，所以没有成为全局的i，TenTimes执行时又没有声明过i，所以报未定义。若注释掉line9，输出结果正确。因为当TenTimes里运行到i=1时，隐式将i声明是全局变量，不影响WriteNumber里的i。WriteNumber仍然会执行10次循环。
验证：如果在WriteNumber();语句后加alert(i)，即取消line16的注释，会发现alert出11（11=10+TenTimes里的i++），证明了此时有windows.i。
第三种情况，WriteNumber没有声明i变量，即line3: i=1，TenTimes声明了i变量，即line10: var i=1。
运行结果：弹出10个undefined。因为WriteNumber未声明i，隐式将i声明是全局变量，而TenTimes有声明过变量i（补充一句，对于变量的声明都是在预编译中进行的），所以line9 alert(i)里的i不是windows.i，而是TenTimes声明的变量i，此时当然是undefined了。同时，发现输出结果正确，因为TenTimes的i不会影响WriteNumber的全局i，WriteNumber仍然是执行了10次循环。
第四种情况：WriteNumber和TenTimes均用var声明了i。
运行结果：注释掉line9，不说了，好习惯，结果当然完美。
虽然第二、三种情况输出结果是正确的，但是对i的使用很混乱，应该算是运气导致结果正确，因为刚好1个是window.i，一个是函数内部的私有变量i，使得没有冲突。
此文虽然讲的是写for循环为什么一定要加var，但其实讲的是变量的作用域(或者说变量的生命周期)。理解之后，下面的2段code运行结果你应该能准确说出答案吧。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
Ps：说道coding的好习惯，想起了这个：if(a==3) 应该写成if(3==a) 。因为我们常会把==写成1个=，如果把变量写在右边时只写了1个=，就会报编译错误，这样就能及时发现错误。
复制代码 代码如下:
for(i=0;i<10;i++){//就不写成: var i=0
alert(i);
}
但是，这真的不是个好习惯，下面我就说说为什么写Js的for循环一定要加var，否则会时不时给你带来烦人难查的bug。
譬如现在我们要实现这样的功能：输出
10
20
30
40
50
60
70
80
90
100
通过下面code实现，WriteNumber从1到10循环，每次循环调用TenTimes方法返回10倍的索引值。
复制代码 代码如下:
<script type="text/javascript">
function WriteNumber() {
for (i = 1; i <= 10; i++) {
document.write(TenTimes(i) + "<br/>")
}
}
function TenTimes(v) {
var result = 0;
alert(i);
for (i = 1; i <= 10; i++) {
result += v;
}
return result;
}
WriteNumber();
//alert(i)
</script>
你会发现最终只输出了10。大家可以用下面的代码框运行测试。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
关于在WriteNumber和TenTimes方法里加不加var，就是说是否声明索引变量i有4种情况：
第一种情况，WriteNumber和TenTimes各有1个for循环，2个循环里均没有用var声明i索引变量。
运行结果：会alert出1。结果只输出了10，不是我们所想要的。
分析：执行WriteNumber时，其作用域内并没有找到声明过的变量i，直接对i进行赋值，则隐式的将i声明为全局变量，（对于函数内部未声明过的变量，如果给它赋值，会隐式的将它声明为全局变量。） 循环开始，i=1，调TenTimes方法，发现TenTimes方法也没有声明过变量i ，所以TenTimes里的i就是全局变量i，就和WriteNumber的i成了同一个。 这时line9 alert出来的自然是1了。TenTimes循环了10次，使得全局的i变成了11，自然WriteNumber就不会执行第2次循环操作了。
验证：如果在WriteNumber();语句后加alert(i)，即取消line16的注释，会发现alert出12（12=10+2个i++），证明了i此时为windows对象。
第二种情况，WriteNumber声明了i变量，即line3: var i=1，TenTimes未声明i变量，即line10: i=1。
运行结果：line9 alert(i)处报i未定义错误 ，因为WriteNumber有声明过变量i，所以没有成为全局的i，TenTimes执行时又没有声明过i，所以报未定义。若注释掉line9，输出结果正确。因为当TenTimes里运行到i=1时，隐式将i声明是全局变量，不影响WriteNumber里的i。WriteNumber仍然会执行10次循环。
验证：如果在WriteNumber();语句后加alert(i)，即取消line16的注释，会发现alert出11（11=10+TenTimes里的i++），证明了此时有windows.i。
第三种情况，WriteNumber没有声明i变量，即line3: i=1，TenTimes声明了i变量，即line10: var i=1。
运行结果：弹出10个undefined。因为WriteNumber未声明i，隐式将i声明是全局变量，而TenTimes有声明过变量i（补充一句，对于变量的声明都是在预编译中进行的），所以line9 alert(i)里的i不是windows.i，而是TenTimes声明的变量i，此时当然是undefined了。同时，发现输出结果正确，因为TenTimes的i不会影响WriteNumber的全局i，WriteNumber仍然是执行了10次循环。
第四种情况：WriteNumber和TenTimes均用var声明了i。
运行结果：注释掉line9，不说了，好习惯，结果当然完美。
虽然第二、三种情况输出结果是正确的，但是对i的使用很混乱，应该算是运气导致结果正确，因为刚好1个是window.i，一个是函数内部的私有变量i，使得没有冲突。
此文虽然讲的是写for循环为什么一定要加var，但其实讲的是变量的作用域(或者说变量的生命周期)。理解之后，下面的2段code运行结果你应该能准确说出答案吧。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
Ps：说道coding的好习惯，想起了这个：if(a==3) 应该写成if(3==a) 。因为我们常会把==写成1个=，如果把变量写在右边时只写了1个=，就会报编译错误，这样就能及时发现错误。
相关文章
Canvas对于我们前端来说是一个非常强大的工具,它可以实现各种复杂的图形和动画效果,我们如果能够熟练掌握它,我们就可以做很多炫酷的效果,本文就给大家介绍了用canvas画出一片星空的方法,需要的朋友可以参考下2023-11-11
生成html静态文件后的分页（客户端版）...2006-07-07
这篇文章主要介绍了javascript实现搜索框点击文字消失失焦时文本出现的效果，示例代码如下，大家可以看看2014-09-09
在向服务器发送数据时一般是字符串,我们可以使用 JSON.stringify()方法将JavaScript对象转换为字符串,下面这篇文章主要给大家介绍了关于JSON.stringify及灵活运用的相关资料,需要的朋友可以参考下2022-03-03
实现javascript 英文首字母大写有多种方法,下面这篇文章主要给大家介绍了关于js算法实例之字母大小写转换的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要给大家介绍了关于如何使用less实现随机下雪动画的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
这篇文章主要为大家详细介绍了ionic隐藏tabs的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要为大家详细介绍了javascript实现京东登录显示隐藏密码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
下面小编就为大家带来一篇javascript输出AscII码扩展集中的字符方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-12-12
这篇文章主要为大家详细介绍了javascript实现好看的可复用弹窗插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
最新评论