JavaScript IIFES-为什么他们很重要

大家好，今天本人给大家带来文章《JavaScript IIFES-为什么他们很重要》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

您是否见过如下代码？

(function () {
  console.log("hello from an iife!");
})();

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

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

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

function() {
  console.log("this won't work!");
}();

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

为什么IIFE很重要？

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

例如：

(function () {
  var secret = "i'm hidden!";
  console.log(secret); // "i'm hidden!"
})();

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

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

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

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

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!"

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

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

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

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

以上就是《JavaScript IIFES-为什么他们很重要》的详细内容，更多关于的资料请关注golang学习网公众号！