对 js 函数语法感到困惑

Question

我在 freecodecamp.org 上做一些 ES6 语法练习，理解上下文有些困难。我知道这在 JS 中称为IIFE，

(function () {
    statements
})();

所以，这没关系，但为什么我不能在 first sum 中获得 ..args 而不是仅在内部 sum 中获得？

const sum = (function(...args) {
  console.log(...args); //this shows nothing
  return function sum(...args) {
    console.log(...args); // this shows 1,2,3
    return args.reduce((a, b) => a + b, 0);
  };
})();
console.log(sum(1, 2, 3)); // 6

如果我用这个修改上面的 sn-p 怎么办，他们在做同样的事情吗？引擎盖下是否存在任何逻辑差异？

function sum(...args) {
  console.log(args);
  return args.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3)); // 6

主要问题是为什么一个函数sum返回另一个函数 sum 在里面。

Answer 1

在第一个代码中，调用 IIFE 时不带参数，请参阅：

})();

所以，得到的args数组为空，当展开成参数列表时，得到的参数列表为空；没有什么可记录的。带有空参数列表的console.log 不执行任何操作。如果您使用至少一个参数调用 IIFE，它会记录一些东西，但是：

const sum = (function(...args) {
  // Now, it shows something!
  console.log(...args);
  return function sum(...args) {
    console.log(...args); // this shows 1,2,3
    return args.reduce((a, b) => a + b, 0);
  };
})(9999);
console.log(sum(1, 2, 3)); // 6

在第二个代码中，只有一个函数，而不是一个封装在另一个函数中的函数，并且那个函数是总是带参数调用的。如果你用 no 参数调用它并将它们传播到console.log，你会看到同样的效果：

function sum(...args) {
  console.log(...args);
  return args.reduce((a, b) => a + b, 0);
}
sum(); // 6