javascript - IIFE 在 ES6 之后有何用处？

Question

我正在学习 JavaScript，我了解一般的函数类型、闭包等。但是对于 IIFE，我最初的 react 是“如果它立即被调用，为什么不直接内联它”。所以我去读了this article描述了 IIFE 的“4 个实际用例”。然而，其中两个与规避 var 带来的作用域问题有关(在 ES6 之后，let 和 const 不再是一个问题) > 正在介绍)。第三个是处理全局变量命名冲突(C++ 中命名空间通常处理的问题)。而且，据我所知，导入别名(也在 ES6 中引入)解决了这个问题。

剩下的用例是关于闭包的:

作者声称将闭包与 IIFE 相结合为我们提供了“两大好处”:1) 变量的范围是安全的，以及 2) 您可以从外部修改函数内部的变量。但是，根据我对闭包的理解，您可以通过定期闭包获得这两种好处。

例如，

const IIFEclosure = (() => {
  let v = 10;
  return {
    value: _ => v,
    set: newValue => v = newValue,
  };
})();

const handle = () => {
  let v = 10;
  return {
    value: _ => v,
    set: newValue => v = newValue,
  };
};
const closure1 = handle();
const closure2 = handle();

console.log(IIFEclosure.value(), closure1.value(), closure2.value()) // 10 10 10
IIFEclosure.set(20);
closure1.set(30);
closure2.set(40);
console.log(IIFEclosure.value(), closure1.value(), closure2.value()) // 20 30 40

我在这里看到的唯一区别是，您可以使用 handle 创建常规闭包的多个实例，而使用 IIFEclosure 则只能创建一个，因为它会立即在放置并且没有“句柄”。我想它的好处是不会用额外的变量名污染命名空间。我不确定在实践中有一个只能实例化一次的闭包是否有用。但是，除此之外，据我所知，上述两个好处在两个示例中都得到了满足。

因此，如果我的上述推理是有效的，那么这将引出我的开放性问题； IIFE 在后 ES6 JavaScript 中的好处/用例是什么(如果有的话)？

Answer 1

闭包还有一个小优势:函数本身可以匿名，避免了一个(函数)变量。例如，在您的示例中，非 IIFE 将 handle 作为额外变量。如果您想最大程度地减少当前作用域(甚至可能是全局作用域)的垃圾，那么 IIFE 仍然很有用。

我还发现 IIFE 在顶层对于使用 await 很有用——尽管它会被命名为 IIAFE:

(async () => {
    const response = await fetch("....");
    const object = await response.json();
    // ...
    const result = await lookup(object.id);
    // ...
})();

自 ECMAScript 2022 推出以来 top-level await ，不再需要在 modules 中有这样的 async 包装器。

关于全局名称别名的用例，也可以用普通 block 解决:

{
    const $ = jQuery;
    // Here comes $-referencing code that will not conflict with "outside" $ use.
}