JavaScript中變量的作用域詳解

Posted on by

一、變量的分類

在JavaScript中變量分為兩種：

  • 全局變量
  • 局部變量

二、變量的作用域

1、局部變量的作用域

局部變量：在函數內部定義的變量稱為局部變量，其作用域為該函數內部，在該函數外部不能被訪問。看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>局部變量作用域</title>
    <script>
        // 定義函數fn
        function fn(){
            var a=5;// 定義局部變量
            document.write(a);
        };
        // 調用函數fn
        fn();
        // 定義函數fn2
        function fn2(){
            document(a);
        };
        // 調用函數fn2
        fn2();
    </script>
</head>
<body>
    
</body>
</html>

結果：

2、全局變量

全局變量：定義在函數外部的變量稱為全局變量，其作用域是整個JavaScript代碼塊。看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全局變量作用域</title>
    <script>
       var number; // 全局變量
       function fn(){
          number=5;
          document.write("number的值是:"+number+"<br />");
       };
       function fn2(){
           ++number;
           document.write("number的值是:"+number+"<br />");
       }
       fn();
       fn2();
    </script>
</head>
<body>
    
</body>
</html>

結果：

註意：

a、如果在函數內定義瞭和全局變量相同名稱的局部變量，那麼在函數內部使用就近原則：即在函數內部局部變量起作用。

看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全局變量作用域</title>
    <script>
       var number; // 全局變量
       /*       function fn(){
          number=5;
          document.write("number的值是:"+number+"<br />");
       };
       function fn2(){
           ++number;
           document.write("number的值是:"+number+"<br />");
       } */

       // 就近原則
       function fn(){
          var number="我是局部變量";
          document.write("number的值是:"+number+"<br />");
       };
       function fn2(){
           number="我是全局變量"
           document.write("number的值是:"+number+"<br />");
       }
       fn();
       fn2();
    </script>
</head>
<body>
    
</body>
</html>

結果：

b、全局變量window

如果在定義變量的時候沒有使用var，那麼默認是全局變量，無論是在函數外部還是在函數內部定義變量。看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全局變量作用域</title>
    <script>
       var number; // 全局變量
       /*       function fn(){
          number=5;
          document.write("number的值是:"+number+"<br />");
       };
       function fn2(){
           ++number;
           document.write("number的值是:"+number+"<br />");
       } */

       // 就近原則
 /*       function fn(){
          var number="我是局部變量";
          document.write("number的值是:"+number+"<br />");
       };
       function fn2(){
           number="我是全局變量"
           document.write("number的值是:"+number+"<br />");
       }
       fn();
       fn2(); */

       // windows
       // 相當於window.a
       a=12;
       function fn(){
           // 相當於window.b
           b="我是window對象,是全局變量";
       };
       fn();
       document.write("a="+a+"<br />");
       document.write("b="+b+"<br />");
    </script>
</head>
<body>
    
</body>
</html>

結果：

c、應盡量避免使用全局變量，以免團隊開發變量發生沖突。

以上所述是小編給大傢介紹的JavaScript中變量的作用域，希望對大傢有所幫助。在此也非常感謝大傢對WalkonNet網站的支持！

推薦閱讀：