使用閉包在 function 內部進行計數

Question

我試過了，它總是顯示1次，出了點問題，如何解決這個問題？

    function myFunc() {

        var increment = (function() {
          var i = 0;
        
          return function() {
            i++;
            return i;
          };
        })();
        
        alert(`calling myFunc ${increment()} times`);

    }

Answer 1

任何時候你調用我的函數，它都會重新定義增量 function，所以你不應該期望它會說除1之外的任何內容。 您的問題是每次調用myFunc時都會定義增量

你想要做的是：

var i = 0;
function myFunc() {
    var increment = (function() {
        return function() {
            i++;
            return i;
        };
    })();
        
    alert(`calling myFunc ${increment()} times`);
}

所以現在i將在調用myFunc之間保留它的值。 它必須在myFunc之外。 或者您可以將整個 function 移到myFunc之外。

var increment = (function() {
    var i = 0;
        
    return function() {
        i++;
        return i;
    };
})();
function myFunc() {
    alert(`calling myFunc ${increment()} times`);
}

現在這有效：

console.log(increment()); // logs 1
console.log(increment()); // logs 2

Answer 2

問題是，當一個變量超出 scope 時，它會被銷毀，下次調用一個值時，它將被重新創建，並以它開始的任何值初始化。 由於變量i被限定在increment function 內，而增量 function 本身的作用域是myFunc ，這意味着當myFunc關閉時，該閉包將在下一次運行 function 時創建。

一個例子顯示i被提升到myFunc的 scope 和increment function 運行多次。

 function myFunc() { console.log('running myFunc'); var i = 0; console.log('assigning i to ' + i); function increment() { console.log('incrementing'); i++; }; increment(); increment(); console.log(`calling myFunc ${i} times`); } myFunc();

請注意， i現在在對increment的調用中維護其 state 。 現在當我們多次調用myFunc時，我們看到i被銷毀，然后當myFunc再次運行時會創建一個新變量。

 function myFunc() { console.log('running myFunc'); var i = 0; console.log('assigning i to ' + i); function increment() { console.log('incrementing'); i++; } increment(); increment(); console.log(`calling myFunc ${i} times`); } myFunc(); myFunc();

現在，如果我們將i提升到myFunc的 scope 之上，我們將看到它的值在對myFunc的調用中保持在 scope 內。

 var i = 0; console.log('assigning i to ' + i); function myFunc() { console.log('running myFunc'); function increment() { console.log('incrementing'); i++; } increment(); console.log(`calling myFunc ${i} times`); } myFunc(); myFunc();

Answer 3

為我工作。

 var increment = (function() { var i = 0; return function() { i++; return i; }; })(); console.log(increment()); console.log(increment()); console.log(increment());