Javascript Global Variable 全域變數與 Local Variable 區域變數

Javascript 的變數可以分為 Global Variable(全域變數)與 Local Variable(區域變數),這兩種變數的差異在於宣告的位置、方式以及調用區域的不同,使用全域變數的好處在於調用方便,但有的時候在特定函式中,也許有獨立運作的 script 會用到區域變數,以確保不影響到整個程式的運作,以下為這兩種變數的主要差異與範例應用。
  • Global Variable全域變數:能夠在函式內或函式外宣告,可於整個網頁範圍內調用,所以整個網頁中雖然可以有無數個不同名稱的 Global Variable,但僅會有一個獨立的 Global Variable 名稱,若重覆名稱則會覆蓋變數值,網頁關閉時,Global Variable 亦失效。
  • Local Variable 區域變數:僅能夠在函式中透過關鍵字 var 宣告,每個不同的函式可以有相同的 Local Variable 變數名稱,換句話說,每個函式間的 Local Variable 互不干涉,也無法在函式外其他地方調用,當函式結束工作後,Local Variable 亦失效。
從以上的兩個變數間差異不難看出來,僅有在函式(function)內,透過 var 所宣告的變數才能算是 Local Variable 區域變數,若沒有使用 var 關鍵字宣告,無論是在哪裡宣告的變數,都會屬於 Global Variable 全域變數的範疇,此細節請多多注意避免錯誤。

Javascript Global Variable 全域變數與 Local Variable 區域變數範例
<script type="text/javascript">
function Test(){
 var var1='A';
 var2='B';
 document.write('var1 in function='+var1+'<br>'); // 輸出 A
 document.write('var2 in function='+var2+'<hr>'); // 輸出 B
}
var var3='C';

Test(); // 呼叫 Test function

document.write('var2 not in function='+var2+'<br>'); // 輸出 B
document.write('var3 not in function='+var3+'<hr>'); // 輸出 C
</script>
以上範例輸出結果

var1 in function=A
var2 in function=B
var2 not in function=B
var3 not in function=C

首先準備一個 Test 函式,在裡面我們宣告了兩個變數,分別為 var1 與 var2,根據首段的講解,可以清楚的知道 var1 是 Local Variable 區域變數,而 var2 為 Global Variable,在函式外再宣告一個 var3 的全域變數,接著我們就來調用看看結果。首波於 Test function 中調用兩個變數,均可以順利輸出變數值,然後於函式外調用 var2 與 var3 也都可以順利輸出,但為什麼我們沒有在函式外調用 var1 呢?因為 var1 僅在函式內並透過 var 宣告,所以在函式外調用會失效,甚至 JavaScript 會不認識 var1 這個變數,而導致後方的 script 也失去效果。

推薦給您的相關主題
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C