JavaScript IIFES-为什么他们很重要

您是否见过如下代码？

<code class="javascript">(function () {
  console.log("hello from an iife!");
})();</code>

这就是立即调用函数表达式 (IIFE)。它在定义后立即执行。IIFE 是在 JavaScript 中创建隔离作用域并避免污染全局作用域的有效方法。

乍一看语法可能有点奇怪，但其实很简单。您定义一个函数，用括号将其括起来，然后在末尾添加 () 立即调用它：

外层括号至关重要——它们将函数转换为表达式而非声明。这很重要，因为 JavaScript 不允许您立即调用函数声明。例如，以下代码会报错：

立即学习“Java免费学习笔记（深入）”；

<code class="javascript">function() {
  console.log("this won't work!");
}();</code>

通过将函数用括号括起来，您告诉 JavaScript：“将其视为表达式，而非声明。”

为什么IIFE很重要？

IIFE 在 ES6 之前非常流行，因为它们有助于避免全局作用域污染。IIFE 允许您创建一个临时作用域，变量可以在不泄漏到全局空间的情况下存在。

例如：

PaperFake

AI写论文

下载

<code class="javascript">(function () {
  var secret = "i'm hidden!";
  console.log(secret); // "i'm hidden!"
})();

console.log(secret); // ReferenceError: secret is not defined</code>

在这个例子中，secret 变量只能在 IIFE 内部访问。一旦 IIFE 执行完毕，secret 就消失了。这对于保持代码整洁并避免与其他脚本冲突非常有用。

在块作用域变量（let 和 const）出现之前，创建新作用域的唯一方法是使用函数。可以说 IIFE 的流行仅仅是因为我们没有块作用域变量，这有点令人惋惜。

假设您正在构建一个模块，需要初始化一些数据，但不想将其暴露给外部。您可以使用 IIFE 封装该逻辑：

<code class="javascript">const counter = (function () {
  let count = 0;

  return {
    increment: function () {
      count++;
      console.log(count);
    },
    reset: function () {
      count = 0;
      console.log("Counter reset!");
    },
  };
})();

counter.increment(); // 1
counter.increment(); // 2
counter.reset(); // "Counter reset!"</code>

这里，count 变量是私有的。与之交互的唯一方法是通过 IIFE 返回的 increment 和 reset 方法。

ECMAScript 规范没有明确提及 IIFE，但它确实解释了函数表达式。根据规范，函数表达式会被评估为其所在的更大表达式的一部分。当您在末尾添加 () 时，您就立即调用了该函数表达式。

随着块作用域变量（let 和 const）和 ES6 模块的引入，IIFE 不像以前那么必要了。但在某些情况下，它们仍然很方便，例如您需要创建快速、隔离的作用域，或者在处理旧代码库时。

更多关于巩固 JavaScript 基础的信息...