为什么这个函数返回了一个函数？

Question

我为什么要将计数器函数分配给计数变量？这样做的目的是什么？

function counter() {
  var localVar = 0;
  return function() {
    localVar++;
    return localVar;
  }
}

  var count = counter(); // I am confused here.

  console.log(count());

- Md Nuhel

---

counter() 的更好名称应该是 generateCounter()。然而，这只是 JS 中闭包的一个非常糟糕的例子。如果你想了解这个函数的作用，可以研究一下闭包。比这个例子更合适的例子有很多。其中一个很好的应用是回调函数。 - c1moore

Answer 1

counter 是一个函数工厂，当调用时它会返回一个函数。

通过将变量赋值给 counter ，您可以跟踪此计数器，并且每次调用它时，变量 localVar 将按一次递增。如果您总是调用 counter()() ，则无法跟踪该值。

示例：

function counter() {
  var localVar = 0;
  return function() {
    localVar++;
    return localVar;
  }
}

var count = counter(); 

for(var i = 0; i<99; i++) count();

console.log(count()); // 100



for(var i = 0; i<99; i++) counter()();

console.log(counter()()); // 1

- Luca Kiebel

---

那么为了跟踪函数中的数据，我将函数分配给计数变量？ - Md Nuhel

感谢您的帮助。 - Md Nuhel

@MuhammadNuhel 如果你觉得Luca的回答对你有帮助，请记得接受他的回答。他会因为自己的贡献而获得一些信誉，未来阅读此页面的读者也会知道哪个答案最有帮助。每个人都是赢家。 - Cobus Kruger

Answer 2

你没有将counter函数赋值给一个变量，而是调用counter并将其返回值赋值给变量。

只是counter会返回另一个函数。

注意，在counter内部有以下代码段：

return function() {
  localVar++;
  return localVar;
}

这句话的字面意思是“返回一个函数，该函数会增加一个本地变量的值，然后返回该变量的当前状态”。

- Carcigenicate

---

好的，那么为什么我不能写console.log(count)呢？我必须写console.log(count())。 - Md Nuhel

因为count是一个函数，你需要调用它来获得一个数字。count是counter返回的内容，而counter返回一个函数。 - Carcigenicate

明白了。感谢你的帮助。 - Md Nuhel

我尝试了console.log(count);，输出结果是[Function]。但是当我尝试console.log(count());时，我得到了数字。 - Md Nuhel

@MuhammadNuhel 是的，因为 count 是一个函数，当你打印一个函数时就会看到它。你需要调用它（添加 ()）才能从中获取数字。 - Carcigenicate

Answer 3

这是因为您可以在分配给它的任何变量上使用计数器，以便您可以保留多个实例，所有实例都独立跟踪。请参见下面的示例：

function counter() {
  var localVar = 0;
  return function() {
    localVar++;
    return localVar;
  }
}

  var count = counter(); 
  var secCount = counter();

  console.log(`count: ${count()}`);
  console.log(`count: ${count()}`);
  console.log(`secCount: ${secCount()}`);
  console.log(`secCount: ${secCount()}`);
  console.log(`count: ${count()}`);
  console.log(`count: ${count()}`);
  console.log(`secCount: ${secCount()}`);
  console.log(`secCount: ${secCount()}`);
  console.log(`count: ${count()}`);

- Cory Kleiser

---

@MuhammadNuhel 这些答案有帮助澄清问题吗？ - Cory Kleiser

Answer 4

函数counter是一个函数工厂，它返回一个新的函数 - 在这种情况下，是一个增加值的函数。

然后将这个新函数分配给变量count。

这种模式的有用之处在于函数可以访问它们的本地范围。因此，该函数可以访问并增加其作用域中的变量localVar - 这也是在调用counter时声明的 - 并且没有外部函数可以修改它，因此不存在多个函数更改同一变量的冲突。此外，这样您就可以拥有多个不会相互冲突的计数器。

- Lucas Bebber