js for循环,为什么一定要加var定义i变量

我知道,有些人(譬如之前的我)写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倍的索引值。 

1 <script type="text/javascript">
2 function WriteNumber() {
3 for (i = 1; i <= 10; i++) {
4 document.write(TenTimes(i) + "<br/>")
5 }
6 }
7 function TenTimes(v) {
8 var result = 0;
9 alert(i);
10   for (i = 1; i <= 10; i++) {
11 result += v;
12 }
13 return result;
14 }
15 WriteNumber();
16 //alert(i)
17   </script>

  你会发现最终只输出了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>

  关于在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运行结果你应该能准确说出答案吧。

<script type="text/javascript">
var a = 1;
function f() {
alert(a);
var a = 2;
}
f();
</script>

<script type="text/javascript">
var a = 1;
function f() {
a = 2;
alert(a);
}
f();
alert(a);
</script>

  Ps:说道coding的好习惯,想起了这个:if(a==3) 应该写成if(3==a) 。因为我们常会把==写成1个=,如果把变量写在右边时只写了1个=,就会报编译错误,这样就能及时发现错误。

时间: 2024-11-08 20:08:51

js for循环,为什么一定要加var定义i变量的相关文章

经典面试题,循环中使用闭包解决 var 定义函数的问题--闭包

闭包的定义很简单:函数 A 返回了一个函数 B,并且函数 B 中使用了函数 A 的变量,函数 B 就被称为闭包. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>var定义函数出现的问题</title></head><body><script type="text/ja

JS中的块级作用域,var、let、const三者的区别

1. 块作用域{ } <script type="text/javascript"> { var a = 1; console.log(a); // 1 } console.log(a); // 1 // 可见,通过var定义的变量可以跨块作用域访问到. (function A() { var b = 2; console.log(b); // 2 })(); // console.log(b); // 报错, // 可见,通过var定义的变量不能跨函数作用域访问到 if(

let 和 var 定义变量的区别

一.变量提升 var 存在变量提升,而 let 不存在变量提升,所以用 let 定义的变量一定要在声明后再使用,否则会报错. var //var定义的变量存在变量提升,变量会把声明提升到整个作用域的最前面 //例子1 console.log(a); //undefined var c=10; //等价于 var c; console.log(a); //undefined c=10; /*------------------------*/ //例子2 var a=100; function f

js中定义变量加var与不加var的区别?

var 不一定是用来定义局部变量的 jscript的全局变量和局部变量的分界是这样的: 过程体(包括方法function,对象Object o ={})外的所有变量不管你有没有加var保留字,他都是全局变量 过程体内(包括方法function(){},对象Object o={})内的对象加var保留字则为局部变量,而不加var保留字即为全局变量 即:只要在过程体外,都是全局变量,在过程体内加var 为局部变量 不加为全局变量 js的全局作用域应该是在看着办的的范围内,不一定是同一个页面,比如说在

js中加“var”和不加“var”的区别

Javascript声明变量的时候,虽然用var关键字声明和不用关键字声明,很多时候运行并没有问题,但是这两种方式还是有区别的.可以正常运行的代码并不代表是合适的代码. 1.都加var,在方法内则是局部变量,在方法外则是全局变量. 2.都不加var,全是全局变量. 3.在方法内,加var为局部变量,不加var则是全局变量(在执行当前方法之后). var num1 = 1: 是在当前域中声明变量. 如果在方法中声明,则为局部变量(local variable):如果是在全局域中声明,则为全局变量(

angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所有模块需要引用到的js都引入.对于比较小的项目,这是可行的,但是对于大的项目,一旦js文件较多,在页面首次加载时就引入所有js文件,无疑会延缓页面加载的速度,造成不良额用户体验.那么分布加载(按需加载)就显得很有必要了. <!DOCTYPE html> <html lang="en

Node.js的循环与异步问题

Node.js 的异步机制由事件和回调函数实现,一开始接触可能会感觉违反常规,但习惯 以后就会发现还是很简单的.然而这之中其实暗藏了不少陷阱,一个很容易遇到的问题就是 循环中的回调函数,初学者经常容易陷入这个圈套.让我们从一个例子开始说明这个问题. var fs = require('fs'); var files = ['a.txt', 'b.txt', 'c.txt']; for (var i = 0; i < files.length; i++) { fs.readFile(files[i

[Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏

前言 Load Mask(遮罩)效果,就是在页面还没有完全显示出来之前, 加上一个转装转的效果. 类似: 添加这样的效果有两个好处: 1. 在页面没完全show出来之前, 把后面的页面给遮罩起来, 防止进行一些非法的操作. 2. 如果页面show出来的时间比较长的话, 可以暂时吸引用户的注意力(也就是提高 User Experience). 在Extjs 中, Ext js 的使用方式有多种. 你有可能会发现为什么有的状况下load mask 不出现?  且听下面一一道来... JsonStor

easyui日期在未加载easyui-lang-zh_CN.js出现英文的情况下加载中文的方法

我们有时候在操作easyui的时候本来是加载了easyui-lang-zh_CN.js中文文件包,但是还是出现了英文.使得我们不得埋怨这框架咋这么不好用,其实我们仔细看看这个中文包就会发现里面很多都是重新修改了定义语言的参数.假如我们用jquery初始化加载方法$(function(){//这里是我们自定义的操作方法});这个方法里面的东西执行后发现更本没加载我们的中文下面是我写的datetimebox日期控件js代码: $(function () { function adddaytimes(