JavaScript 如何改变一个函数中的全局变量的值

在任何编程语言中，有两种类型的变量可以在其访问范围内被声明。 本地变量 和全局变量。

全局范围 的变量 – 全局范围的变量是在代码文件中全局声明的变量，可以被文件中的任何代码块或任何函数访问。这些变量的范围是全局的。

本地范围变量 - 这些变量是在一个函数或一个特定的代码块内声明的，只能在该特定的代码块内访问或使用，不能在该代码块外使用。这些变量的范围仅限于那个特定的代码块，这就是为什么这些变量是局部范围变量。

在这篇文章中，我们将学习如何使用JavaScript来改变函数中代码文件中的全局变量的值。

使用JavaScript改变函数内的全局变量的值是非常简单的。在JavaScript中，我们可以通过两种方式来改变全局变量的值，如下图所示

直接改变数值。
使用方括号语法改变数值。

让我们借助代码实例来详细了解这些方法的实际实现。

直接改变数值

在这种方法中，我们可以直接改变全局变量的值，通过使用它的名字来给它分配一个新值。

语法

以下语法将帮助你理解如何直接访问和改变全局变量的值 −

var global_variable_name = initial_value;
function() {
   global_variable_name = new_value;
}

让我们借助于JavaScript代码例子来了解这个方法的实际实现。

算法

第1步，我们将在HTML文档中添加两个不同的输入元素，每个元素的类型属性为数字，以获得用户选择的两个数字输入。
第2步 -- 在下一步，我们将在文档中添加一个带有onclick事件的按钮元素，当用户点击按钮时，它将接收一个函数并调用它。
第3步 -- 在第3步中，我们将定义一个JavaScript函数，并将其作为一个值分配给上一步中添加的按钮的onclick事件。
第4步– 在这一步中，我们将抓取用户在输入元素中输入的值，并用这两个值的乘积来改变全局变量的值。所有这些操作都在上一步声明的函数中进行。

例子

下面的例子将向你解释如何在一个函数中使用JavaScript改变全局变量的值。

<html>
<body>
   <h2> Change the value of a global variable inside of a function using JavaScript </h2>
   <p id = "upper">The initial value that is assigned to the global variable <b>globe is: 8</b></p>
   <p>Enter any two numbers:</p>
   <input type = "number" id = "inp1"> <br> <br>
   <input type = "number" id = "inp2"> <br> <br>
   <button id = "btn" onclick = "changeVal()">click to change the value</button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var globe = 8;
      function changeVal() {
         var inp1 = document.getElementById("inp1");
         var inp2 = document.getElementById("inp2");
         var num1 = Number(inp1.value);
         var num2 = Number(inp2.value);
         var prevGlobe = globe;
         globe = num1 * num2;
         result.innerHTML += " The value of the global variable <b> globe </b> is changed from <b> " + prevGlobe + " </b> to <b> " + globe + " </b> the product of the two numbers <b> " + num1 + " * " + num2 + " </b> entered by you. <br> ";
      }
   </script>
</body>
</html>

在上面的例子中，我们可以清楚地看到，在一个名为 changeVal() 的函数中，我们每次都将全局变量 globe 的值从 8 改为用户输入的两个数字的乘积。

改变数值的方括号语法

这是另一种使用JavaScript在函数中改变全局变量值的方法或语法。在这个方法中，我们不是直接访问变量，而是使用方括号语法来访问和改变它的值。

语法

下面的语法将告诉你如何使用方括号语法来访问和改变全局变量的值—-。

var global_variable = initial_value;
function() {
   window['global_variable'] = new_value; 
}

让我们实际地实现这个方法，并尝试在代码示例中改变一个全局变量的值。

算法

这个例子的算法与上一个例子的算法相似。你只需要将访问函数中的变量的语法从直接语法改为方括号语法。下面的例子将帮助你理解你必须执行的细节变化。

例子

下面的例子将说明方括号语法在访问和改变全局语法值中的应用 −

<html>
<body>
   <h2>Change the value of a global variable inside of a function using JavaScript</h2>
   <p id = "upper">The initial value that is assigned to the global variable <b>globe is: 8</b></p>
   <p>Enter any two numbers:</p>
   <input type = "number" id = "inp1"> <br> <br>
   <input type = "number" id = "inp2"> <br> <br>
   <button id = "btn" onclick = "changeVal()">click to change the value</button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var globe = 8;
      function changeVal() {
         var inp1 = document.getElementById("inp1");
         var inp2 = document.getElementById("inp2");
         var num1 = Number(inp1.value);
         var num2 = Number(inp2.value);
         var prevGlobe = window['globe'];
         window['globe'] = num1 * num2;
         result.innerHTML += " The value of the global variable <b> globe </b> is changed from <b> " + prevGlobe + " </b> to <b> " + globe + " </b> the product of the two numbers <b> " + num1 + " * " + num2 + " </b> entered by you. <br> ";
      }
   </script>
</body>
</html>

在这个例子中，我们使用了方括号语法来访问全局变量 globe 的值，并将其从初始值改为两个输入数字的乘积。

在这篇文章中，我们已经了解了将全局变量的值从初始值改为新值的两种不同方法。我们对这两种方法进行了详细的讨论，并为每种方法提供了代码示例，以了解它们的实际执行情况。