JavaScript中变量的作用域详解

晚来风

发布时间：2026-10-16| 3人浏览过

原创

在JavaScript开发中，正确理解变量的作用域是避免Bug和命名冲突的关键。本文将深入解析全局变量与局部变量的区别，演示作用域链中的“就近原则”，并揭示未声明变量默认挂载到window对象的特性。

变量作用域的分类

JavaScript中的变量根据定义位置不同，主要划分为两类：

局部变量：通常在函数内部使用 var 关键字定义，仅在该函数内部可见。
全局变量：在函数外部定义，或虽在函数内定义但未使用 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>
</head>
<body>
    <script>
        function fn() {
            var a = 5; // 定义局部变量
            document.write(a);
        }
        
        fn(); // 调用函数，正常输出 5
        
        function fn2() {
            // 此处尝试访问外部作用域的a，会报错ReferenceError
            document.write(a);
        }
        // fn2(); // 取消注释这行会导致程序中断
    </script>
</body>
</html>

全局变量的共享机制

全局变量可以在脚本的任何地方被访问和修改。这意味着在不同函数中，同一个全局变量的值可能会被意外更改，从而引发数据不一致的问题。

<!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>
</head>
<body>
    <script>
       var number; // 初始化为 undefined
       
       function fn(){
          number = 5;
          document.write("fn中number的值:" + number + "<br />");
       };
       
       function fn2(){
           ++number; // 引用并修改全局变量
           document.write("fn2中number的值:" + number + "<br />");
       }
       
       fn(); // 输出: fn中number的值:5
       fn2(); // 输出: fn2中number的值:6
    </script>
</body>
</html>

作用域冲突与就近原则

当局部变量与全局变量同名时，JavaScript遵循“就近原则”。即在执行上下文中，优先查找并使用当前作用域内的变量；若未找到，则向上层作用域（如全局作用域）查找。

同名变量测试示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作用域优先级测试</title>
</head>
<body>
    <script>
       var number = "我是全局变量"; // 全局变量

       function fn(){
          // 重新定义同名的局部变量
          var number = "我是局部变量";
          document.write("fn内部输出:" + number + "<br />");
       };

       function fn2(){
           // 不声明var，直接赋值给已存在的全局变量
           number = "被修改的全局变量";
           document.write("fn2内部输出:" + number + "<br />");
       }
       
       fn(); // 输出局部变量
       fn2(); // 输出修改后的全局变量
    </script>
</body>
</html>

隐式全局变量与window对象

在现代 JavaScript 开发规范（严格模式除外）中，如果在函数内部或未严格定义的上下文中直接赋值一个未用 var、let 或 const 声明的变量，该变量会自动成为全局变量，并成为浏览器环境下 window 对象的一个属性。

隐式全局变量测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window对象测试</title>
</head>
<body>
    <script>
       // 直接在顶级作用域赋值
       a = 12; // 等价于 window.a = 12
       
       function fn(){
           // 在函数内未用var赋值
           b = "我是window对象属性"; // 等价于 window.b = '...'
       };
       
       fn(); // 执行后b变为全局
       
       document.write("a=" + a + "<br />");
       document.write("b=" + b + "<br />");
    </script>
</body>
</html>