IIFE の使用例: すぐに呼び出される関数式の実際の動作

自己解釈関数とも呼ばれる機能式（IIFE）は、作成直後に定義および実行されるコードブロックです。内部関数は、キーワード（従来の方法）または矢印関数を使用できます。何らかの形で、関数全体がブラケットのペアに含まれ、次にブラケットのペアに含まれます。この2番目のペアのブラケットは、オペレーターを呼び出すことです。これにより、関数がすぐに実行できます。

関数宣言を使用する伝統的な文法：function

矢印関数の構文：

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

今、私たちはIifeとは何ですか？次の質問は、なぜそれが役立つのかということです。以下はいくつかのケースです：

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

汚染を避けるための新しい範囲を作成することにより、グローバルな命名スペース

プライベート変数を使用して閉鎖を作成します

• 非同期および待機機能を実行するために使用されます
• モジュールの作成
実際、私の毎日の仕事の大部分は、操り人形師を使用して自動テストを実行することです。これらの操り人形師のスクリプトは、テストアプリケーションユーザーインターフェイス（UI）のコードを実行する巨大なIIFE（通常は何千人もの大統領）です。いずれにせよ、私たちのユースケースについて議論し続けましょう。
汚染のグローバルな命名空間を避けてください

これはどういう意味ですか？それは基本的に、グローバル変数と同じ名前のローカル変数との間の競合を意味します。これは、大規模なエンタープライズアプリケーションでは、特に複数の開発者が同じアプリケーションを処理する場合、変数名を再利用する可能性が高くなります。次の例はこれを示しています。

このコードを実行した後、出力は次のとおりです。

プライベート変数を使用して閉鎖を作成します

<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>

振り返ってみると、閉じることは、外部関数範囲内の変数にアクセスできる内部関数です。この計算循環領域のこのIifeの例は、これを示しています。さらに、外部関数の変数は、関数の外側にアクセスできないため、プライベートです。

<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モジュールモードを使用してコマンドラインの物理コンピューティングアプリケーションを構築する」でさらに説明します。プライベート変数と閉鎖の使用に注意してください。

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 の使用例: すぐに呼び出される関数式の実際の動作の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。