匿名関数(無名関数)

関数は通常、関数名を付けて定義し、関数名で呼び出し実行する。この関数名を省略した使い方も可能。関数名が無いので、変数名や関数名との重複など気にする必要がなくなる。だから一時的にしか使わない関数は匿名関数してしまったほうが便利。  

■(構文 1)関数を変数に代入する
   var 変数xyz = function() {実行する処理;};  //匿名関数の定義
   xyz();                   //関数の呼び出し実行

 (例)
  var Test1 = function(){alert("こんにちは!");}
  呼び出し実行は Test1();  ・・・→
   もう一つ  var Test2 = function(){return (4 + 3 * 2);};  ・・・→Test2();

■(構文 2)引数を付きの関数を、変数に代入する
  var 変数xyz = function(引数1, 引数2, ...){実行する処理;};  //匿名関数の定義
  xyz(引数1, 引数2, ..);                        //関数の呼び出し実行

 (例)
  var Test3 = function(a,b){alert(a + "さん、" + b + "さんこんにちは!");};
  呼び出し実行は Test3('Aさん','Bさん');  ・・・→
   もう一つ (例) var Test4 = function(a,b,c){return (a + b * c);};
        ・・・→alert(Test4(4,3,2));
(補足)引数の設定値を匿名関数本体にくっつける方法もあるようです
 (例) var Test5 = function(a,b,c){return (a + b * c);}(4,3,2);  ・・・→alert(Test5);
(この場合、alert(Test5())のように括弧()付けるとエラー。関数定義時に引数の値を与えるってのが、イマイチよくわからない??)

■(構文 3)変数に代入せず、即実行する (変数名を使わないので、これこそ完全な「無名」に)
  (function(引数1, 引数2, ...){実行する処理;})(引数1, 引数2, ...);

 (例)(function(){alert("こんにちは");})() ・・・→
 (例)(function(a,b){alert(a + 'さん、' + b + 'さんこんにちは!');})('Aさん','Bさん')・・・→
 (例)alert((function(a,b,c){return(a + b * c);})(4,3,2)) ・・・→

Sample Source......................................................................>>>

<script language="JavaScript"><!--
   var Test1 = function(){alert("こんにちは!");};
   var Test2 = function(){return (4 + 3 * 2);};
   var Test3 = function(a,b){alert(a + "さん、" + b + "さんこんにちは!" )};
   var Test4 = function(a,b,c){return (a + b * c);};
   var Test5 = function(a,b,c){return (a + b * c);}(4,3,2);

//--></script>
</head>

<body>
  <button onclick="Test1();">やってみよう!</button>
  <button onclick="alert(Test2());">やってみよう!</button>
  <button onclick="Test3('Aさん','Bさん');">やってみよう!</button>
  <button onclick="alert(Test4(4,3,2));">やってみよう!</button>
  (補足)<button onclick="alert(Test5);">やってみよう!</button>

 ・・・→<button onclick="(function(){alert('こんにちは');})();">やってみよう!</button>
 ・・・→<button onclick="(function(a,b){alert(a + 'さん、' + b + 'さんこんにちは!');})('Aさん','Bさん');">
                  やってみよう!</button>
 ・・・→<button onclick="alert((function(a,b,c){return(a + b * c);})(4,3,2))">やってみよう!</button>


(最終更新:12/12/6)
フレーム構成になっています・・・<[ホーム] >> [HTML整理ノート]>