JavaScript 声明全局变量和局部变量

Question

变量和变量声明是一门语言最基础的知识，我们学习语言一看是就会接触到，如何声明变量很简单，也就是 var（关键字）+ 变量名(标识符)，但是作用域就比较复杂了。

变量的作用域

简单来说变量的作用域就是你定义的变量可以使用的代码范围，一般都分为全局变量和局部变量。

• 全局变量：在类里定义（非方法里）的变量，那么在这个类中都可以使用。
• 局部变量：在方法中定义的变量，这个变量一旦出了这个方法，就不能用了。

其他的还有static变量 这个可以用类名直接来用，普通的类变量要用类对象来调用，final变量就是赋值后不能改变。

JavaScript 中的变量

JavaScript虽然说是弱语法语言，但是也遵循一般语言的语法。

声明变量的方法

var test;
var test = 5;

需注意的是该句不能包含在function内，否则是局部变量。这是第一种方式声明全局变量。

test = 5;

没有使用var，直接给标识符test赋值，这样会隐式的声明了全局变量test。即使该语句是在一个function内，当该function被执行后test变成了全局变量。

window.test;
window.test = 5;

这种方式经常被用到一个匿名函数执行后将一些函数公开到全局。 如JQuery1.5中最末一句

window.jQuery = window.$ = jQuery;

三种方法的区别

如果只是使用变量test，那么三种方式将没有什么区别。比如：alert(test) 都将显示5。但三种方式在某些情况下还是有区别的。分别按以上三种方式声明三个变量a1、a2、a3。

a1 = 11;
var a2 = 22;
window.a3 = 33;

for in window

for(a in window){
    if(a=='a1'||a=='a2'||a=='a3'){
        alert(a)
    }
}

IE6/7/8/9：只弹出了a3，说明通过第一，二种方式声明的全局变量通过 for in window 时将获取不到。

Firefox/Chrome/Safari/Opera ：a1,a2,a3 都弹出了，说明三种方式声明的全局变量，通过 for in window 时都能获取到。

delete

try {
    alert(delete a1);
}catch(e){alert('无法delete a1')}
try{
    alert(delete a2);
}catch(e){alert('无法delete a2')}
try{
    alert(delete a3);
}catch(e){alert('无法delete a3')}

结果如下

	IE6/7/8/9	Firefox/Chrome/Safari/Opera
Windows a1	true	true
Windows a2	false	false
Windows a3	无法delete a3	true

可以看到

1、delete a2 所有浏览器都是 false。即通过 var 声明的变量无法删除，所有浏览器表现一致。这在犀牛书上也有提到。
2、通过 window.a3 方式声明的全局变量在 IE6/7/8 中均无法删除，IE9/Firefox/Chrome/Safari/Opera 中却可以。

虽然有以上两点不同，但当用 in 运算时，都返回 true。

alert('a1' in window);//true
alert('a2' in window);//true
alert('a3' in window);//true

用 with 打开对象 window 闭包时，所有浏览器也表现一致，代码如下

with(window){
    if(a1){
        alert(a1);//11
    }
    if(a2){
        alert(a2);//22
    }
    if(a3){
        alert(a3);//33
    }  
}