返回函數的 JavaScript 執行函數

Question

我有以下兩個計數器函數，它們在運行時返回不同的結果。

在第一個片段中，counter 函數被分配給變量letsCount，看起來執行該函數會更新 counter 函數中的 var 計數。

但是在第二個代碼段中，直接執行函數不會更新計數變量。

你能解釋一下為什么它們有不同的結果，當返回函數的函數被分配給一個變量時會發生什么？

片段 1

function counter() {
    var count = 0;
    return function() {
        console.log(count++);
    }
}
var letsCount = counter();
letsCount();    // 0
letsCount();    // 1
letsCount();    // 2

片段 2

function counter() {
    var count = 0;
    return function() {
        console.log(count++);
    }
}
counter()();  // 0
counter()();  // 0
counter()();  // 0

Answer 1

每次調用counter()都會創建一個新的匿名函數實例，並帶有自己的作用域變量。 如果您想繼續使用相同的功能，則必須執行以下操作：

var counter = (function () {
    var count = 0;

    var fn = function() {
        console.log(count++);
    };

    return function () {
        return fn;
    };
})();

counter()();  // 0
counter()();  // 1
counter()();  // 2

將創建一個匿名函數，然后將其存儲在作用域fn函數中，然后我們返回一個函數，該函數在調用時將返回fn保留的值。

Answer 2

Snippet 1和Snippet 2的調用不同。 您的第一個代碼段引用了返回的函數，並且該函數保留了其作用域（是一個閉包，引用了count ）。

您的第二個代碼段每次都調用外部函數，始終返回對新函數的引用，以及對新count的新閉包。

Answer 3

在第一種情況下，您使用函數指針引用它。所以上下文被保存

而在第二種情況下，您正在調用該函數，而計數為 0。 所以變量在這里脫離了上下文，所以你看到的值為 0

Answer 4

為什么你會得到這種行為實際上是完全有道理的。 當您調用counter()() ，會執行第一個counter()調用，有效地將變量count重置為 0。當您將變量設置為counter() ，您實際上是將其設置為返回的函數：

var letsCount = // (function() {
    // var count = 0;
    return function() {
        console.log(count++);
    }

// })();

然后當你調用letsCount ，你調用的是返回的函數而不是外部函數。