JavaScript 中的立即调用函数表达式（IIFE）

Question

立即调用函数表达式 （简称 IIFE）是一种 JavaScript 设计模式，它声明一个匿名函数并立即执行它。

// Prints "Hello, World!"
(function() {
  console.log('Hello, World!');
})();

您还可以在 IIFE 模式中使用箭头函数：

// Prints "Hello, World!"
(() => {
  console.log('Hello, World!');
})();

周围的括号 function() { ... }是强制性的：没有这些括号，你会得到一个语法错误。 这是因为括号告诉 JavaScript 语言解析器将函数定义视为一个 表达式 。

为什么是 IIFE？

IIFE 很有用，因为它们可以定义在 IIFE 之外无法访问的局部变量。 例如，IIFE 通常用于在浏览器中执行 JavaScript，而不会污染全局范围。

<script>
  // Execute some code immediately without defining `answer` as a
  // global variable.
  (function() {
    var answer = 42;
  })();

  typeof answer; // 'undefined'
</script>

如果您希望某个计算的一些临时变量不想暴露给其他计算，您也可能会看到 IIFE。 例如，假设您想计算购物车的总成本，但不希望 salesTax 泄漏到周围范围的变量：

const subtotal = 40;
const total = (function() {
  const salesTax = product.salesTaxRate * subtotal;
  return subtotal + salesTax;
})();

使用一元运算符

如果将 IIFE 与一元运算符一起使用，则可以省略 IIFE 周围的括号，例如 void operator。

// Prints 'Hello, World'
void function() { console.log('Hello, World'); }();

你不太可能看到 void 很有用， 异步函数 因为 await 是一元运算符。 这样你就可以 await 在异步 IIFE 上：

const answer = await async function() {
  return 42;
}();
answer; // 42