IIFE用例：立即调用功能表达式

立即调用的函数表达式（IIFE），也称为自执行函数，是在创建后立即定义和执行的代码块。内部函数可以使用 function 关键字（传统方式）或箭头函数。无论哪种方式，整个函数都用一对括号括起来，后面再跟一对括号。这第二对括号是调用运算符，它允许函数立即执行。

使用函数声明的传统语法：

<code class="language-javascript">(
    function () {
        console.log('IIFE called');
    }
)();</code>

箭头函数语法：

<code class="language-javascript">(
    () => console.log('IIFE with arrow function called')
)();</code>

现在我们知道了什么是 IIFE，下一个问题是它为什么有用？以下是一些用例：

• 通过创建新的作用域来避免污染全局命名空间
• 创建具有私有变量的闭包
• 用于执行异步和等待函数
• 模块的创建

事实上，我的日常工作很大一部分是使用 Puppeteer 执行自动化测试。这些 Puppeteer 脚本是巨大的 IIFE（通常有几千行长），它们运行测试应用程序用户界面 (UI) 的代码。无论如何，让我们继续讨论我们的用例。

避免污染全局命名空间

这是什么意思？它本质上意味着避免同名全局变量和局部变量之间的名称冲突。这在大型企业应用程序中变得更加明显，在大型企业应用程序中，重用变量名的可能性会增加，尤其是在多个开发人员处理同一个应用程序时。下面的示例说明了这一点。

<code class="language-javascript">// 全局作用域
const value = "此变量位于全局作用域中，名为 'value'。";
const stateLocation = () => console.log("现在位于全局作用域");

stateLocation();
console.log(value);
console.log("*********************************************************");

(
    function () {
        // 函数作用域
        const value = "此变量位于函数作用域中，即使重用了变量名 'value'，也避免了全局污染";
        const stateLocation = () => console.log("现在位于 IIFE 的函数作用域");

        stateLocation();
        console.log(value);
    }
)();</code>

执行此代码后，输出如下：

<code>现在位于全局作用域
此变量位于全局作用域中，名为 'value'。
*********************************************************
现在位于 IIFE 的函数作用域
此变量位于函数作用域中，即使重用了变量名 'value'，也避免了全局污染</code>

创建具有私有变量的闭包

回想一下，闭包是一个内部函数，它可以访问外部函数作用域中的变量。这个计算圆面积的 IIFE 示例说明了这一点。此外，外部函数中的变量是私有的，因为它在函数外部是不可访问的。

<code class="language-javascript">const areaOfCircle = (
    function () {
        const pi = Math.PI; // 私有变量
        return function (radius) { // 具有访问外部作用域私有变量的闭包
            return pi * (radius ** 2);
        };
    }
)();

const areaWithRadius2 = areaOfCircle(10);
console.log('半径为 10 的圆的面积是', areaWithRadius2);
// console.log('PI = ', pi); // ReferenceError: pi is not defined</code>

输出：

<code>半径为 10 的圆的面积是 314.1592653589793</code>

用于执行异步和等待函数

IIFE 也可用于执行异步操作，例如网络调用。以下示例从模拟服务器获取待办事项列表。

<code class="language-javascript">(
    async function () {
        const response = await fetch('https://dummyjson.com/todos');
        const todosObject = await response.json();
        const todoList = todosObject.todos.map(todo => todo.todo);
        console.log(todoList);
    }
)();</code>

模块的创建

这是一个使用基本物理方程执行操作的模块。它可以导出并由其他程序使用。我将在另一篇文章“使用 IIFE 模块模式构建命令行物理计算应用程序”中进一步讨论这一点。请注意私有变量和闭包的使用。

<code class="language-javascript">export const physicsCalculations = (
    function () {

        // 下面的常量是私有变量
        const g = 9.80665; // 以米/秒平方为单位的重力常数
        const c = 299792458; // 以米/秒为单位的光速

        // 将作为此模块中的方法返回的函数
        const velocity = (distance, time) => distance / time;
        const acceleration = (speed, time) => speed / time;
        const potentialEnergy = (mass, height) => mass * g * height;
        const momentum = (mass, speed) => mass * speed;
        const energy = (mass) => mass * (c ** 2);
        const force = (mass, acc) => mass * acc;
        const kineticEnergy = (mass, speed) => 0.5 * mass * (speed ** 2);

        // 包含命名方法的对象，包括两个 getter 方法
        return {
            velocity,
            acceleration,
            potentialEnergy,
            momentum,
            energy,
            force,
            kineticEnergy,
            getSpeedOfLight: () => c,
            getGravityConstant: () => g
        };
    }
)();</code>

可以看到，IIFE 有无数的用例。它可以通过封装数据以及向应用程序添加模块化来提高数据的安全性。

以上是IIFE用例：立即调用功能表达式的详细内容。更多信息请关注PHP中文网其他相关文章！