JavaScriptの関数モードの詳細

6323 ワード

JavaScript設計モードの役割は、コードの再使用性を高め、読み取り可能性を高め、コードをより容易に維持し、拡張することである.
javascriptでは、関数は一種のオブジェクトであり、これは彼がパラメータとして他の関数に伝達できることを示している.さらに、関数は、スコープを提供することもできる.
関数を作成する文法
名前付き関数式

 
  
 //        
  
 var add = function add(a,b){ 
  
     return a+b; 
  
 };

関数式

 
  
 //       
  
 var add = function(a,b){ 
  
     return a+b; 
  
 };

変数addに割り当てられた値は、関数定義自体です.このようにaddは関数となり、どこでも使えるようになる.
関数の宣言

 
  
 function foo(){ 
  
     //code here 
  
 }  //

末尾の分数記号では、関数式は常にセミコロンを使用しますが、関数の宣言にはセミコロンの終端は必要ありません.
関数宣言と表現
関数のアップグレード(hoisting)
関数宣言の挙動は名前付き関数式とは等しくなく、その違いは以下の例を参照してください.

 
  
  
  <br>     //     
  <br>     function foo(){alert("global foo!");} 
  <br>     function bar(){alert('global bar');} 
  <p></p> 
  <p>    function hoist(){<br>         console.log(typeof foo);//function<br>         console.log(typeof bar);//undefined</p> 
  <p>        foo();//local foo!<br>         bar();//TypeError: 'undefined' is not a function </p> 
  <p>        //  foo        <br>         function foo(){<br>             alert('local foo!');<br>         }</p> 
  <p>        //   bar   ，            <br>         var bar = function(){<br>             alert('local bar!');<br>         };<br>     }<br>     hoist(); <br>

すべての変数については、関数のどこで宣言しても内部で関数の上部に引き上げられます.関数に共通して適用されるのは、関数が変数のオブジェクトにのみ割り当てられているからです.
昇格させるということは、名前の通り、下のものを上に上げるということです.JSでは、定義が後のもの(変数や関数)を前のものに引き上げて定義します.上記の例から、関数hoist内部のfooとbarがトップに移動し、グローバルfooとbar関数をカバーすることがわかった.局所関数barとfooの違いは、fooが上部に引き上げられて正常に動作することにありますが、bar()の定義は向上しておらず、その宣言だけが引き上げられていますので、bar()を実行すると関数としてはundefinedではなくundefinedという結果が表示されます.
リアルタイム関数モード
関数もオブジェクトですので、それらは戻り値として使用できます.自己実行関数を使用する利点は、直接に匿名関数を宣言し、直ちに使用して、一回で使わない関数を定義することができます.また、ネーミング衝突の問題が避けられました.jsには名前空間の概念がありませんので、関数名の衝突が起こりやすいです.
パターン1:

 
  
  
  <br>     (function () { 
  <br>         var a = 1; 
  <br>         return function () { 
  <br>             alert(2); 
  <br>         }; 
  <br>     }()());//  2，         ，               
  <br>

モード2:自己実行関数変数の指向性

 
  
  
  <br>         var result = (function () { 
  <br>             return 2; 
  <br>         })();//         
  <p></p> 
  <p>        alert(result);//result              2；    result()   <br>

モード3:ネスト関数

 
  
  
  <br>         var result = (function () { 
  <br>             return function () { 
  <br>                 return 2; 
  <br>             }; 
  <br>         })(); 
  <p></p> 
  <p> alert(result());//alert(result)     2；alert(result())     function(){return 2}<br>

モード4:自動実行関数からその戻り値を変数に割り当てます.

 
  
     var abc = (function () { 
  
             var a = 1; 
  
             return function () { 
  
                 return ++a; 
  
             } 
  
         })();//      return           
  
    alert(abc());//   alert(abc)    return       ；   abc(),    return

モード5:関数内部で自身を実行し、再帰的に

 
  
 //           ，        ，   
  
 function abc() { abc(); }

コールバックモード
コールバック関数:関数write()をパラメータとして別の関数call()に渡すと、ある時点でコール(または呼び出し)が実行されます.この場合、writeはコールバック関数と呼ばれます.
非同期イベントモニター
コールバックモードには多くの用途があります.例えば、イベントモニターをページ上の要素に追加すると、実際にはコールバック関数のポインタが提供されます.この関数はイベント発生時に呼び出されます.例えば:

 
  
 document.addEventListener("click",console.log,false);

上記のコードの例は、ドキュメントがイベントをクリックした時に発泡モードでコールバック関数consolie.log()に伝達されることを示しています.
javascriptは特にイベントドライバのプログラミングに適しています.リターンモードのサポートプログラムは非同期で実行されます.
タイムアウト
コールバックモードを使用する別の例は、ブラウザのwindowオブジェクトを使用して提供されるタイムアウト方法:setTimeout()とset Interval()である.

 
  
  
  <br>     var call = function(){ 
  <br>         console.log("100ms will be asked…"); 
  <br>     }; 
  <br>     setTimeout(call, 100); 
  <br>

ライブラリのコールバックモード
jsライブラリを設計すると、コールバック関数が役に立ちます.1つのライブラリのコードはできるだけ多重化可能なコードを使用しなければなりません.このような汎用化を実現するのに役立ちます.私達が巨大なjsライブラリを設計する時、実際にはユーザーはその中の大部分の機能を必要としません.コア機能に集中して、フック形式のコールバック関数を提供できます.
Curry化
Curry化技術は、複数のパラメータを関数体に充填することにより、関数を新たに簡略化された関数に変換する技術である.【JavaScriptに精通している】
簡単に言えば,Curry化は関数変換を実行する過程である.以下の例:

 
  
  
  <br>     //curry  add()   
  <br>     function add(x,y){ 
  <br>         var oldx = x, oldy = y; 
  <br>         if(typeof oldy == "undefined"){ 
  <br>             return function(newy){ 
  <br>                 return oldx + newy; 
  <br>             }; 
  <br>         } 
  <br>         //     
  <br>         return x+y; 
  <br>     } 
  <br>     //   
  <br>     typeof add(5);//  "function" 
  <br>     add(3)(4);//7 
  <br>     //           
  <br>     var add2000 = add(2000); 
  <br>     add2000(10);//  2010 
  <br>

初めてadd()を呼び出したとき,それは戻る内部関数のための閉ループを作成した.この閉じたパケットは、元のx値とy値をプライベート変数oldxとoldyに格納する.
ここでは、任意の関数curryの一般的な方法を使用することができます.

 
  
  
  <br>     //     
  <br>     function add(x,y){ 
  <br>         return x + y; 
  <br>     } 
  <br>     //     curry           
  <br>     var newadd = test(add,5); 
  <br>     newadd(4);//9 
  <p></p> 
  <p>    //     ，       <br>     test(add,6)(7);//  13<br>

いつCurry化を使いますか?
同じ関数を呼び出していることが分かったとき、伝達パラメータはほとんど同じであり、関数はCurry化のための優れた候補パラメータであるかもしれない.

AndroidでPopWindowをクリックしてウィンドウの外とリターンキーが消え、インターフェースロックの実現