现在的位置: 首页 > 综合 > 正文

对JS变量作用域的通俗理解

2012年05月01日 ⁄ 综合 ⁄ 共 2033字 ⁄ 字号 评论关闭
代码
<!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>
&lt;SCRIPT LANGUAGE="JavaScript"&gt;
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+'
&lt;br/&gt;';    
    }
}
test()();
try{$('info').innerHTML+=a+'
&lt;br/&gt;';}catch (e){$('info').innerHTML+='①外围引用a报错:'+e.message+'&lt;br/&gt;';}
try{$('info').innerHTML+=b+'
&lt;br/&gt;';}catch (e){$('info').innerHTML+='②外围引用b报错:'+e.message+'&lt;br/&gt;';}
$('info').innerHTML+='③'+c+'
&lt;br/&gt;';
$('info').innerHTML+='④'+d+'
&lt;br/&gt;';
$('info').innerHTML+='⑤'+e+'//这个e也是没加var是全局
&lt;br/&gt;';
$('info').innerHTML+='⑥'+e2+'
&lt;br/&gt;';
$('info').innerHTML+='⑦'+g+'
&lt;br/&gt;';
&lt;/SCRIPT&gt;
</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>

抱歉!评论已关闭.