JS全局变量和局部变量

全局变量和局部变量

在看了一个博主写的关于js全局变量的的介绍后，自己也跟着做了一下，并且记录在这里。
原博客地址：谈谈JS的全局变量跟局部变量。
博主说的比较详细，也比我的表达好。不过我的内容多了点东西，关于定义变量时不加var的影响，在文章的最后面。

先上一段代码:

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

在网页里输出结果为:undefined > 4 > 4 > 1

原因是：
全局变量a在外部被定义，可以在全局被使用，所以最后alert(a)显示的是1。而在方法内重新var a;相当于重新定义了一个局部变量a，会在这个方法内把全局变量的作用域掩盖，而js在执行之前的扫描检测机制会使得function内部的全局变量作用能力提前失效。这段代码就相当于：

<script type="text/javascript">        
        var a =1;
        function test(){
         	var a;     //相当于声明被提前了
	        alert(a); 
	        a=4;
	        alert(a); 
	        alert(a); 
    	}
    	test();
    	alert(a);
</script>

再看：

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

输出结果为：1 > 2 > 1
和java的继承有点相似，function相当于子类，会遮盖父类信息，但是如果使用super.属性依旧会看得到父类信息，这里window就像是父类。

不一样的是： java在for，if，while内定义的变量不会在他们的范围外保留，但是：

<script type="text/javascript">        
        for(var i=0;i<2;i++){
            alert(i);
        }
        alert(i)
</script>

输出结果是：0 > 1 > 2
在for循环外部，i也被保留改动了，而i是在for循环内被定义的。while和if同样如此。

还有，在定义变量时不加var

定义变量不加var,相当于在定义全局变量

<script type="text/javascript">        
        i = 2;
        function test(){
            n = 2;
            i = 3;
            alert(n);
            alert(i);
        }
        test()
        alert(n)
        alert(i)
</script>

输出结果为：2 > 3 > 2 > 3
n在function内部被定义成全局变量，所以在外部也能被访问到
但是如果在定义n时前面加上var

<script type="text/javascript">        
        i = 2;
        function test(){
            var n = 2; //加上了var
            i = 3;
            alert(n);
            alert(i);
        }
        test()
        alert(n)
        alert(i)
</script>

结果为：2 > 3
没了！最后的alert(i)被强制中断了。在控制台可以看到出现了错误：

说n没有被定义，因为在内部加上了var，就相当于在当前域定义变量，而当前域是function

那么你再猜一猜下面的结果是什么？：

<script type="text/javascript">        
            i = 2;
            function test(){
                alert(i);
                i = 3;
                alert(i);
            }
            test()
           	alert(i)
</script>

输出结果为：2 > 3 > 3
因为在内部并没有重新定义i，而唯一改变的i = 3;是在检测到i在外部定义后作出的改变，所以i不会被覆盖作用域，test()里第一个alert能够看到外部i的值。