IIFE用例：立即調用功能表達式-js教程-PHP中文網

IIFE Use Cases: Immediately Invoked Function Expressions In Action

立即調用的函數表達式（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中文網其他相關文章！