JavaScript 为什么要避免使用全局变量

全局变量 是在脚本中的任意函数外面声明或定义的变量。这意味着全局变量可以从脚本中的任何地方访问，而不仅仅局限于函数或块。JavaScript全局变量也可以在函数或块内部声明，然后可以从任何地方访问，如前面所述。使用 window 对象来实现这个目的。

示例1： 定义一个全局变量，并在一个函数和一个块中使用它，还在同一个函数中使用 window 对象定义一个全局变量，并在同一函数和块中使用它，说明了两个变量的全局作用域。

Javascript

<script> 
  
    // Global variable 'a' declared and assigned 
    const a = "GFG"; 
  
    // Global variable 'b' declared inside a function 
    function geeksForGeeks() { 
        window.b = 12; 
    } 
  
    // Global variables 'a' and 'b' can  
    // be used in this function 
    function geeks() { 
        console.log("From function: " + a, b); 
    } 
  
    geeksForGeeks(); 
    geeks(); 
  
    // Global variables 'a' and 'b' can 
    // be used in this block as well 
    { 
        console.log("From block: " + a, b); 
    } 
</script> 

输出:

From function: GFG 12
From block: GFG 12

说明： 第一个示例给出了JavaScript中创建和使用全局变量的典型方式的示例。变量 a 使用传统语法在脚本的全局作用域中定义。另一方面，变量 b 使用 window 对象声明并赋值。之所以需要应用这个对象，是因为变量 b 在函数内部声明，因此默认具有函数作用域，而window对象将它转换为全局作用域。

乍一看，全局变量似乎很容易使用，比使用局部函数和块作用域变量更方便。但事实是，应尽量减少使用全局变量。这是因为一旦声明了一个全局变量，在脚本中定义的任何后续函数或块都可以轻松修改它，或者多个脚本可以错误地拼写任何变量名称，从而导致调试问题，特别是对于大型代码库。

为了解决这个问题，我们总是建议在可能的情况下使用局部变量。现在，多个函数或块可以在本地定义具有相同名称的变量，而不会引起任何冲突，从而降低错误发生的几率。

示例2： 在一个函数内部创建具有局部作用域的局部变量，并在另一个函数内部创建与前一个局部变量同名的局部变量。这样确保脚本中定义的多个同名变量之间没有冲突。

JavaScript

<script> 
    function GFG() { 
        var localVariable = 12; // Local variable 
        console.log("Local variable:", localVariable); 
    } 
      
    function geeksForGeeks() { 
        // Local variable with same name, different value 
        var localVariable = "Geek";  
        console.log("Local variable:", localVariable); 
    } 
      
    // Function call 
    GFG(); 
    geeksForGeeks(); 
</script>

输出：

Local variable: 12
Local variable: Geek

解释： 第二个示例展示了在不同函数中使用相同名称但不同值的局部变量的情况。如果在此处使用全局变量，那么由于全局作用域，第二个同名变量将具有与第一个变量相同的值，这不是此示例中期望的行为。这就是为什么应尽可能使用局部变量的原因，正如前面提到的。

示例3： 此示例演示了在JavaScript中使用全局变量的解决方案或变通方法。它涉及将整个脚本包装在一个闭包函数中，然后可以手动暴露需要具有全局作用域的变量。

Javascript

<script> 
    (function () { 
        var myVar = "GFG"; 
        console.log("This is within the closure function"); 
          
        // Manually exposing the variable to global scope 
        window["myVar"] = myVar;  
    })(); 
      
    console.log("Global variable:", myVar); 
</script>

输出结果：

This is within the closure function
Global variable: GFG

解释： 第三个示例展示了另一种表示全局变量的方法，但没有使用闭包函数所带来的上述缺点。需要具有全局作用域的变量可以使用 window[“var_name”] = var_name 语法手动公开。然而，建议尽可能避免使用全局变量，而是使用函数作用域或块作用域变量（局部作用域）。