JavaScript中變量的作用域詳解

更新時(shí)間：2022年03月10日 16:31:59 作者：.NET開發(fā)菜鳥

本文詳細(xì)講解了JavaScript中變量的作用域，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、變量的分類

在JavaScript中變量分為兩種：

全局變量
局部變量

二、變量的作用域

1、局部變量的作用域

局部變量：在函數(shù)內(nèi)部定義的變量稱為局部變量，其作用域?yàn)樵摵瘮?shù)內(nèi)部，在該函數(shù)外部不能被訪問?？聪旅娴睦樱?/p>

<!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>
        // 定義函數(shù)fn
        function fn(){
            var a=5;// 定義局部變量
            document.write(a);
        };
        // 調(diào)用函數(shù)fn
        fn();
        // 定義函數(shù)fn2
        function fn2(){
            document(a);
        };
        // 調(diào)用函數(shù)fn2
        fn2();
    </script>
</head>
<body>
    
</body>
</html>

結(jié)果：

2、全局變量

全局變量：定義在函數(shù)外部的變量稱為全局變量，其作用域是整個(gè)JavaScript代碼塊?？聪旅娴睦樱?/p>

<!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>

結(jié)果：

注意：

a、如果在函數(shù)內(nèi)定義了和全局變量相同名稱的局部變量，那么在函數(shù)內(nèi)部使用就近原則：即在函數(shù)內(nèi)部局部變量起作用。

看下面的例子：

<!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>

結(jié)果：

b、全局變量window

如果在定義變量的時(shí)候沒有使用var，那么默認(rèn)是全局變量，無論是在函數(shù)外部還是在函數(shù)內(nèi)部定義變量?？聪旅娴睦樱?/p>

<!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
       // 相當(dāng)于window.a
       a=12;
       function fn(){
           // 相當(dāng)于window.b
           b="我是window對(duì)象,是全局變量";
       };
       fn();
       document.write("a="+a+"<br />");
       document.write("b="+b+"<br />");
    </script>
</head>
<body>
    
</body>
</html>

結(jié)果：