闭包存储数组

Question

这是使用闭包更新数组的最佳方式吗？我在另一个网站上看到了类似的东西。我想知道创建的全局变量closure1。有没有办法在不创建全局的情况下做到这一点。

<script>  
    var closure1=Closure(0, 0);

    function Closure(num, i) {
        var num=num;
        var index=i;
        var anArray = [];
        return function(num,index) {
          anArray[index]=(num);
          out.innerHTML=anArray;
        }
    } 
 </script>

<div id="d1" onclick=" closure1(2,0)">2 index 0</div>
<div id="d2" onclick=" closure1(5,3)">5 index 3</div>
<div id="d3" onclick=" closure1(4,1)">4 index 1</div>
<div id="d4" onclick=" closure1(9,7)">9 index 7</div>
<div id="out" >?</div>

Answer 1

您需要有一种方法来调用您创建的闭包，以便在onclick 属性中使用它。将closure1 作为全局变量的优点是闭包只创建一次，您可以通过调用closure1(num, index) 在整个页面中重复使用它。但是，如果您不希望在全局范围内有一个名为 closure1 的变量，您可以通过以下方式清理。

编辑：我之前发布了两种建议的方法。感谢@nnnnnn 指出其中一种方法会破坏 OP 的代码。我已删除不正确的建议并保留正确的建议。

您可以将闭包作为属性添加到现有的Closure 函数中。例如，如果你想创建一个新的闭包closure1，你应该像这样创建它

删除线：

var closure1=Closure(0, 0);

添加以下行AFTER Closure 函数已定义，如下所示：

Closure.closure1 = Closure(0, 0);

并将您的点击次数替换为

<div id="d1" onclick="Closure.closure1(2,0)">2 index 0</div>

完整的代码如下所示：

<script>  
    function Closure(num, i) {
        var num=num;
        var index=i;
        var anArray = [];
        return function(num,index) {
          anArray[index]=(num);
          out.innerHTML=anArray;
        }
    } 

    Closure.closure1 = Closure(0, 0);
 </script>

<div id="d1" onclick="Closure.closure1(2,0)">2 index 0</div>
<div id="d2" onclick="Closure.closure1(5,3)">5 index 3</div>
<div id="d3" onclick="Closure.closure1(4,1)">4 index 1</div>
<div id="d4" onclick="Closure.closure1(9,7)">9 index 7</div>
<div id="out" >?</div>

这是我认为最干净的方法。希望这会有所帮助。

Answer 2

我认为你可以做这样的事情。如果您不想创建全局变量，请将脚本包装在自执行函数中。

(function(){
      var closure1=Closure(0, 0);

      function Closure(num, i) {
        var num=num;
        var index=i;
        var anArray = [];
        return function(num,index) {
          anArray[index]=(num);
          out.innerHTML=anArray;
        }
      }
  }());