js匿名自己実行関数例の詳細説明

匿名自己実行関数: メソッド名のない関数、クロージャ: クロージャは、別の関数スコープ変数にアクセスする権利を持つ関数を指します。この記事では主に、JS 匿名自己実行関数の例について詳しく説明します。 、皆さんのお役に立ちたいと思っています。

例で説明します:

for ループ、匿名の自己実行関数、setTimeout を使用するケースをインターネットで見つけました。

ケース 1:

var value1 =0,value2=0,value3=0;for(var i =1;i<=2;i++){  var i2 = i;  console.log(&#39;i2==>&#39;,i2);
  (function(){    var i3 = i;    console.log(&#39;i3==>&#39;,i3);
    setTimeout(function(){      console.log(&#39;i==>&#39;,i);      console.log(&#39;i2==>&#39;,i2);      console.log(&#39;i3==>&#39;,i3);
      value1 +=i;
      value2 +=i2;
      value3 +=i3;
    },1);
  })();
}

setTimeout(function(){  console.log(value1,value2,value3);
},100)

説明:

1. 匿名の自己実行関数のいくつかの構文

//输出结果i2==> 1i3==> 1i2==> 2i3==> 2i==> 3i2==> 2i3==> 1i==> 3i2==> 2i3==> 26 4 3

2. 自己実行関数とクロージャを使用して特別な状態で値を保存します

(function () { /* code */ } ()); // 推荐(function () { /* code */ })(); 
~function () { /* code */ }(); 
+function () { /* code */ }(); 
!function () { /* code */ }(); 
void function () { /* code */ }();

関数 変数はクロージャの特性に従って、for ループの各ループの異なる値がクロージャに渡されます

3.ループ内のステートメント 1 (コード ブロック) 開始前に実行

ステートメント 3 はループ (コード ブロック) の実行後に実行されます

以下のケースで分析します。

(function(){//自执行函数
    var i3 = i;    console.log('i3==>',i3);
    setTimeout(function(){//闭包
      console.log('i==>',i);      console.log('i2==>',i2);      console.log('i3==>',i3);
      value1 +=i;
      value2 +=i2;
      value3 +=i3;
    },1);
  })();

ログイン後にコピー

for ループの場合、i++ が for になります。ステートメント内のコードは終了後に実行され、setTimeout は非同期で実行されます。そのため、setTimeout の i 出力は、実際には最後のループが終了した後の ++ 後の i の値になります。 。

ケース 1 の説明:

これを見れば誰もが理解できるはずです。ケース 1 では、最初のループ中、自己実行関数では i2 = 1、i3 = 1 ですが、クロージャは別の場所に値を保存できます。したがって、この時点では setTimeout に渡された値のうち i3 のみがキャッシュに保存され、i2 と i は 2 回目のループで上書きされ、この時点では setTimeout は実行されません。 time, i2=2;i3=2 ;同様に、i3=2もクロージャに保存され、i2が上書きされます

この時点でforループの実行が終了し、setTimeout関数が実行され始めます。 for ループが終了し、最後のステートメント「i++」が実行されるため、今回は 2 ではなく 3 になります。また、クロージャの外側の i2 はクロージャ内に別の状態を保存せず、上書きすることしかできません。また、i3 の値は、クロージャ内の値は毎回クロージャによってメモリにキャッシュされ、状態が保持されるため、setTimeout の値はすべて 3、i2 は 2、i3 は各サイクルの値になります。この記事の内容:

利点 1: フロントエンド、Java、プロダクト マネージャー、WeChat アプレット、Python およびその他のリソースの優れたコレクション: https://www.jianshu.com/p/e8197d4d9880
利点 2: のフルセットWeChat ミニ プログラムの開始と実際の実装に関する詳細なビデオ チュートリアル: https://www.jianshu.com/p/e8197d4d9880

関連する推奨事項:

JavaScriptの自己実行関数とjQueryの拡張メソッドの詳しい解説

JavaScriptの自己実行関数とjQueryの拡張メソッド

js関数の自己実行関数

以上がjs匿名自己実行関数例の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。