如何在 JavaScript 閉包函式中保留變數？

在本教程中，我們將學習在 JavaScript 閉包函式中保留變數的方法。

什麼是閉包函式？閉包函式允許從內部函式訪問外部函式的作用域。它也允許使用私有變數。閉包變數儲存在棧和堆中。

建立函式時，也會建立閉包。閉包會記住在其中使用的外部內容。閉包是資料隱私的主要機制。

一個缺點是使用的變數不會被垃圾回收。過度使用閉包函式會由於記憶體中冗餘程式碼而損害系統。

讓我們簡要介紹一下在閉包函式中保留變數的方法。

使用閉包返回函式

每次呼叫函式時，我們必須在重新初始化時保留 JavaScript 閉包變數。解決方案不是在每次呼叫函式時將物件設定為為空。

語法

使用者可以按照以下語法使用閉包函式。

var closureFunction = function(param) {
   var object = {};
   return function(param) {
      object[param] = param;
      return object;
   }
}();
closureFunction(value1);
closureFunction(value2);

此處，語法描述了一個返回物件的閉包函式。

引數

  • param − 閉包函式的引數。

示例

讓我們在這個示例中瞭解閉包返回函式的必要性。

在這個程式中，我們首先呼叫 retClosProb(10)。在這個函式中，物件 retClosProbs 被設定為為空。然後將值賦給物件，並返回物件以進行顯示。

請注意，在這個程式中，所有操作都在返回函式之外完成。由於物件在每次呼叫函式時都會重新初始化，因此我們每次都會單獨獲取物件值。也就是說，物件沒有被保留。

<html>
<html>
   <title>The JavaScript program to see a variable that is not preserved</title>
</html>
<body>
   <div id="retClosBtnWrap">
      <p>Click this button to see the object that is not preserved</p>
      <button onclick="retClosAction()"> Click Me</button>
   </div>
   <p id="retClosOp1"></p>
   <p id="retClosOp2"></p>
   <script>
      var retClosOutEl1 = document.getElementById("retClosOp1");
      var retClosOutEl2 = document.getElementById("retClosOp2");
      var retClosBtnWrapEl = document.getElementById("retClosBtnWrap");
      function retClosAction() {
         retClosBtnWrapEl.style.display = "none";
         var retClosProb = function(id) {
            retClosProbs = {};
            retClosProbs[id] = "Value " + id;
            return retClosProbs;
            return function() {}
         };
         retClosOutEl1.innerHTML = JSON.stringify(retClosProb(10));
         retClosOutEl2.innerHTML = JSON.stringify(retClosProb(20));
      }
   </script>
</body>
</html>

示例

在這個示例中，讓我們瞭解上面示例中所述問題的解決方案。

我們首先呼叫 retClosSoln(10)。在這個函式中，物件 retClosSoln 在函式內部宣告。

與上面給出的問題示例相比，接下來是不同之處。將值賦給物件，並在返回函式內部返回物件以進行顯示。

由於物件不會在每次呼叫函式時都重新初始化，因此我們將物件值一起獲取。也就是說，物件被保留了。

<html>
<body>
   <div id="retClosBtnWrap">
      <p>Click this button to see the object that is preserved</p>
      <button onclick="retClosAction()"> Click Me</button>
   </div>
   <p id="retClosOp1"></p>
   <p id="retClosOp2"></p>
   <script>
      var retClosOutEl1 = document.getElementById("retClosOp1");
      var retClosOutEl2 = document.getElementById("retClosOp2");
      var retClosBtnWrapEl = document.getElementById("retClosBtnWrap");
      function retClosAction() {
         retClosBtnWrapEl.style.display = "none";
         var retClosSolns = function(id) {
            var retClosSoln = {};
            return function(id) {
               retClosSoln[id] = "Value " + id;
               return retClosSoln;
            }
         }();
         retClosOutEl1.innerHTML = JSON.stringify(retClosSolns(10));
         retClosOutEl2.innerHTML = JSON.stringify(retClosSolns(20));
      }
   </script>
</body>
</html>

示例

在這個示例中，我們使用了相同的閉包返回函式解決方案來保留變數，正如我們在上面示例中討論的那樣。這個程式的唯一區別在於我們從使用者那裡獲取閉包變數的值。

<html>
<body>
   <input type="text" id="retClosUsrInp1" placeholder="Enter name" />
   <br><br>
   <input type="text" id="retClosUsrInp2" placeholder="Enter name" />
   <div id="retClosUsrBtnWrap">
      <p id="retClosUsrErr" style="color:red;font-weight:bold"></p>
      <p>Click this button to see the preserved values</p>
      <button onclick="retClosUsrAction()"> Click Me</button>
   </div>
   <p id="retClosUsrOp1"></p>
   <p id="retClosUsrOp2"></p>
   <script>
      var retClosUsrOutEl1 = document.getElementById("retClosUsrOp1");
      var retClosUsrOutEl2 = document.getElementById("retClosUsrOp2");
      var retClosUsrErrEl = document.getElementById("retClosUsrErr");
      var retClosUsrBtnWrapEl = document.getElementById("retClosUsrBtnWrap");
      function retClosUsrAction() {
         var retClosUsrVal1 = document.getElementById("retClosUsrInp1").value;
         var retClosUsrVal2 = document.getElementById("retClosUsrInp2").value;
         if (retClosUsrVal1 == "" || retClosUsrVal2 == "") {
            retClosUsrErr.innerHTML = "Please provide inputs and click on the button";
         } else {
            retClosUsrBtnWrapEl.style.display = "none";
            var retClosUsrSolns = function(id) {
               var retClosUsrSoln = {};
               return function(id) {
                  retClosUsrSoln[id] = "Hello " + id;
                  return retClosUsrSoln;
               }
            }();
            retClosUsrOutEl1.innerHTML = JSON.stringify(retClosUsrSolns(retClosUsrVal1));
            retClosUsrOutEl2.innerHTML = JSON.stringify(retClosUsrSolns(retClosUsrVal2));
         }
      }
   </script>
</body>
</html>

在本教程中，我們討論瞭如何在 JavaScript 閉包函式中保留變數。

我們分析了問題案例，並透過在閉包中使用返回函式找到了解決方案。簡而言之，閉包提供了資料封裝。藉助閉包，我們可以消除冗餘程式碼。

更新於：2022年10月20日

1K+ 次瀏覽

啟動你的 職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.