JavaScript执行返回函数的函数

Question

我有以下两个计数器函数，当它们运行时会返回不同的结果。

在第一个代码片段中，counter函数被分配给变量letsCount，并且执行该函数似乎会更新counter函数中的变量count。

然而，在第二个代码片段中，直接执行该函数并不会更新count变量。

请问为什么它们有不同的结果？当返回函数的函数被分配给一个变量时会发生什么？

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

- Katie S.

---

每当你调用counter函数时，都会创建一个新函数并将count设置为0。 - Felix Kling

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保留的值。

- Maël Nison

Answer 2

片段1和片段2在调用方式上有所不同。你的第一个片段引用了返回函数中的一个，而该函数保留了它的作用域（是一个闭包，引用了count）。

你的第二个片段每次都调用外部函数，总是返回一个新函数的引用，具有对新的count的新闭包。

- alex

Answer 3

你得到这种行为其实很有道理。当你调用counter()()时，第一个counter()被执行，实际上将变量count重置为0。当你将一个变量设置为counter()时，你实际上是将它设置为返回的函数：

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

// })();

那么当您调用letsCount时，您正在调用返回的函数而不是外部函数。

- David G

Answer 4

在第一种情况下，您正在使用函数指针引用它。 因此上下文被保存

而在第二种情况下，您正在调用该函数，其中计数为0。 因此，变量在此处超出了上下文范围，因此您会看到值为0

- Sushanth --