为什么要避免 JavaScript 中的全局变量？

全局变量是在脚本中的任何函数之外声明或定义的变量。这表明可以从特定脚本中的任何位置访问全局变量，而不仅限于函数或块。 JavaScript 全局变量也可以在函数或块中声明，然后可以从前面提到的任何地方访问。窗户 对象用于此确切目的。

示例 1：定义全局变量并在函数和块中使用它，并在函数中使用窗口定义全局变量 对象并在同一个函数和块中使用它，表示两个变量的全局范围。

Javascript

  
    // 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);
    }

输出：

From function: GFG 12
From block: GFG 12

说明：第一个示例介绍了如何在 JavaScript 中创建、使用或访问全局变量的典型方法。变量a使用传统语法在脚本的全局范围内定义。另一方面，变量b被声明并用窗口赋值 目的。这个对象的应用是必要的，因为b是在函数内部声明的，因此默认情况下它具有函数范围，并且窗口对象将其转换为全局范围。

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

为了解决这个问题，始终建议尽可能使用局部变量。现在多个函数或块可以在本地定义具有相同名称的变量，并且不会引起任何冲突，从而降低出错的可能性。

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

Javascript

    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();

输出：

Local variable: 12
Local variable: Geek

说明：第二个例子说明了在不同函数中使用同名但不同值的局部变量。如果此处使用了全局变量，则由于全局作用域而不是局部作用域，同名的第二个变量将具有与第一个变量相同的值，这在本示例中不是所需的行为。这就是为什么如前所述应尽可能使用局部变量的原因。

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

Javascript

    (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);

输出：

This is within the closure function
Global variable: GFG

说明：第三个示例显示了全局变量的另一种表示方式，但没有上述使用闭包函数的缺点。需要具有全局范围的变量可以使用window[“var_name”] = var_name语法手动公开。尽管如此，还是建议尽可能避免使用全局变量，而是使用函数作用域或块作用域变量（局部作用域）。