JavaScript中變數的作用域詳解

2022-03-10 19:23:21

一、變數的分類

在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中變數的作用域，希望對大家有所幫助。在此也非常感謝大家對it145.com網站的支援！