IIFE 中的变量

Question

我正在尝试理解 Javascript 中的闭包。我遇到了这个例子：

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

add();
add();
add();

我不明白为什么计数器的值会变成3。我可以清楚地看到每次调用函数时计数器都被初始化为0。

Answer 1

让我们看看按什么顺序解释了什么。

第 1 步：
在var add = (something)()中，首先要评估的是“某物”。
步骤 #2：
一旦评估为有效函数，就会有一个对它的引用，该引用尚未存储在变量中并且永远不会存储，因为由于第二组括号，该函数将立即执行。
步骤 #3：
该函数做了两件事：
1) 它将 0 分配给 counter 变量。
2) 它声明了另一个函数：function () {counter += 1; return counter}。对该函数的引用将分配给 add 变量。
步骤#4：
所以每次调用add()，执行的是counter += 1; return counter.

范围：
counter 变量只存在于外部函数和内部函数中。外部函数从未将其引用存储到变量，因为它被立即调用，所以它永远不会被再次调用。内部函数引用存储在 add 中，可以再次调用。

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

// Notice that add is the "inner" function
console.log(add)

// What is returned by add is the counter value
var firstCall = add();
var secondCall = add();
var thirdCall = add();
console.log(firstCall, secondCall, thirdCall)

// the counter does not exist outside the scope of the inner function
console.log(typeof(counter))

关于您的问题的 Wakata.io... Particularly the CompuThink 部分，我可以建议您详细了解 JS 的解释方式。

Answer 2

括号内的函数，后跟另一对括号的是一个 IIFE - 立即调用的函数表达式。

//immediately invoked function expression

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

之所以这样称呼是因为此函数在定义后立即被调用。

变量add没有赋值IIFE。相反，它会获得调用函数的结果，如下所示。

function() {
  counter += 1;
  return counter;
}

闭包是函数访问其创建范围的方式。

由于闭包行为，此函数可以访问 IIFE 中的计数器变量。尽管 IIFE 的生命周期已经结束，但由于关闭，添加变量中的函数可以访问它。

每当我们调用 add() 时，它实际上是在更新 IIFE 中的计数器。一直以来，IIFE 都没有再执行过。它运行在初始阶段只有一次。

IIFE 中的变量

Variables in a IIFE

javascript

closures