はじめに
JavaScript を学習すると、匿名関数を自己実行するコードによく遭遇します。今日は主に自己実行について説明します。
これについて詳しく知る前に、この記事でのこの機能の名前は完全に正しいとは限らないため、人によってはこれをどう理解するかによって異なります。はすぐに呼び出されるので、自分の理解に応じて名前を選択することができます。ただし、多くの人がそれを「自己実行」と呼ぶと聞きましたが、著者は後に「」と呼ぶように説得するためにこう言いました。即時呼び出し「.関数式」。
この記事の英語のオリジナルアドレス: http://benalman.com/news/2010/11/immediately-invoked-function-expression/
自己実行とは何ですか?
JavaScript では、関数に対して宣言された変数と関数は関数内にのみ存在するため、関数は実行時に実行コンテキストを作成します。このコンテキストは、関数を呼び出すときに自由変数を作成する簡単な方法を提供します。またはプライベートサブ関数。
// この関数は別の関数を返すため、その中で、この関数は自由変数 i
// にアクセスできます。つまり、この内部関数は実際には内部オブジェクトを呼び出す権限を持っています。
function makeCounter() {
// makeCounter 内でのみアクセスできます
var i = 0;
return function () {
console.log( i); ;
}
// counter と counter2 は異なるインスタンスであり、それぞれ独自の範囲に i があることに注意してください。
var counter = makeCounter();
counter(); // ログ: 1
counter(); // ログ: 2
var counter2 = makeCounter(); ; // ログ: 1
counter2(); // ログ: 2
alert(i); // 参照エラー: i が定義されていません (i が makeCounter 内に存在するため)。
多くの場合、makeCounter の複数のインスタンスは必要ありません。場合によっては、戻り値を表示する必要もありません。
問題の核心
function foo(){} や var foo = function(){} のような関数を宣言するとき、最後に括弧を追加することで自己実行を実現できます。 foo( ) として、コードを確認します:
var foo = function(){ /* code */ }
// ...最後に括弧を付けても自動的に実行できるということですか? ?
function(){ /* code */ }(); // SyntaxError: Unexpected token (
//
上記のコードは、実行してもエラーになります。パーサーがグローバル関数または関数内部関数キーワードを解析するとき、コンパイラーに明示的に指示しない場合、デフォルトで関数式ではなく関数宣言が使用され、名前のない関数がスローされるためです。関数宣言には名前が必要なため、構文エラー メッセージが表示されます。
興味深いことに、前の名前でも構文エラーが表示されますが、理由は異なります。上記では、式の後に括弧 () を追加すると、式はすぐに実行されますが、ステートメントの後に括弧 () を追加すると、意味がまったく異なり、単なるグループ化演算子
コードをコピー
( 1 );
詳細については、ECMA-262-3 の第 5 章「関数」を参照してください。
自己実行関数式
上記の問題を解決するには、JavaScript では文を括弧 () で囲むことができないため、非常に簡単です。 point function キーワードを解析するとき、パーサーは対応するコードを関数宣言ではなく関数式に解析します。
// 次の 2 つの括弧 () はすぐに実行されます
(function () { /* code */ } ()) // これを使用することをお勧めします
(function () { /* code */ })();これも使用できます
// 括弧 () と JS の &&、XOR、カンマ、およびその他の演算子は関数式と関数宣言を明確にするため
// したがって、パーサーがそれらの 1 つがすでに式であることを認識すると、その他はデフォルトですべて式です
// ただし、次の章の内容の説明に注意してください
var i = function () { return 10; } ();
true && function (); /* code */ } ();
0, function () { /* code */ } ()
// 戻り値を気にしない場合、または難しいことを恐れない場合
// を読み取るには、単項演算記号
を追加することもできます!function () { /* code */ } ();
~function () { /* code */ } () ;
-function () { /* code */ } ();
function () { /* code */ } (); new キーワードを使用する場合もあります。も使用できますが、よくわかりません 効率
// http://twitter.com/kuvos/status/18209252090847232
new function () { /* code */ }
new function () { /* code */ } () // パラメーターを渡す必要がある場合は、括弧を追加するだけです ()
クロージャを使用して状態を保存する
通常の関数を実行するときにパラメータを渡すのと同じように、自己実行します。これらのパラメータを渡されると、自己実行関数式はこれらのロックされた受信パラメータを使用して状態を効果的に保存できるため、関数式はこの方法でパラメータを渡すこともできます。
// 逆に、ループが実行された後は、クリックしたときにのみ値を取得します
// この時点で実際に値を取得するため
// したがって、問題はありませんどの接続がクリックされたか、最後に表示されるのは、リンク #10 です (a 要素が 10 個ある場合)
var elems = document.getElementsByTagName('a');
for (var i = 0; i <) ; elems.length; i ) {
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('I am link #' i);
}, 'false');
}
// これは自己実行関数式クロージャ内にあるため使用できます
// i の値はロックされたインデックスとして存在し、ループ内で実行される 終了後、最終的に i の値は a 内の要素の総数 (例えば 10) になりますが
// クロージャ内の lockedIndex の値は実行されているため変化しません
// したがって、接続時間をクリックすると、正しい結果が得られます。
var elems = document.getElementsByTagName('a');
for (var i = 0; i
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('私はリンク #' lockedInIndex);
}, 'false' );
})(i);
}
// ハンドラー関数
の自己実行関数式を使用して、次のように適用することもできます。 // 外側の addEventListener の代わりに
// しかし、比較的に言うと、上記のコードの方が読みやすいです
var elems = document.getElementsByTagName('a');
for (var i = 0; i elems[i].addEventListener('click', (function (lockedIndex) {
return function (e) {
e.preventDefault();
alert('私はリンク #' lockedIndex);
})(i), 'false');
実際、上記の 2 つの例の lockedIndex 変数は i に置き換えることもできます。これは外部 i と同じ関数では動作しないため、これも匿名関数クロージャの能力です。 。
自己実行匿名関数と即時実行関数式の違い
この投稿では、これを常に自己実行関数と呼んでいます。正確には、自己実行匿名関数 (Self -匿名関数の実行) ですが、元の英語のテキストでは、著者は常に即時呼び出し関数式という名前の使用を推奨してきました。著者は、説明するためにたくさんの例も示しました。
// これは自己実行関数であり、関数自体が実行されます。内部的に、再帰的に
function foo() { foo(); }
// マークされた名前がないため、これは自己実行型の匿名関数です
// 実行するには、arguments.callee 属性を使用する必要があります
var foo = function () { argument.callee() };
// これは、foo タグ名だけがそれ自体を参照する場合もあります。 foo を別の関数に変更すると、慣れ親しんだ自己実行型の匿名関数が得られます。
var foo = function () { foo() }; これを自己実行型の匿名関数と呼ぶ人もいます。 (そうでなくても)自分自身を呼び出さないので、すぐに実行するだけです。
(function () { /* code */ } ());
// 関数式にラベル名を追加するとデバッグが容易になります
// ただし、ラベル名を付ける必要があり、関数は匿名です
(function foo() { /* code */ } ());
// 即時に呼び出される関数式 (IIFE) も自己実行できますが、一般的には使用されない可能性があります。 🎜> (function () { argument.callee(); } ());
(function foo() { foo(); } ());
// さらに、次のコードが実行されます。 BlackBerry 5 エラー、名前付き関数式で名前が定義されていないため
// はは、奇妙です
(function foo() { foo(); } ());
ここでのいくつかの例が、誰もが自己実行とは何か、即時召命とは何かを理解するのに役立つことを願っています。
注: argument.callee は ECMAScript 5 厳密モードでは廃止されているため、このモードでは使用できません。
最後のナレーション: モジュール モード
このすぐに呼び出される関数式について話しているときに、このモードに慣れていない場合は、最初にコードを見てみましょう。
var counter = (function () {
var i = 0;
return {
get: function () {
return i;
},
set: function (val) {
i = val ; >},
increment: function () {
return i;
}
} ()); カウンターは複数のオブジェクトです上記のコードは実際にはメソッド
counter.set(3); // 4
counter として反映します。 .increment(); // 5
counter.i; // i は返されたオブジェクトのプロパティではないため未定義です
i; // 参照エラー: i が定義されていません (i はクロージャ内にのみ存在するため)
モジュール パターンの詳細については、前回の投稿「JavaScript を深く理解するシリーズ (2): モジュール パターンの包括的な分析」を参照してください。
続きを読む
さらに詳しく知りたい場合は、上記の例のいくつかを参照して、すぐに呼び出される関数 (つまり、自己実行関数と呼ばれるもの) の式を理解していただければ幸いです。関数とモジュール パターン 詳細については、引き続き以下の Web サイトにアクセスしてください:
ECMA-262-3 の詳細第 5 章。機能
関数と関数スコープ
- Mozilla Developer Network

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

メモ帳++7.3.1
使いやすく無料のコードエディター
