JavaScript的變量作用域深入理解
更新時(shí)間:2009年10月25日 11:52:47 作者:
深入理解JavaScript的變量作用域,需要的朋友可以參考下。
在學(xué)習(xí)JavaScript的變量作用域之前,我們應(yīng)當(dāng)明確幾點(diǎn):
a、JavaScript的變量作用域是基于其特有的作用域鏈的。
b、JavaScript沒(méi)有塊級(jí)作用域。
c、函數(shù)中聲明的變量在整個(gè)函數(shù)中都有定義。
1、JavaScript的作用域鏈
首先看下下面這段代碼:
<script type="text/javascript" language="javascript">
var rain = 1;
function rainman(){
var man = 2;
function inner(){
var innerVar = 4;
alert(rain);
}
inner(); //調(diào)用inner函數(shù)
}
rainman(); //調(diào)用rainman函數(shù)
</script>
觀察alert(rain);這句代碼。JavaScript首先在inner函數(shù)中查找是否定義了變量rain,如果定義了則使用inner函數(shù)中的rain變量;如果inner函數(shù)中沒(méi)有定義rain變量,JavaScript則會(huì)繼續(xù)在rainman函數(shù)中查找是否定義了rain變量,在這段代碼中rainman函數(shù)體內(nèi)沒(méi)有定義rain變量,則JavaScript引擎會(huì)繼續(xù)向上(全局對(duì)象)查找是否定義了rain;在全局對(duì)象中我們定義了rain = 1,因此最終結(jié)果會(huì)彈出'1'。
作用域鏈:JavaScript需要查詢(xún)一個(gè)變量x時(shí),首先會(huì)查找作用域鏈的第一個(gè)對(duì)象,如果以第一個(gè)對(duì)象沒(méi)有定義x變量,JavaScript會(huì)繼續(xù)查找有沒(méi)有定義x變量,如果第二個(gè)對(duì)象沒(méi)有定義則會(huì)繼續(xù)查找,以此類(lèi)推。
上面的代碼涉及到了三個(gè)作用域鏈對(duì)象,依次是:inner、rainman、window。
2、函數(shù)體內(nèi)部,局部變量的優(yōu)先級(jí)比同名的全局變量高。
<script type="text/javascript" language="javascript">
var rain = 1; //定義全局變量 rain
function check(){
var rain = 100; //定義局部變量rain
alert( rain ); //這里會(huì)彈出 100
}
check();
alert( rain ); //這里會(huì)彈出1
</script>
3、JavaScript沒(méi)有塊級(jí)作用域。
這一點(diǎn)也是JavaScript相比其它語(yǔ)言較靈活的部分。
仔細(xì)觀察下面的代碼,你會(huì)發(fā)現(xiàn)變量i、j、k作用域是相同的,他們?cè)谡麄€(gè)rain函數(shù)體內(nèi)都是全局的。
<script type="text/javascript" language="javascript">
function rainman(){
/**
* rainman函數(shù)體內(nèi)存在三個(gè)局部變量 i j k
*/
var i = 0;
if( 1 ){
var j = 0;
for( var k = 0 ; k < 3 ; k++ ){
alert( k ); //分別彈出 0 1 2
}
alert( k ); //彈出3
}
alert( j ); //彈出0
}
</script>
4、函數(shù)中聲明的變量在整個(gè)函數(shù)中都有定義。
首先觀察這段代碼。
<script type="text/javascript" language="javascript">
function rain(){
var x = 1;
function man(){
x = 100;
}
man(); //調(diào)用man
alert( x ); //這里會(huì)彈出 100
}
rain(); //調(diào)用rain
</script>
上面得代碼說(shuō)明了,變量x在整個(gè)rain函數(shù)體內(nèi)都可以使用,并可以重新賦值。由于這條規(guī)則,會(huì)產(chǎn)生“匪夷所思”的結(jié)果,觀察下面的代碼。
這是由于在函數(shù)rain內(nèi)局部變量x在整個(gè)函數(shù)體內(nèi)都有定義( var x= 'rain-man',進(jìn)行了聲明),所以在整個(gè)rain函數(shù)體內(nèi)隱藏了同名的全局變量x。這里之所以會(huì)彈出'undefined'是因?yàn)椋谝粋€(gè)執(zhí)行alert(x)時(shí),局部變量x仍未被初始化。
<script type="text/javascript" language="javascript">
var x = 1;
function rain(){
alert( x ); //彈出 'undefined',而不是1
var x = 'rain-man';
alert( x ); //彈出 'rain-man'
}
rain()
</script>
所以上面的rain函數(shù)等同于下面的函數(shù)。
function rain(){
var x;
alert( x );
x = 'rain-man';
alert( x );
}
5、未使用var關(guān)鍵字定義的變量都是全局變量。
<script type="text/javascript" language="javascript">
function rain(){
x = 100; //聲明了全局變量x并進(jìn)行賦值
}
rain();
alert( x ); //會(huì)彈出100
</script>
這也是JavaScript新手常見(jiàn)的錯(cuò)誤,無(wú)意之中留下的許多全局變量。
6、全局變量都是window對(duì)象的屬性
<script type="text/javascript" language="javascript">
var x = 100 ;
alert( window.x );//彈出100
alert(x);
</script>
等同于下面的代碼
<script type="text/javascript" language="javascript">
window.x = 100;
alert( window.x );
alert(x)
</script>
a、JavaScript的變量作用域是基于其特有的作用域鏈的。
b、JavaScript沒(méi)有塊級(jí)作用域。
c、函數(shù)中聲明的變量在整個(gè)函數(shù)中都有定義。
1、JavaScript的作用域鏈
首先看下下面這段代碼:
復(fù)制代碼 代碼如下:
<script type="text/javascript" language="javascript">
var rain = 1;
function rainman(){
var man = 2;
function inner(){
var innerVar = 4;
alert(rain);
}
inner(); //調(diào)用inner函數(shù)
}
rainman(); //調(diào)用rainman函數(shù)
</script>
觀察alert(rain);這句代碼。JavaScript首先在inner函數(shù)中查找是否定義了變量rain,如果定義了則使用inner函數(shù)中的rain變量;如果inner函數(shù)中沒(méi)有定義rain變量,JavaScript則會(huì)繼續(xù)在rainman函數(shù)中查找是否定義了rain變量,在這段代碼中rainman函數(shù)體內(nèi)沒(méi)有定義rain變量,則JavaScript引擎會(huì)繼續(xù)向上(全局對(duì)象)查找是否定義了rain;在全局對(duì)象中我們定義了rain = 1,因此最終結(jié)果會(huì)彈出'1'。
作用域鏈:JavaScript需要查詢(xún)一個(gè)變量x時(shí),首先會(huì)查找作用域鏈的第一個(gè)對(duì)象,如果以第一個(gè)對(duì)象沒(méi)有定義x變量,JavaScript會(huì)繼續(xù)查找有沒(méi)有定義x變量,如果第二個(gè)對(duì)象沒(méi)有定義則會(huì)繼續(xù)查找,以此類(lèi)推。
上面的代碼涉及到了三個(gè)作用域鏈對(duì)象,依次是:inner、rainman、window。
2、函數(shù)體內(nèi)部,局部變量的優(yōu)先級(jí)比同名的全局變量高。
復(fù)制代碼 代碼如下:
<script type="text/javascript" language="javascript">
var rain = 1; //定義全局變量 rain
function check(){
var rain = 100; //定義局部變量rain
alert( rain ); //這里會(huì)彈出 100
}
check();
alert( rain ); //這里會(huì)彈出1
</script>
3、JavaScript沒(méi)有塊級(jí)作用域。
這一點(diǎn)也是JavaScript相比其它語(yǔ)言較靈活的部分。
仔細(xì)觀察下面的代碼,你會(huì)發(fā)現(xiàn)變量i、j、k作用域是相同的,他們?cè)谡麄€(gè)rain函數(shù)體內(nèi)都是全局的。
復(fù)制代碼 代碼如下:
<script type="text/javascript" language="javascript">
function rainman(){
/**
* rainman函數(shù)體內(nèi)存在三個(gè)局部變量 i j k
*/
var i = 0;
if( 1 ){
var j = 0;
for( var k = 0 ; k < 3 ; k++ ){
alert( k ); //分別彈出 0 1 2
}
alert( k ); //彈出3
}
alert( j ); //彈出0
}
</script>
4、函數(shù)中聲明的變量在整個(gè)函數(shù)中都有定義。
首先觀察這段代碼。
復(fù)制代碼 代碼如下:
<script type="text/javascript" language="javascript">
function rain(){
var x = 1;
function man(){
x = 100;
}
man(); //調(diào)用man
alert( x ); //這里會(huì)彈出 100
}
rain(); //調(diào)用rain
</script>
上面得代碼說(shuō)明了,變量x在整個(gè)rain函數(shù)體內(nèi)都可以使用,并可以重新賦值。由于這條規(guī)則,會(huì)產(chǎn)生“匪夷所思”的結(jié)果,觀察下面的代碼。
這是由于在函數(shù)rain內(nèi)局部變量x在整個(gè)函數(shù)體內(nèi)都有定義( var x= 'rain-man',進(jìn)行了聲明),所以在整個(gè)rain函數(shù)體內(nèi)隱藏了同名的全局變量x。這里之所以會(huì)彈出'undefined'是因?yàn)椋谝粋€(gè)執(zhí)行alert(x)時(shí),局部變量x仍未被初始化。
復(fù)制代碼 代碼如下:
<script type="text/javascript" language="javascript">
var x = 1;
function rain(){
alert( x ); //彈出 'undefined',而不是1
var x = 'rain-man';
alert( x ); //彈出 'rain-man'
}
rain()
</script>
所以上面的rain函數(shù)等同于下面的函數(shù)。
復(fù)制代碼 代碼如下:
function rain(){
var x;
alert( x );
x = 'rain-man';
alert( x );
}
5、未使用var關(guān)鍵字定義的變量都是全局變量。
復(fù)制代碼 代碼如下:
<script type="text/javascript" language="javascript">
function rain(){
x = 100; //聲明了全局變量x并進(jìn)行賦值
}
rain();
alert( x ); //會(huì)彈出100
</script>
這也是JavaScript新手常見(jiàn)的錯(cuò)誤,無(wú)意之中留下的許多全局變量。
6、全局變量都是window對(duì)象的屬性
復(fù)制代碼 代碼如下:
<script type="text/javascript" language="javascript">
var x = 100 ;
alert( window.x );//彈出100
alert(x);
</script>
等同于下面的代碼
復(fù)制代碼 代碼如下:
<script type="text/javascript" language="javascript">
window.x = 100;
alert( window.x );
alert(x)
</script>
您可能感興趣的文章:
- JS中的變量作用域(console版)
- JavaScript變量作用域及內(nèi)存問(wèn)題實(shí)例分析
- JS塊級(jí)作用域和私有變量實(shí)例分析
- JavaScript變量類(lèi)型以及變量作用域詳解
- javascript 的變量、作用域和內(nèi)存問(wèn)題
- JS變量及其作用域
- js 作用域和變量詳解
- js變量以及其作用域詳解
- 關(guān)于javascript 回調(diào)函數(shù)中變量作用域的討論
- JS中作用域和變量提升(hoisting)的深入理解
- 深入Javascript函數(shù)、遞歸與閉包(執(zhí)行環(huán)境、變量對(duì)象與作用域鏈)使用詳解
- Angularjs全局變量被作用域監(jiān)聽(tīng)的正確姿勢(shì)
- JS中作用域以及變量范圍分析
相關(guān)文章
詳解關(guān)于JSON.parse()和JSON.stringify()的性能小測(cè)試
這篇文章主要介紹了詳解關(guān)于JSON.parse()和JSON.stringify()的性能小測(cè)試,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03js實(shí)現(xiàn)人民幣大寫(xiě)金額形式轉(zhuǎn)換
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)人民幣大寫(xiě)金額形式轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2016-04-04不到30行JS代碼實(shí)現(xiàn)Excel表格的方法
這篇文章主要介紹了不到30行JS代碼實(shí)現(xiàn)Excel表格的方法,實(shí)現(xiàn)方法簡(jiǎn)單易懂,非常具有實(shí)用價(jià)值,可部分代替jQuery的功能,需要的朋友可以參考下2014-11-11微信小程序?qū)崿F(xiàn)分享商品海報(bào)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)分享商品海報(bào)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09js調(diào)用打印機(jī)打印網(wǎng)頁(yè)字體總是縮小一號(hào)的解決方法
直接調(diào)用window.print(),但是打印出來(lái)后,字體總是縮小一號(hào),后來(lái)直接target="_blank",就可以正常打印了,下面是實(shí)現(xiàn)代碼2014-01-01p5.js實(shí)現(xiàn)動(dòng)態(tài)圖形臨摹
這篇文章主要為大家詳細(xì)介紹了p5.js實(shí)現(xiàn)動(dòng)態(tài)圖形臨摹,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10js鼠標(biāo)及對(duì)象坐標(biāo)控制屬性詳細(xì)解析
這篇文章主要是對(duì)js鼠標(biāo)及對(duì)象坐標(biāo)控制屬性進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12