Javascript 避免全局变量 - 无法理解它是如何工作的

Question

所以我们有这段代码，可以在 this page 找到，我用它来尝试理解变量作用域、IIFE 等:

// Because this function returns another function that has access to the
// "private" var i, the returned function is, effectively, "privileged."

function makeCounter() {
  // `i` is only accessible inside `makeCounter`.
  var i = 0;

  return function() {
    console.log( ++i );
  };
}

// Note that `counter` and `counter2` each have their own scoped `i`.

var counter = makeCounter();
counter(); // logs: 1
counter(); // logs: 2

var counter2 = makeCounter();
counter2(); // logs: 1
counter2(); // logs: 2

i; // ReferenceError: i is not defined (it only exists inside makeCounter)

这种方式会产生与使用全局变量类似的结果，并以更安全、更优雅的方式在每个函数调用中使用它，不是吗？

2个问题

1-我看不出 i 变量作用域如何工作来维护计数器值，而不是在每次再次调用函数时将其重置为 0。我知道这是用来避免全局变量的，但我看不出它是如何维护不同调用之间的计数器值的

counter();

2-为什么只有当您将函数分配给另一个变量时，返回的函数才会显示console.log(value)？

var counter2 = makeCounter();
    counter2(); // logs: 1

但是

makeCounter(); //logs nothing

我不知道为什么。好吧，我猜是

makeCounter(); 

你只是声明了返回函数，而不是调用它......但我不知道为什么我这样做时会有所不同

var counter2 = makeCounter();
    counter2();

Answer 1

一旦将闭包与使用全局变量的等效单例进行比较，就很容易理解闭包:

(完全披露，这个例子是不好的做法)

var i = 0;

function counter() {
  console.log(++i);
}

counter();
counter();

重点是，上面是闭包避免的方法，以免污染全局命名空间。

您只需创建一个函数来初始化一个闭包，该闭包的作用与上面的示例类似，但具有自己的作用域，该作用域从全局命名空间中隐藏:

function makeCounter() {
  // these lines look familiar
  var i = 0;

  // we have to `return` the
  // reference to this function
  return function counter() {
    console.log( ++i );
  };
}

// here we are initializing a new scope
// and storing a reference to the function
// `counter()` defined within the closure
var counter = makeCounter();

// from here it's the same as the example above
counter();
counter();