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