ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript の即時呼び出し関数式 (IIFE) とは何ですか?

JavaScript の即時呼び出し関数式 (IIFE) とは何ですか?

Susan Sarandon
Susan Sarandonオリジナル
2025-01-04 00:53:42572ブラウズ

What is an Immediately-Invoked Function Expression (IIFE) in JavaScript?

JavaScript の (function() { } )() コンストラクトを理解する

(function() { } )() コンストラクト、これは、即時呼び出し関数式 (IIFE) とも呼ばれ、関数の作成直後に関数を定義して実行するために JavaScript で使用される独自のパターンです。特定のイベントによってトリガーされるイベント ハンドラーとは異なり、IIFE は、発生するとすぐに実行されます。

構文と構造

IIFE は、次の 2 つの主要な部分で構成されます。

  • 式のラッピング: 最初の部分には関数のラップが含まれます括弧内の式: (function() { } )。これは関数を定義しますが、まだ呼び出していません。
  • 即時呼び出し: 関数を実行するには、追加のかっこのセットが末尾に追加されます: (function() { } ) ()。この部分は関数をすぐに呼び出します。

説明

外側の括弧は関数定義を含む式を作成します。引数なしで内側の括弧を使用すると、関数が自動的に実行されます。

IIFE の利点

IIFE には、次のようないくつかの利点があります。

  • 名前空間プライバシー: IIFE 内の変数と関数は関数内でスコープされます。グローバル名前空間の汚染を防ぎます。
  • コードの再利用性: IIFE を使用してコードをモジュール化できるため、アプリケーションのさまざまな部分での再利用が容易になります。
  • パフォーマンスの最適化: IIFE でコードをラップすることにより、パーサーはコードを事前に最適化できます。

次のコード ブロックについて考えてみましょう:

(function() {
  var myVariable = 'Hello';
  console.log(myVariable);
})();

このコードが実行されると、myVariable 変数は内部でのみアクセス可能になります。 IIFE。関数の外では、未定義のままです。

document.onload との区別

IIFE と document.onload は両方とも即時実行を必要としますが、目的が異なります。 document.onload は、DOM がロードされるのを待ってから関数を実行するイベント ハンドラーです。一方、IIFE はイベントとは独立して実行され、主にカプセル化とコードの再利用に使用されます。

以上がJavaScript の即時呼び出し関数式 (IIFE) とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。