IIFE 与普通函数，在全局范围内管理变量时表现不同

Question

为什么示例 1 和示例 2 return 的结果不同？ conter 变量（示例 1）实例仍然可以从全局范围访问。

示例 1：

const increment = (()=> {
    let counter = 0;
    //console.log(counter);
    const credits = (num) => console.log(`I have ${num} credit(s).`);
    return () => { counter++; credits(counter); }
})();

increment();//I have 1 credit(s).

increment();//I have 2 credit(s).

示例 2：

function a() {
    let counter = 0;
    const credits = (num) => console.log(`I have ${num} credit(s).`);
    return () => { counter++; credits(counter); }
}
a()();//I have 1 credit(s).
a()();//I have 1 credit(s).

谢谢。

Answer 1

let counter 行初始化一个 counter 变量。只要该行运行s.

就会发生这种情况

在第一个例子中，你运行那行一次当你调用最后带有 })() 的 IIFE 时，返回的函数IIFE 引用了您初始化的那个 counter 变量。

在第二个示例中，每次 a 函数运行s 时，您运行该行 - 每次您执行时都会创建一个新的 counter 变量 a()。所以如果你这样做 a()()，你创建一个计数器变量，在返回的函数中增加它，记录它，然后丢弃它（因为 counter 不能'不再被任何东西引用）。调用 a()() 然后调用 a()() 会产生两个单独的 counter 变量，这两个变量都递增 1 并记录。

如果您想通过调整第二个示例来记录 2，请在调用之前将返回的函数分配给一个变量，然后调用该返回函数两次（而不是调用 a 两次）。

function a() {
    let counter = 0;
    const credits = (num) => console.log(`I have ${num} credit(s).`);
    return () => { counter++; credits(counter); }
}
const fn = a();
fn();//I have 1 credit(s).
fn();//I have 2 credit(s).

IIFE 与普通函数，在全局范围内管理变量时表现不同

IIFE vs noraml functions, Behave differently regarding managing variables in the global scope

javascript

scope

iife