深入解析JavaScript中的變量作用域
在學(xué)習(xí)JavaScript的變量作用域之前,我們應(yīng)當(dāng)明確幾點:
•JavaScript的變量作用域是基于其特有的作用域鏈的。
•JavaScript沒有塊級作用域。
•函數(shù)中聲明的變量在整個函數(shù)中都有定義。
1、JavaScript的作用域鏈
首先看下下面這段代碼:
<script type="text/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ù)中沒有定義rain變量,JavaScript則會繼續(xù)在rainman函數(shù)中查找是否定義了rain變量,在這段代碼中rainman函數(shù)體內(nèi)沒有定義rain變量,則JavaScript引擎會繼續(xù)向上(全局對象)查找是否定義了rain;在全局對象中我們定義了rain = 1,因此最終結(jié)果會彈出'1'。
作用域鏈:JavaScript需要查詢一個變量x時,首先會查找作用域鏈的第一個對象,如果以第一個對象沒有定義x變量,JavaScript會繼續(xù)查找有沒有定義x變量,如果第二個對象沒有定義則會繼續(xù)查找,以此類推。
上面的代碼涉及到了三個作用域鏈對象,依次是:inner、rainman、window。
2、函數(shù)體內(nèi)部,局部變量的優(yōu)先級比同名的全局變量高。
<script type="text/javascript"> var rain = 1; //定義全局變量 rain function check(){ var rain = 100; //定義局部變量rain alert( rain ); //這里會彈出 100 } check(); alert( rain ); //這里會彈出1</script>
3、JavaScript沒有塊級作用域。
這一點也是JavaScript相比其它語言較靈活的部分。
仔細(xì)觀察下面的代碼,你會發(fā)現(xiàn)變量i、j、k作用域是相同的,他們在整個rain函數(shù)體內(nèi)都是全局的。
<script type="text/javascript"> function rainman(){ // rainman函數(shù)體內(nèi)存在三個局部變量 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ù)中聲明的變量在整個函數(shù)中都有定義。
首先觀察這段代碼:
<script type="text/javascript"> function rain(){ var x = 1; function man(){ x = 100; } man(); //調(diào)用man alert( x ); //這里會彈出 100 } rain(); //調(diào)用rain</script>
上面得代碼說明了,變量x在整個rain函數(shù)體內(nèi)都可以使用,并可以重新賦值。由于這條規(guī)則,會產(chǎn)生“匪夷所思”的結(jié)果,觀察下面的代碼。
<script type="text/javascript"> var x = 1; function rain(){ alert( x ); //彈出 'undefined',而不是1 var x = 'rain-man'; alert( x ); //彈出 'rain-man' } rain();</script>
是由于在函數(shù)rain內(nèi)局部變量x在整個函數(shù)體內(nèi)都有定義( var x= 'rain-man',進(jìn)行了聲明),所以在整個rain函數(shù)體內(nèi)隱藏了同名的全局變量x。這里之所以會彈出'undefined'是因為,第一個執(zhí)行alert(x)時,局部變量x仍未被初始化。
所以上面的rain函數(shù)等同于下面的函數(shù):
function rain(){ var x; alert( x ); x = 'rain-man'; alert( x );}
5、未使用var關(guān)鍵字定義的變量都是全局變量。
<script type="text/javascript"> function rain(){ x = 100; //聲明了全局變量x并進(jìn)行賦值 } rain(); alert( x ); //會彈出100 </script>
這也是JavaScript新手常見的錯誤,無意之中留下的許多全局變量。
6、全局變量都是window對象的屬性
<script type="text/javascript"> var x = 100 ; alert( window.x );//彈出100 alert(x);</script>
等同于下面的代碼
<script type="text/javascript"> window.x = 100; alert( window.x ); alert(x)</script>
相關(guān)文章
JavaScript中Object、map、weakmap的區(qū)別分析
這篇文章主要介紹了JavaScript中Object、map、weakmap的區(qū)別分析,幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下2020-12-12JavaScript實現(xiàn)多叉樹的遞歸遍歷和非遞歸遍歷算法操作示例
這篇文章主要介紹了JavaScript實現(xiàn)多叉樹的遞歸遍歷和非遞歸遍歷算法,結(jié)合實例形式詳細(xì)分析了JavaScript多叉樹針對json節(jié)點的遞歸與非遞歸遍歷相關(guān)操作技巧,需要的朋友可以參考下2018-02-02云開發(fā)進(jìn)階uniCloud-db組件與JQL語法的轉(zhuǎn)換詳解
這篇文章主要為大家介紹了云開發(fā)進(jìn)階uniCloud-db組件與JQL語法的轉(zhuǎn)換詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03微信小程序?qū)隫ant報錯VM292:1 thirdScriptError的解決方法
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)隫ant報錯VM292:1 thirdScriptError的解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08詳解JavaScript實現(xiàn)動態(tài)的輪播圖效果
這篇文章主要介紹了JavaScript實現(xiàn)動態(tài)的輪播圖效果,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04