这样理解JavaScript变量作用域更轻松

变量作用域是每门编程语言都会涉及的话题，也是作为一名程序员必需掌握的知识点，能深入掌握变量作用域更有助于你编写稳定的程序。JavaScript本身作为一门简单的语言，就其变量作用域问题一样令不少人头晕，这主要是因为JavaScript闭包的存在。本文不打算深入讲解JavaScript变量作用域问题（其实本人也没有能力能把这一话题讲的深入些），也不讲“闭包”话题，本文只讨论最实用的JavaScript作用域知识点。

一、JavaScript作用域分类

JavaScript就两种作用域：全局（window）、函数级（function）。函数级（function）不要理解为“块级（大括号{}级）”。

二、区分及定义JavaScript全局变量与局部变量

1.1定义在所有函数最外边，使用或不使用var关键字定义的变量都是全局变量。全局变量其实被解析成window对象的一个属性，所以我们可以以“window.全局变量名”方式访问它，推荐在没有必要的情况下直接使用变量名访问。如下例子演示了全局变量定义最常见的方法：

var msg1='This is message 1';
msg2='This is message 2';
alert(window.msg1); //This is message 1 使用window关键字进行访问
alert(window.msg2); //This is message 2
alert(msg1); //This is message 1 省略window关键字的访问方式
alert(msg2); //This is message 2
function otherFunction(){} //其它一些函数或对象声明代码
var otherObject={};

1.2在函数内（局部变量运行时环境）一样可以定义和获取全局变量。定义的方法就是不使用var关键字，而在局部环境中亦可轻松获得全局变量内容，直接使用全局变量名引用即可。需要注意的是：如果函数内定义了与全局变量同名的局部变量，那么此时函数体将优先使用自己的局部变量，如果此时你非要使用同名的全局变量，请加上window前缀。举例如下：

var msg1='This is message 1';
var msg3='This is message 3';
function otherFunction()
{
    msg2='This is message 2'; //不使用var关键字，其实也是定义一个全局变量
    var msg3='Message 3';
    alert(msg1); //This is message 1 （函数内当然可以访问到外面定义的全局变量，再深的函数嵌套一样能正确获到这个全局变量，这是JavaScript闭包的其中一种体现）
    alert(msg3); //Message 3 （局部变量msg3）
    alert(window.msg3); //This is message 3 （使用window前缀访问同名的全局变量msg3）
    alert(this.msg3); //This is message 3 （因为otherFunction ()定义在一个全局的环境中，此时otherFunction ()的this也是指向window，所有你看到window. msg3是等于this. msg3的）
}
otherFunction();
//otherFunction函数外面定义的msg1和里面定义的msg2依然是全局变量
alert(window.msg1); //This is message 1
alert(window.msg2); //This is message 2

2.1使用var关键字，在函数体内定义的变量是局部变量，此变量能供其下面所有语句块（{}）及子函数使用。这个变量在这个函数里任何地方都可以访问到，但却不能在这个函数的外面“直接”访问（闭包允许间接访问，或代理访问，此知识点不在本文讨论范围）。举例如下：

function showMsg()
{
    if (true)
    {
        var msg='This is message';
    }
    alert(msg); //This is message
}
showMsg();
alert(typeof(msg)); //undefiend
//这里在if {}大括号内定义的变量msg还能在if外showMsg()内访问到，但在showMsg()外则是无法访问的

2.2父函数的变量可以被子函数访问，但子函数的变量却不能被父函数访问，显然这与我们一开始说的函数级作用域是相吻合的。这看起来老爸爽快些，儿子吝啬些。举例如下：

function showMsg()
{
    var MsgA='Message A';
    this.setMsg=function(msg)
    {
        var MsgB='Message B';
        alert(MsgA); //Message A （子函数setMsg()可以访问父函数showMsg()的局部变量MsgA）
    }
    alert(MsgB); //MsgB未定义 （在父函数中不能访问其子函数中定义的变量MsgB）
}
var sm=new showMsg();
sm.setMsg('Message string');

三、需要注意的几个地方及使用技巧

1、为了避免变量混乱或被覆盖，对于局部变量的定义一定不要忘记加上var关键字（必要时我们要变量使用完后主动释放它，即“变量名=null”），同时建议把所有变量集中定义在每个函数体内的开头位置。举例如下：

var msg='Message';
function showMsg()
{
    var msg; //这里即使不小心使用了与全局变量一样的变量名，也不用担心覆盖同名全局变量的问题
    var a;
    var b;
    var c;
    for (a=0;a<10;a++){}
    this.setMsg=function(){}
}

2、巧用匿名函数，减少命名冲突或变量污染。如下两段代码其实实现了相同的功能，而第一段代码写法自己可以在那个匿名函数内大胆用自己想用的变量名等，不用担心自己定义的变量覆盖其他人定义或自己其它地方定义的变量。

//定义一个匿名函数，然后把代码丢到这个匿名函数里面，能有效减少命名冲突或变量污染，这是常见JS框架的做法
(function()
{
    var msg='This is message';
    alert(msg);
})();
document.write(msg); //msg未定义 （匿名函数外的其它方法已无法调用msg这个变量）
//-----------------------------
var msg='This is message';
alert(msg);

3、不建议在无须实例化的函数内使用this代替window去访问全局变量。一般情况使用this关键字的函数应当作为JavaScript类来处理（我喜欢把“cls”作为类名的前缀）。以下函数如果仅当作普通函数调用一下，就不应该出现this关键字，因为这通常是去操作一个全局变量了。例子：

function clsMsg()
{
    this.msg='This is default message';
    this.showMsg=function()
    {
        alert(this.msg);
    }
}
sMsg=new clsMsg();
sMsg.msg='This is new message';
sMsg.showMsg();

四、相关知识点指引

理解以下相关知识点有助于你更好地认识JavaScript变量作用域，本文暂不详述，随后会以单独篇幅来讲，敬请关注。

（1）理解JavaScript“预解析”
（2）JavaScript闭包