ホームページ  >  記事  >  ウェブフロントエンド  >  js匿名自己実行関数例の詳細説明

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

小云云
小云云オリジナル
2018-03-19 17:28:121920ブラウズ

匿名自己実行関数: メソッド名のない関数、クロージャ: クロージャは、別の関数スコープ変数にアクセスする権利を持つ関数を指します。この記事では主に、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)
rreee

説明:

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 (コード ブロック) 開始前に実行
ステートメント 2 はループ (コード ブロック) の実行条件を定義します
ステートメント 3 はループ (コード ブロック) の実行後に実行されます



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

(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);
  })();
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 サイトの他の関連記事を参照してください。

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