对JS变量作用域的通俗理解-优快云博客

本文通过一个JavaScript示例代码详细解析了变量的作用域问题，包括局部变量与全局变量的区别、变量提升现象及函数内部对外部变量的访问情况。

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>New Page</title>
</head>
<body>
<div id="code">
<pre>
<SCRIPT LANGUAGE="JavaScript">
var d=e2='对于d和e2,加不加var都是全局,这一层已经是顶层了';
function $(id){return document.getElementById(id);}
function test()
{
    var a='我是test()这一层定义的a,对于我以下的级别的,我仍是老大全局,但对上就不敢了';
    g='我是这一层的g.会和谐下一级重名的变量';
    return function(){
        var b='加var的b就悲剧了,是私有变量了';
        c='不加var的c果然是牛X全局';
        a+='//是的,你是我这一级的老大';
        var g='我是这一层的私有g,可惜重名会被和谐';
        $('info').innerHTML+='⑧'+a+'<br/>';
    }
}
test()();
try{$('info').innerHTML+=a+'<br/>';}catch (e){$('info').innerHTML+='①外围引用a报错:'+e.message+'<br/>';}
try{$('info').innerHTML+=b+'<br/>';}catch (e){$('info').innerHTML+='②外围引用b报错:'+e.message+'<br/>';}
$('info').innerHTML+='③'+c+'<br/>';
$('info').innerHTML+='④'+d+'<br/>';
$('info').innerHTML+='⑤'+e+'//这个e也是没加var是全局<br/>';
$('info').innerHTML+='⑥'+e2+'<br/>';
$('info').innerHTML+='⑦'+g+'<br/>';
</SCRIPT>
</pre>
</div>
<div>执行结果如下:</div>
<div id="info"></div>
<SCRIPT LANGUAGE="JavaScript">
var d=e2='对于d和e2,加不加var都是全局,这一层已经是顶层了';
function $(id){return document.getElementById(id);}
function test()
{
    var a='我是test()这一层定义的a,对于我以下的级别的,我仍是老大全局,但对上就不敢了';
    g='我是这一层的g.会和谐下一级重名的变量';
    return function(){
        var b='加var的b就悲剧了,是私有变量了';
        c='不加var的c果然是牛X全局';
        a+='//是的,你是我这一级的老大';
        var g='我是这一层的私有g,可惜重名会被和谐';
        $('info').innerHTML+='⑧'+a+'<br/>';
    }
}
test()();
try
{
    $('info').innerHTML+=a+'<br/>';
}
catch (e)
{
    $('info').innerHTML+='①外围引用a报错:'+e.message+'<br/>';
}
try
{
    $('info').innerHTML+=b+'<br/>';
}
catch (e)
{
    $('info').innerHTML+='②外围引用b报错:'+e.message+'<br/>';
}

$('info').innerHTML+='③'+c+'<br/>';
$('info').innerHTML+='④'+d+'<br/>';
$('info').innerHTML+='⑤'+e+'//这个e也是没加var是全局<br/>';
$('info').innerHTML+='⑥'+e2+'<br/>';
$('info').innerHTML+='⑦'+g+'<br/>';
</SCRIPT>
</body>
</html>

转载于:https://www.cnblogs.com/lishenglyx/archive/2010/05/19/1738883.html