JavaScript の基礎: 即時実行関数

関数フォーマットを即時実行

即時実行関数の形式は通常、次のようになります。

# フォーマット 1 (//W3C はこのフォーマットを推奨)
（関数 （）{
 }())
 
#形式 2 (ただし、これは最も一般的に使用される方法の 1 つです)
（関数 （）{
 })();

実際、上記からわかるように、関数を即時に実行する場合、関数名は一般に記述されませんが、これはあまり意味がありません。結局のところ、即時関数は関数名を介して呼び出す必要はありません。これは、関数を文字通り定義するときの効果に似ています。

ここで、クロージャと即時実行される関数を組み合わせた例を見てみましょう。

var 楽しい = (
関数（）{
  関数テスト(a,b){
      コンソールログ(a+b);
  }    
  リターンテスト;
}
)()

ここに画像の説明を挿入

関数を即座に実行する他の方法 – 式

上記は即時実行関数のフォーマット定義ですが、この関数を実装する他の方法もあります。たとえば、次の方法は上記のフォーマットではありません。

！関数（）{
    コンソールにログ出力します。
}()

ここに画像の説明を挿入

出力は 2 行あります。最初の行は test で、これは関数をすぐに実行した結果です。先頭に追加の行があるため、true が出力されます。、これは暗黙的な変換中に言及されました。以下は、ブール型で改行を強制します。

ここでもう一つ疑問があります。なぜこのメソッドを実装できるのでしょうか?

これがどのように起こるかを分析するために、まず式関数を見てみましょう。

var テスト = 関数(){
    console.log("テスト式")
}
#この宣言の後、どのように使用するのでしょうか?以下のようにtest();

ここに画像の説明を挿入

このとき、大胆なアイデアが頭に浮かびました。割り当てられた関数は、() に変数値を追加することで実行できるのに、なぜ直接記述できないのでしょうか。

var テスト = 関数(){
    console.log("テスト式")
}()

ここに画像の説明を挿入

ここで、式関数にも即時実行効果があることがわかります。

(追加情報: なぜ undefined があるのでしょうか? この関数自体には戻り値がないため、ブラウザのコンソールパネルに undefined という値が出力されるためです。)

関数の直後に括弧を付けても大丈夫ですか?

関数（）{
    console.log("テスト式")
}()

ここに画像の説明を挿入

最後に () を置く前に式前提条件を使用する必要があることがわかります。そうしないと、エラーが報告されます。

実はこの時、私には大胆なアイデアがあったんです！次のメソッドは実際に関数を式関数に変換するので、後続の + () を直接実行できます。そこで、大胆なアイデアが浮かびました。この場合、関数の前にプラス記号 (+) を追加して試してみましょう。

+関数(){
    console.log("テスト式")
}()

ここに画像の説明を挿入

プラス記号は次のようになります。

+	-
！	〜

もちろん、いわゆる掛け算や割り算の記号は実現できません。この魔法の効果を持つ別の魔法のキーワード、つまり「新しい」と「空」があります。

新しい関数(){
    console.log("テスト式")
}()

ここに画像の説明を挿入

もう一つは、論理演算子||と&&も実装に使用できることです。

ただし、これはその特性に応じて true または false を前に付ける必要があり、単独では使用できません。

1 && 関数(){
    console.log("テスト式")
}()
 または 0 || 関数(){
    console.log("テスト式")
}()

ここに画像の説明を挿入

この機能を実現できる魔法の記号 (カンマ) もあります。

1,関数(){
    console.log("テスト式")
}()

ここに画像の説明を挿入

カンマを使用すると、前の式関数が真か偽かに関係なく、次の式関数が実行されることがわかります。

即時実行される関数はパラメータを取ることができる

即時実行される関数には、次のようにパラメータを持つこともできます。

(関数(a,b){
    コンソールログ(a,b)
})(1,2)

ここに画像の説明を挿入

応用

この質問は典型的な面接の質問です。まず、次のHTMLを作成します。

<!DOCTYPE html>
<html>
<ヘッド> 
<メタ文字セット="utf-8"> 
<title>テスト</title> 
</head>
<本文>
<ul id=”テスト”>
    <li>これが最初のものです</li>
     <li>これは2番目です</li>
    <li>これは3番目です</li>
 </ul>
<スクリプト>
  var liList = document.getElementsByTagName('li');
     (var i=0;i<liList.length;i++) の場合
     {
         liList[i].onclick=関数(){
             コンソールにログ出力します。
         }
     };
</スクリプト>
 </本文>
</html>

目的は、ラベルの数をクリックして数値を出力することですが、結果は

ここに画像の説明を挿入

li がクリックされた時点で for ループはすでに完了しているため、先ほど学習した let キーワードを使用してこれを解決できます。

  var liList = document.getElementsByTagName('li');
     for(let i=0;i<liList.length;i++)
     {
         liList[i].onclick=関数(){
             コンソールにログ出力します。
         }
     };

ここに画像の説明を挿入

これで問題は解決できますが、即時関数は使用されません。もちろん、関数を即時実行することで修正することもできます。

 var liList = document.getElementsByTagName('li');
     for(let i=0;i<liList.length;i++)
     { (関数(a){
        liList[a].onclick=関数(){
             コンソールにログ出力します。
         } 
      }）（私）
      };

ここに画像の説明を挿入