解释 JavaScript 中的 IIFE

在本文中，您将了解 JavaScript 立即调用函数表达式 (IIFE)。 JavaScript 立即调用函数表达式是定义为表达式并在创建后立即执行的函数。下面显示了定义立即调用的函数表达式的语法。

句法：

(function(){
    // Function Body goes here
})();

IIFE 也可以与箭头函数一起使用，如下所示。

(() => {
    // Function Body goes here
})()

现在我们了解了 IIFE 到底是什么，让我们尝试了解一些可能需要使用 IIFE 或自执行函数的情况。

IIFE 的常见用例

1、避免全局执行上下文的污染：

立即调用的匿名函数可用于初始化代码。设置环境所需的变量随后不再使用并且不应使命名空间混乱。如果您了解 javascript 中的执行上下文，那么您必须了解全局范围的概念。存在于全局范围内的任何变量或函数都可以在整个程序的任何位置访问。但有时我们需要确保这些变量不能仅由程序的特定部分访问。

例如：假设您正在编写一个库，并且对于功能部分，您将使用易于理解并与您需要使用它们的上下文相匹配的变量名称。但是在库中，您不会仅仅因为您在库代码中使用了一些变量名就强迫任何其他开发人员使用不同的名称。您希望确保任何现有（或新）代码不会意外干扰其他变量或覆盖函数和方法。确保不会发生此类事故的方法是将所有代码包装在 IIFE 中。这就是为什么许多库以 IIFE 风格编写源代码的原因。

例子：

HTML

  
    let firstVariable = "Hello";
    (() => {
        // Some initiation code
        let secondVariable = "Geeks";
    })();
  
    // The secondVariable will 
    // be discarded after the function is executed
    console.log("First Variable:", firstVariable)
    console.log("Second Variable:", secondVariable)

输出：

First Variable: Hello
Uncaught ReferenceError: secondVariable is not defined

2. 将变量设为私有：

IIFE 也可用于为可访问函数建立私有方法，同时仍公开一些属性以供以后使用。

例子：

HTML

const User = (() => {
  
    let userName = "Geek";
    let userSecret = "Likes using IIFE";
    return {
        getName: () => userName,
        getSecret: () => userSecret
    }
})();
  
console.log(User.getName()); // returns "Geek"
console.log(User.getSecret()); // returns "Likes using IIFE"
console.log(User.userName); // returns undefined

输出：在上面的示例中，我们可以轻松访问从函数返回给我们的 get 方法，但我们无法访问函数内部定义的任何属性。许多 javascript 库都遵循类似的模式。

Geek
Likes using IIFE
undefined

结论： IIFE 在常规编码项目中可能不会被大量使用，但它是存在的东西之一，并且在现实世界中有实际的用例。您可能会发现自己创建的项目可能会被其他开发人员使用，而 IIFE 等概念肯定会派上用场。您可能还会发现一些广泛使用闭包、IIFE、函数柯里化、组合等概念的开源项目。这些概念是函数式编程和 javascript 的核心，因此了解这些主题肯定会帮助您学习 JavaScript。