如何在 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.