深入解析JavaScript中的變量作用域
更新時(shí)間：2013年12月06日 10:07:55 作者：
這篇文章主要是對(duì)JavaScript中的變量作用域進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
在學(xué)習(xí)JavaScript的變量作用域之前，我們應(yīng)當(dāng)明確幾點(diǎn)：
•JavaScript的變量作用域是基于其特有的作用域鏈的。
•JavaScript沒有塊級(jí)作用域。
•函數(shù)中聲明的變量在整個(gè)函數(shù)中都有定義。
1、JavaScript的作用域鏈
首先看下下面這段代碼：
復(fù)制代碼 代碼如下:
<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則會(huì)繼續(xù)在rainman函數(shù)中查找是否定義了rain變量，在這段代碼中rainman函數(shù)體內(nèi)沒有定義rain變量，則JavaScript引擎會(huì)繼續(xù)向上（全局對(duì)象）查找是否定義了rain；在全局對(duì)象中我們定義了rain = 1，因此最終結(jié)果會(huì)彈出'1'。
作用域鏈：JavaScript需要查詢一個(gè)變量x時(shí)，首先會(huì)查找作用域鏈的第一個(gè)對(duì)象，如果以第一個(gè)對(duì)象沒有定義x變量，JavaScript會(huì)繼續(xù)查找有沒有定義x變量，如果第二個(gè)對(duì)象沒有定義則會(huì)繼續(xù)查找，以此類推。
上面的代碼涉及到了三個(gè)作用域鏈對(duì)象，依次是：inner、rainman、window。
2、函數(shù)體內(nèi)部，局部變量的優(yōu)先級(jí)比同名的全局變量高。
復(fù)制代碼 代碼如下:
<script type="text/javascript"> var rain = 1; //定義全局變量 rain function check(){ var rain = 100; //定義局部變量rain alert( rain ); //這里會(huì)彈出 100 } check(); alert( rain ); //這里會(huì)彈出1</script>
3、JavaScript沒有塊級(jí)作用域。
這一點(diǎn)也是JavaScript相比其它語(yǔ)言較靈活的部分。
仔細(xì)觀察下面的代碼，你會(huì)發(fā)現(xiàn)變量i、j、k作用域是相同的，他們?cè)谡麄€(gè)rain函數(shù)體內(nèi)都是全局的。
復(fù)制代碼 代碼如下:
<script type="text/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"> 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é)果，觀察下面的代碼。
復(fù)制代碼 代碼如下:
<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在整個(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仍未被初始化。
所以上面的rain函數(shù)等同于下面的函數(shù)：
復(fù)制代碼 代碼如下:
function rain(){ var x; alert( x ); x = 'rain-man'; alert( x );}
5、未使用var關(guān)鍵字定義的變量都是全局變量。
復(fù)制代碼 代碼如下:
<script type="text/javascript"> function rain(){ x = 100; //聲明了全局變量x并進(jìn)行賦值 } rain(); alert( x ); //會(huì)彈出100 </script>
這也是JavaScript新手常見的錯(cuò)誤，無(wú)意之中留下的許多全局變量。
6、全局變量都是window對(duì)象的屬性
復(fù)制代碼 代碼如下:
<script type="text/javascript"> var x = 100 ; alert( window.x );//彈出100 alert(x);</script>
等同于下面的代碼
復(fù)制代碼 代碼如下:
<script type="text/javascript"> window.x = 100; alert( window.x ); alert(x)</script>
您可能感興趣的文章:
- JavaScript高級(jí)程序設(shè)計(jì)之變量與作用域
- JS中作用域以及變量范圍分析
- JavaScript變量作用域及內(nèi)存問(wèn)題實(shí)例分析
- JS塊級(jí)作用域和私有變量實(shí)例分析
- JavaScript變量類型以及變量作用域詳解
- javascript 的變量、作用域和內(nèi)存問(wèn)題
- JS變量及其作用域
- js 作用域和變量詳解
- 關(guān)于JS變量和作用域詳解
- JavaScript變量的作用域全解析
- JavaScript 變量、作用域及內(nèi)存
- JavaScript中的變量作用域介紹
- js變量、作用域及內(nèi)存詳解
- Javascript變量作用域詳解
- JavaScript中變量的作用域詳解
相關(guān)文章
可以用來(lái)運(yùn)行代碼的函數(shù)，跟本網(wǎng)站的都差不多。2009-05-05
js實(shí)現(xiàn)字符串轉(zhuǎn)日期格式的方法
這篇文章主要介紹了js實(shí)現(xiàn)字符串轉(zhuǎn)日期格式的方法,涉及javascript針對(duì)字符串與日期操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
用js直接區(qū)分網(wǎng)頁(yè)布局代碼，大家可以看下他的原理2008-10-10
本文主要介紹了js實(shí)現(xiàn)登錄驗(yàn)證碼的方法，代碼簡(jiǎn)潔明了，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
與Netscape相反，IE中的事件傳遞方向是從事情發(fā)生的對(duì)象開始，然后依次由該對(duì)象向所在的父節(jié)點(diǎn)傳遞。2009-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)下拉篩選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
JS中style屬性...2006-10-10
純javascript實(shí)現(xiàn)分頁(yè)(兩種方法)
有的時(shí)候頁(yè)面需要很多不同的表組成的數(shù)據(jù)，該怎么分頁(yè)呢？使用數(shù)據(jù)庫(kù)分頁(yè)很簡(jiǎn)單，那么如何使用js實(shí)現(xiàn)分頁(yè)呢？接下來(lái)，小編幫大家解決這個(gè)問(wèn)題，需要的朋友一起來(lái)學(xué)習(xí)吧2015-08-08
這篇文章主要為大家詳細(xì)介紹了js編寫簡(jiǎn)易的計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
localStorage過(guò)期時(shí)間設(shè)置的幾種方法
聊到localStorage想必熟悉前端的朋友都不會(huì)陌生，在實(shí)際的應(yīng)用場(chǎng)景中，我們往往需要讓localStorage設(shè)置的某個(gè)key能在指定時(shí)間內(nèi)自動(dòng)失效，所以基于這種場(chǎng)景，我們?nèi)绾稳ソ鉀Q呢，本文就詳細(xì)的介紹一下2021-12-12