首页 > 代码库 > JS 变量的作用域

JS 变量的作用域

2024-09-05 08:38:16   217人阅读


变量的作用域，是指变量的作用范围。也就是说，变量只在特定范围有效，超出该范围无效。

在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 变量的作用域


联系
我们