三分钟带你了解 JavaScript 中的 IIFE（立即调用函数表达式）

与许多编程语言一样，JavaScript 也隐含了全局变量：这些变量在声明和定义之后，可以被任何函数在任何位置访问，而无需明确指定它是全局变量。例如：

// a global variable
var exampleStr = "Hello, World!"

function exampleFunction(){
    console.log(exampleStr)
}

exampleFunction();

// --> logs "Hello, World!" (contents of exampleStr global variable)

这里定义了一个全局变量，其值为“Hello, World!”，被调用的函数可以访问该变量并将其记录到控制台。

全局变量对于像这样的小型网站和代码示例可能很有用，但它们可能会在大型项目和 Web 应用程序中造成问题。

全局变量可能造成危害的主要原因之一是变量命名冲突，当一个函数创建或引用一个变量，而该变量的名称已被另一个全局变量占用时，就会发生这种情况。

在这个例子中，发生冲突的变量名是name：

var name = "Fred"

function myFunction(){
    // intended to create variable, but changed global instead
    name = "John"

    // "John"
    console.log(name);
}

// "John", not "Fred"
console.log(name);

虽然这是一个非常简单的例子，但在包含大量 JavaScript 代码的程序中，全局变量可能很难跟踪，并导致严重的意外问题，这些问题可能极难调试。

例如，PHP 编程语言的创建者 Rasmus Lerdorf 曾在一家公司工作，该公司遇到了一个非常复杂的 bug，涉及全局变量和冲突。为了找到这个 bug，他打印了数千行代码，并用荧光笔标记出来，最终找到了两个同名的全局变量，它们在代码中完全不相关的位置发生了冲突。如果您感兴趣，可以听听他关于 PHP 25 周年的演讲，了解更多详情。

IIFE 帮助解决全局变量问题

全局变量经常被创建，因为代码位于全局作用域中，而不是函数中，无论这些函数是显式定义的，还是在 DOM 事件中使用，或者被包装在类似 `if` 或 ` setTimeout()if` 的语句中setInterval。

立即调用函数表达式 (IIFE) 允许在函数内部编写 JavaScript 代码，并立即调用该函数。IIFE 中的所有代码都不应污染全局作用域或创建任何全局变量。

用(function(){})()或(()=>{})()

即时函数表达式 (IIFE) 的编写方法是将函数用括号括起来，然后像平常一样调用该函数();。

以下是一个缺少 IIFE 的程序示例，它会污染全局范围：

现在，有了 IIFE：

引入 ES6 箭头函数后，IIFE 可以进一步简化，如下所示：

// Without ES6:
(function(){

})();

// With ES6:
(()=>{

})();

何时使用即时财务表达式

在许多更复杂的程序和 Web 应用中，完全消除全局变量会很有帮助。在这种情况下，几乎不会定义任何全局代码——代码将在函数和立即执行函数表达式 (IIFE) 中定义。

事实上，完全不使用全局变量是很常见的，JavaScript 有一个特殊的字面量use strict来阻止使用全局变量，并在创建全局变量时抛出错误。

对于小型网站和脚本，我个人建议尽可能使用立即执行函数表达式（IIFE），并限制全局代码的使用。虽然为了简洁起见，我在一些基础网站中也会使用全局变量，但重要的是要清楚地了解代码的全局作用域，以及由此可能出现的意外问题。

希望您喜欢这篇文章，并发现 IIFE 对您未来的项目和脚本有所帮助。

感谢您的浏览。

— 加布里埃尔·罗穆阿尔多，2020 年 2 月 29 日