如何在 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+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告