首頁 > 開發者 > 網站開發

JS 變數的範圍

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：使用者   使用者資訊   代碼   注意   混淆   for   asc   全域變數   數學   


變數的範圍，是指變數的作用範圍。也就是說，變數只在特定範圍有效，超出該範圍無效。

在JavaScript中，有兩種變數，全域變數和局部變數：

  • 全域變數：可以在指令碼中的任何位置被調用，全域變數的範圍是當前文檔中整個指令碼地區。
  • 局部變數：只能在此變數聲明語句所屬的函數內部使用，局部變數的範圍僅為該函數體。


聲明變數時，要根據編程的目的決定將變數聲明為全域變數還是局部變數。一般而言，儲存全域資訊（如使用者資訊、菜單選項等）的變數需聲明為全域變數，而儲存臨時資訊（如待輸出的格式字串、數學運算中間變數等）的變數則聲明為局部變數。

舉例說明變數範圍

【例2-1】考察如下代碼：

  1. <html>
  2. <head>
  3. <title>局部變數和全域變數</title>
  4. </head>
  5. <body>
  6. <script type="text/javascript">
  7. var total=100; //全域變數
  8. function add(num){
  9. var total; // 局部變數
  10. total=2*num;
  11. return total;
  12. }
  13. </script>
  14. <p onclick="alert(add(100));">顯示局部變數</p>
  15. <p onclick="alert(total);">顯示全域變數</p>
  16. </body>
  17. </html>

儲存並運行代碼，點擊第一段文本，顯示 200；點擊第二段文本，顯示 100。

分析：點擊第一段文本，運行add()函數，對total變數賦值。這時，JavaScript會尋找total變數，如果在函數內部找到，就賦值；找不到，就到函數外部尋找。顯然，在函數內部已經找到，賦值後它的值為200。這裡的total變數就是局部變數。

點擊第二段文本，JavaScript會在全域內尋找total變數，如果找到，就返回它的值；找不到，將會引發錯誤。顯然，已經找到，它的值是100。這裡的total變數就是全域變數。

可以發現，在add()函數內部對total變數賦值，並未影響外部的total變數。

【例2-2】對【例2-1】稍作修改，去掉add()函數內部對total變數的聲明。如下所示：

  1. <html>
  2. <head>
  3. <title>局部變數和全域變數</title>
  4. </head>
  5. <body>
  6. <script type="text/javascript">
  7. var total=100; //全域變數
  8. function add(num){
  9. total=2*num;
  10. return total;
  11. }
  12. </script>
  13. <p onclick="alert(add(100));">這已不是局部變數</p>
  14. <p onclick="alert(total);">顯示全域變數</p>
  15. </body>
  16. </html>

儲存並運行代碼，點擊兩段文本，都顯示 200 。

上述結果表明，JavaScript在add()函數內部沒有找到total變數，又到函數外部尋找，找到後對它賦值，覆蓋掉了原來的值。

說明：JavaScript是從小範圍到大範圍尋找變數的。如果在當前範圍內沒有找到相應的變數，就會一級一級向上級範圍去尋找，找到後，就對它進行操作，找不到將會引發錯誤。

注意：任何情況下，JavaScript絕對不會從大範圍向小範圍尋找變數。如果在函數外部沒有找到變數，絕對不會去函數內部尋找。

在函數內部聲明全域變數

前面已經講到，聲明變數時要使用 var 關鍵字；但是，也可以不使用。

無論在函數外部還是內部，不使用 var 關鍵字聲明的變數都為全域變數。

這就給我們提供了兩種聲明全域變數的方法：

  • 在函數外部使用 var 關鍵字聲明；
  • 在任何地方不使用 var 關鍵字聲明。

【例2-3】對【例2-2】稍作修改，去掉add()函數外部對total變數的聲明。如下所示：

  1. <html>
  2. <head>
  3. <title>局部變數和全域變數</title>
  4. </head>
  5. <body>
  6. <script type="text/javascript">
  7. function add(num){
  8. total=2*num; // total 為全域變數
  9. return total;
  10. }
  11. </script>
  12. <p onclick="alert(add(100));">這已不是局部變數</p>
  13. <p onclick="alert(total);">顯示全域變數</p>
  14. </body>
  15. </html>

儲存並運行代碼，點擊兩段文本，都顯示 200 。

上述結果表明，在add()函數內部聲明的total變數，已不再是局部變數，它在全域範圍內都是有效。

注意：

  • 聲明變數時請盡量使用 var 關鍵字，這對程式結構有很大的協助。
  • 盡量不要在函數內部聲明全域變數，也不要在函數內部和外部聲明同名變數，這兩種情況都會造成變數的混淆。
只有在函數內使用 var 關鍵字聲明的變數為局部變數

這裡需要強調的是，只有在函數內部使用 var 關鍵字聲明的變數才是局部變數，在其它“語句塊”內使用 var 關鍵字聲明變數一般是全域變數，if...else...選擇結構和for迴圈結構都是如此。

【例2-4】在for迴圈內部聲明變數。

  1. <html>
  2. <head>
  3. <title>在for迴圈內部聲明變數</title>
  4. </head>
  5. <body>
  6. <script type="text/javascript">
  7. for(var i=0;i<=5;i++){
  8. var x=100;
  9. }
  10. </script>
  11. <p onclick="alert(i);">顯示 i 變數的值</p>
  12. <p onclick="alert(x);">顯示 x 變數的值</p>
  13. </body>
  14. </html>

點擊第一段文本，顯示 6 ；點擊第二段文本，顯示 100 。

上述結果表明，在for迴圈內部聲明的 i 和 x 並不是局部變數，而是全域變數。

總結：除了函數，JavaScript是沒有塊級範圍的。

JS 變數的範圍

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More