ECMAScript 2020: 学习 JavaScript 的立即执行函数详解-JavaScript中文网-JavaScript教程资源分享门户

立即执行函数（Immediately Invoked Function Expression，简称 IIFE）是 JavaScript 中一个十分有用的概念。它允许我们创建一个函数表达式，并立即调用它，从而创建一个独立的作用域。在 ECMAScript 2020 中，IIFE 也有了一些新的变化和增强。本文将对 IIFE 进行详细解释，并提供一些示例代码，帮助你更好地理解和应用 IIFE。

IIFE 的基本概念

IIFE 的基本语法如下：

(function () {
  // 在这里编写代码
})();

在这个语法中，我们首先使用一个函数表达式创建一个匿名函数，然后使用括号将其包裹起来，并紧接着使用另一对括号来立即调用这个函数。这样做可以让这个函数立即执行，并且创建一个独立的作用域，其中的变量和函数都是私有的，不会对外部代码造成任何影响。

IIFE 的主要作用是封装代码，防止变量和函数名的冲突。例如，我们可以在 IIFE 中定义一些变量和函数，然后将它们作为一个整体传递给其他代码：

-- -------------------- ---- -------
--------- -- -
  --- ---- - -------
  -------- ---------- -
    ------------------- - - ---- - -----
  -
  --------------- - -
    --------- --------
  --
-----

在这个例子中，我们创建了一个 IIFE，并在其中定义了一个名为 name 的变量和一个名为 sayHello 的函数。然后，我们将 sayHello 函数作为一个对象的属性，将这个对象赋值给了全局变量 myModule。这样做可以让我们在其他代码中使用 myModule.sayHello() 来调用 sayHello 函数，而不必担心 name 变量会和其他变量冲突。

IIFE 的新特性

在 ECMAScript 2020 中，IIFE 有了一些新的变化和增强。下面是一些新特性的简要介绍：

块级作用域

在 ECMAScript 2020 之前，JavaScript 中只有函数作用域和全局作用域，没有块级作用域。这意味着，在一个 if 语句或循环语句中定义的变量会泄漏到外部作用域中。例如：

if (true) {
  var name = 'John';
}
console.log(name); // 输出 "John"

在这个例子中，我们在 if 语句中定义了一个变量 name，但是这个变量的作用域并不仅限于 if 语句中，而是泄漏到了外部作用域中。

在 ECMAScript 2020 中，我们可以使用块级作用域来解决这个问题。例如：

if (true) {
  let name = 'John';
}
console.log(name); // 抛出 ReferenceError

在这个例子中，我们使用 let 关键字来定义变量 name，它只在 if 语句的作用域中有效。在外部作用域中，我们无法访问 name 变量，它会抛出 ReferenceError。

IIFE 也可以受益于块级作用域。例如，我们可以在一个块级作用域中定义一些变量和函数，然后将它们作为一个整体传递给其他代码：

-- -------------------- ---- -------
-
  --- ---- - -------
  -------- ---------- -
    ------------------- - - ---- - -----
  -
  --------------- - -
    --------- --------
  --
-

在这个例子中，我们使用一个块级作用域来定义 name 变量和 sayHello 函数，并将它们作为一个对象的属性，将这个对象赋值给了全局变量 myModule。这样做可以让我们在其他代码中使用 myModule.sayHello() 来调用 sayHello 函数，而不必担心 name 变量会和其他变量冲突。

箭头函数

在 ECMAScript 2020 中，我们可以使用箭头函数来定义 IIFE，而不必使用传统的函数表达式。例如：

(() => {
  // 在这里编写代码
})();

在这个例子中，我们使用箭头函数定义了一个 IIFE，它与传统的函数表达式相比，更加简洁和易读。

可选的 `catch` 绑定

在 ECMAScript 2020 中，我们可以在 try/catch 语句中使用可选的 catch 绑定。例如：

try {
  // 在这里编写代码
} catch {
  // 在这里编写错误处理代码
}

在这个例子中，我们省略了 catch 关键字后面的绑定名称，这意味着我们不需要访问错误对象。这种写法更加简洁和易读。

IIFE 的最佳实践

在使用 IIFE 时，有一些最佳实践可以帮助我们编写更加健壮和可维护的代码。下面是一些最佳实践的简要介绍：

使用严格模式

在 IIFE 中使用严格模式可以帮助我们避免一些常见的错误和陷阱。例如，它可以禁止使用未声明的变量，禁止重复的函数参数名，禁止使用 with 语句等等。要在 IIFE 中使用严格模式，只需要在函数表达式中添加 'use strict'; 即可。

(function () {
  'use strict';
  // 在这里编写严格模式代码
})();

避免使用全局变量

在 IIFE 中定义的变量和函数只在 IIFE 的作用域中有效，不会对外部代码造成任何影响。因此，我们应该尽可能避免使用全局变量，以避免命名冲突和代码污染。如果必须使用全局变量，可以将它们作为对象的属性，以避免与其他全局变量冲突。

-- -------------------- ---- -------
--------- -- -
  --- -------- - -
    ----- -------
    --------- -------- -- -
      ------------------- - - --------- - -----
    -
  --
  --------------- - ---------
-----

在这个例子中，我们将 myModule 对象赋值给了全局变量 window.myModule，以避免与其他全局变量冲突。

避免使用 `var` 关键字

在 ECMAScript 2020 中，我们可以使用 let 和 const 关键字来定义变量，它们具有块级作用域，可以避免一些常见的错误和陷阱。因此，我们应该尽可能避免使用 var 关键字，以避免变量泄漏到外部作用域中。

-- -------------------- ---- -------
--------- -- -
  --- ---- - -------
  -------- ---------- -
    ------------------- - - ---- - -----
  -
  --------------- - -
    --------- --------
  --
-----

在这个例子中，我们使用 let 关键字来定义变量 name，它只在 IIFE 的作用域中有效。在外部作用域中，我们无法访问 name 变量，它不会泄漏到外部作用域中。

结论

立即执行函数是 JavaScript 中一个十分有用的概念，它可以让我们创建一个独立的作用域，防止变量和函数名的冲突，并封装代码，提高代码的可维护性和可读性。在 ECMAScript 2020 中，IIFE 也有了一些新的变化和增强，例如块级作用域、箭头函数和可选的 catch 绑定。在使用 IIFE 时，我们应该遵循一些最佳实践，例如使用严格模式、避免使用全局变量和避免使用 var 关键字。希望本文能够帮助你更好地理解和应用 IIFE。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/675f8722e49b4d071625a760

ECMAScript 2020: 学习 JavaScript 的立即执行函数详解