IIFE用例：立即调用功能表达式-js教程-PHP中文网

IIFE Use Cases: Immediately Invoked Function Expressions In Action

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

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

(
    function () {
        console.log('IIFE called');
    }
)();

登录后复制

箭头函数语法：

(
    () => console.log('IIFE with arrow function called')
)();

登录后复制

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

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

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

避免污染全局命名空间

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

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

登录后复制

创建具有私有变量的闭包

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

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

登录后复制

输出：

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

登录后复制

用于执行异步和等待函数

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

(
    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);
    }
)();

登录后复制

模块的创建

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

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
        };
    }
)();