如何在 JavaScript 中更改函数内部的全局变量的值?


在任何编程语言中,根据访问范围,可以声明两种类型的变量:**局部变量**和**全局变量**。

**全局变量** - 全局变量是在代码文件中全局声明的变量,任何代码块或文件中的任何函数都可以访问它们。这些变量的作用域是全局的。

**局部变量** - 这些变量是在函数或特定代码块内声明的,只能在该特定代码块内访问或使用,而不能在该代码块之外使用。这些变量的作用域仅限于该特定代码块,这就是为什么它们是局部变量的原因。

在本文中,我们将学习如何使用 JavaScript 在代码文件中函数内部更改全局变量的值。

使用 JavaScript 在函数内部更改全局变量的值非常简单。在 JavaScript 中,我们可以通过以下两种方式更改全局变量的值:

  • 直接更改值。

  • 使用方括号语法更改值。

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

直接更改值

在这种方法中,我们可以直接使用变量名称为其分配新值来更改全局变量的值。

语法

以下语法将帮助您了解如何直接访问和更改全局变量的值:

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

让我们借助 JavaScript 代码示例了解此方法的实际实现。

算法

  • **步骤 1** - 在第一步中,我们将向 HTML 文档添加两个不同的输入元素,每个元素的 type 属性的值为 number,以获取用户选择的两个数字输入。

  • **步骤 2** - 在下一步中,我们将向文档中添加一个按钮元素,该元素具有 onclick 事件,该事件接收一个函数并在用户单击按钮后稍后调用它。

  • **步骤 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` 的值,将其从初始值更改为两个输入数字的乘积。

在本文中,我们学习了两种不同的方法来将全局变量的值从初始值更改为某个新值。我们已经借助每种方法的代码示例详细讨论了这两种方法,以了解它们的实际实现。

更新于:2023年2月17日

4K+ 次浏览

开启您的 职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.