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

启动你的 职业生涯

通过完成课程获得认证

开始学习
广告