如何使用 JavaScript 更改函数内部全局变量的值？

WBOY 转载: 2023-09-15 12:37:11 660浏览

可以在任何编程语言中在其访问范围的上下文中声明两种类型的变量。 局部变量和全局变量。

全局作用域变量 - 全局作用域变量是在代码文件内全局声明的变量，可以由文件内的任何代码块或任何函数访问。这些变量的范围是全局的。

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

在本文中，我们将了解如何使用 JavaScript 更改函数内代码文件中全局变量的值。

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

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

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

直接更改值

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

语法

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

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

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

算法

步骤 1 - 在第一步中，我们将向 HTML 文档添加两个不同的 input 元素，每个元素的 type 属性值为 number，以获取两个数字输入来自他们选择的用户。
步骤 2 - 在下一步中，我们将在文档中添加一个按钮元素，并使用 onclick 事件，该事件接受一个函数，并在用户单击按钮时调用它。 p>
步骤 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>

在上面的示例中，我们可以清楚地看到，我们将全局变量 globe 的值从 8 更改为由用户每次在名为 changeVal() 的函数内。

用于更改值的方括号语法

这是使用 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 的值并将其从初始值更改为两个输入数字的乘积。

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

以上就是如何使用 JavaScript 更改函数内部全局变量的值？的详细内容，更多请关注php中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：如何使用 FabricJS 创建带有 Triangle 的画布？下一条：只需几行 JavaScript 即可完成 10 件有趣的事情