js變量以及其作用域詳解
一、變量的類型
Javascript和Java、C這些語言不同,它是一種無類型、弱檢測的語言。它對變量的定義并不需要聲明變量類型,我們只要通過賦值的形式,可以將各種類型的數(shù)據(jù)賦值給同一個變量。例如:
i=100;//Number類型
i="variable";//String類型
i={x:4};//Object類型
i=[1,2,3];//Array類型
JS的這種特性雖然讓我們的編碼更加靈活,但也帶來了一個弊端,不利于Debug,編譯器的弱檢測讓我們維護(hù)冗長的代碼時相當(dāng)痛苦。
二、變量的聲明
JS中變量申明分顯式申明和隱式申明。
var i=100;//顯式申明
i=100;//隱式申明
在函數(shù)中使用var關(guān)鍵字進(jìn)行顯式申明的變量是做為局部變量,而沒有用var關(guān)鍵字,使用直接賦值方式聲明的是全局變量?! ?
當(dāng)我們使用訪問一個沒有聲明的變量時,JS會報錯。而當(dāng)我們給一個沒有聲明的變量賦值時,JS不會報錯,相反它會認(rèn)為我們是要隱式申明一個全局變量,這一點一定要注意。
三、全局變量和局部變量
當(dāng)JS解析器執(zhí)行時,首先就會在執(zhí)行環(huán)境里構(gòu)建一個全局對象,我們定義的全局屬性就是做為該對象的屬性讀取,在頂層代碼中我們使用this關(guān)鍵字和window對象都可以訪問到它。而函數(shù)體中的局部變量只在函數(shù)執(zhí)行時生成的調(diào)用對象中存在,函數(shù)執(zhí)行完畢時局部變量即刻銷毀。因此在程序設(shè)計中我們需要考慮如何合理聲明變量,這樣既減小了不必要的內(nèi)存開銷,同時能很大程度地避免變量重復(fù)定義而覆蓋先前定義的變量所造成的Debug麻煩。
四、變量作用域
任何程序語言中變量的作用域都是一個很關(guān)鍵的細(xì)節(jié)。JS中變量的作用域相對與JAVA、C這類語言顯得更自由,一個很大的特征就是JS變量沒有塊級作用域,函數(shù)中的變量在整個函數(shù)都中有效,運行下面代碼:
<SCRIPT LANGUAGE="JavaScript" type="text/javascript"> //定義一個輸出函數(shù) function outPut(s){ document.writeln(s) } //全局變量 var i=0; //定義外部函數(shù) function outer(){ //訪問全局變量 outPut(i); // 0 //定義一個類部函數(shù) function inner(){ //定義局部變量 var i = 1; // i=1; 如果用隱式申明 那么就覆蓋了全局變量i outPut(i); //1 } inner(); outPut(i); //0 } outer(); </SCRIPT>
輸出結(jié)果為0 1 0,從上面就可以證明JS如果用var在函數(shù)體中聲明變量,那么此變量在且只在該函數(shù)體內(nèi)有效,函數(shù)運行結(jié)束時,本地變量即可銷毀了。
由于上面的這個JS特性,還有一個關(guān)鍵的問題需要注意。此前一直使用ActionScript,雖然它和JS都是基于ECMA標(biāo)準(zhǔn)的,但在這里還是略有不同的。例如下面代碼:
<SCRIPT LANGUAGE="JavaScript" type="text/javascript"> //定義一個輸出函數(shù) function outPut(s){ document.writeln(s) } //全局變量 var i=0; //定義外部函數(shù) function outer(){ //訪問全局變量 outPut(i); // 0 //定義一個類部函數(shù) function inner(){ outPut(i); //undefiend var i=1; outPut(i); //1 } inner(); outPut(i); //0 } outer(); </SCRIPT>
你可能認(rèn)為輸出結(jié)果是0 0 1 0,事實上在AS中確實是這樣的,而在JS中的輸入?yún)s是0 undefined 1 0,為何會這樣了?剛才我們說到了JS函數(shù)體中聲明的本地變量在整個函數(shù)中都有效,因此在上面代碼中var i = 1 ;在inner函數(shù)中都有效,實際上顯式聲明的變量i是在預(yù)編譯時就已經(jīng)編譯到調(diào)用對象中了,不同于隱式聲明變量在解釋時才被定義為全局變量,只是在調(diào)用outPut(i)時,還沒有將它初始化變量,此時的本地變量i是未賦值變量,而不是未定義變量,因此輸出了undefined。上面的代碼等效于下面代碼:
function inner(){ var i; //定義但不賦值 outPut(i); //undefiend i=1; outPut(i); //1 }
為了避免上面的這類問題,因此在函數(shù)開始位置集中做函數(shù)聲明是一個極力推薦的做法。
五、基本類型和引用類型
JS不同于JAVA、C這些語言,在變量申明時并不需要聲明變量的存儲空間。變量中所存儲的數(shù)據(jù)可以分為兩類:基本類型和引用類型。其中數(shù)值、布爾值、null和undefined屬于基本類型,對象、數(shù)組和函數(shù)屬于引用類型。
基本類型在內(nèi)存中具有固定的內(nèi)存大小。例如:數(shù)值型在內(nèi)存中占有八個字節(jié),布爾值只占有一個字節(jié)。對于引用型數(shù)據(jù),他們可以具有任意長度,因此他們的內(nèi)存大小是不定的,因此變量中存儲的實際上是對此數(shù)據(jù)的引用,通常是內(nèi)存地址或者指針,通過它們我們可以找到這個數(shù)據(jù)。
引用類型和基本類型在使用行為上也有不同之處:
<SCRIPT LANGUAGE="JavaScript" type="text/javascript"> //定義一個輸出函數(shù) function outPut(s){ document.writeln(s) } var a = 3; var b = a; outPut(b); //3 a = 4; outPut(a); //4 outPut(b); //3 </SCRIPT>
對基本類型b進(jìn)行賦值時,實際上是又開辟了一塊內(nèi)存空間,因此改變變量a的值對變量b沒有任何影響。
<SCRIPT LANGUAGE="JavaScript" type="text/javascript"> //定義一個輸出函數(shù) function outPut(s){ document.writeln(s) } var a_array = [1,2,3]; var b_array = a_array; outPut(b_array); //1,2,3 a_array[3] = 4; outPut(b_array);//1,2,3,4 </SCRIPT>
上面是對引用類型的變量賦值,實際上他們傳遞的是對內(nèi)存地址的引用,因此對a_array和b_array的存取,實際上都是操作的同一塊內(nèi)存區(qū)域。如果希望重新分配內(nèi)存空間存儲引用型變量,那么我就需要使用克隆方法或者自定義方法來復(fù)制引用變量的數(shù)據(jù)。
JS變量作用域
<script language ="javascript" type ="text/javascript" > var a = "change"; function fun() { alert(a);//輸出undefined var a = "改變了"; alert(a);//輸出改變了 } alert(a);//輸出change fun(); </script>
var定義的是一個作用域上的變量,在第一次輸出a之前,JS在預(yù)編譯分析中已經(jīng)將a賦值為change,所以第一次輸出change,當(dāng)調(diào)用到fun()函數(shù)的時候,JS創(chuàng)建一個新的作用域,在輸出a之前,初始化所有var變量的值為undefined,所以fun()中第一次輸出的是undefined,第二次輸出已經(jīng)給a賦值了,所以輸出新的值;兩個a在函數(shù)里面和外面是不同的兩個變量,如:
<script language ="javascript" type ="text/javascript" > var b; function fun() { b = "change"; } alert(b);//輸出undefined </script>
變量b在函數(shù)外面已經(jīng)定義了,在函數(shù)中有給b賦值,但輸出的卻是undefined。
相關(guān)文章
JS 在指定數(shù)組中隨機(jī)取出N個不重復(fù)的數(shù)據(jù)
這篇文章主要介紹了JS 在指定數(shù)組中隨機(jī)取出N個不重復(fù)數(shù)據(jù)的方法,需要的朋友可以參考下2014-06-06使用JS實現(xiàn)鼠標(biāo)放上圖片進(jìn)行放大離開實現(xiàn)縮小功能
這篇文章主要介紹了使用JS實現(xiàn)鼠標(biāo)放上圖片進(jìn)行放大離開實現(xiàn)縮小功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-01-01JavaScript 使用 splice 方法刪除數(shù)組元素可能導(dǎo)致的問題分析
這篇文章主要介紹了JavaScript 使用 splice 方法刪除數(shù)組元素可能導(dǎo)致的問題分析,當(dāng)在 JavaScript 中從數(shù)組中刪除元素時,使用 splice 方法時需要謹(jǐn)慎,本文給大家詳細(xì)講解,需要的朋友可以參考下2023-04-04用JavaScript對JSON進(jìn)行模式匹配 (Part 2 - 實現(xiàn))
在上一篇文章里,我們完成了 Dispatcher 類的接口設(shè)計,現(xiàn)在我們就來考慮一下如何實現(xiàn)這個類。2010-07-07