JavaScriptの設計パターンの役割は、コードの再利用性と読みやすさを改善し、コードの維持と拡張を容易にすることです。
JavaScriptでは、関数はオブジェクトのクラスです。つまり、他の関数のパラメーターとして渡すことができます。さらに、関数は範囲を提供することもできます。
関数を作成するための構文
名前付き関数式
// name function expression var add = function add(a、b){return a+b;}; var foo = function bar(){console.log(foo === bar);}; foo(); // trueそれらは同じ関数を参照していることがわかりますが、これは関数本文でのみ有効です。
var foo = function bar(){}; console.log(foo === bar); // referenceError:barは定義されていませんただし、bar()を呼び出しても関数を呼び出すことはできません。
var foo =(function bar(){console.log(foo === bar);})(); // false関数式
//匿名関数としても知られていますvar add = function(a、b){return a+b;};変数追加に割り当てられた値は、関数定義自体です。このようにして、Addはどこでも呼び出すことができる関数になります。
機能の宣言
function foo(){//ここにコード} //ここにセミコロンは必要ありません後続のセミコロンでは、関数式は常にセミコロンを使用する必要があり、関数の宣言ではセミコロンの終了は必要ありません。
宣言関数と関数式の違いは、JSの事前コンパイル期間中に、宣言関数が最初に抽出され、次にJSコードが順番に実行されることです。
console.log(f1); // [function:f1]
console.log(f2); // undefined、javascriptは完全に解釈および実行されていませんが、解釈の前にjavascriptを「事前張り」します。プリコンパイルプロセス中に、決定的な関数が最初に実行されます。
function f1(){console.log( "i am f1");} var f2 = function(){console.log( "i am f2");};グローバルな範囲の構築中に宣言機能が完了するため、宣言する関数はウィンドウオブジェクトのプロパティであり、これが機能を宣言する場所に関係なく、最終的にウィンドウオブジェクトに属する関数を宣言します。
JavaScript言語では、匿名関数はウィンドウオブジェクトに属します。匿名関数を定義するとき、メモリアドレスを返します。この時点で変数がこのメモリアドレスを受信した場合、匿名関数がグローバル実行環境構築中に定義および割り当てられるため、匿名関数をプログラムで使用できます。
var f2 = function(){console.log( "i am f2");}; console.log(f2()); // i am f2(){console.log(this === window); // true})()();関数宣言と表現
機能プロモーション(巻き上げ)
関数宣言の動作は、指定された関数式と同等ではありません。違いは巻き上げの動作です。次の例を参照してください。
<script type = "text/javascript"> // global function function foo(){alert( "global foo!");} function bar(){alert( 'global bar');} function hoist(){console.log(typeof foo); // function console.log(typeof bar); bar(); // typeRerr: '未定義'は関数ではありません} //変数バーのみが宣伝され、関数実装パーツは宣伝されていませんvar bar = function(){alert( 'localbar!'); }; } hoist(); </script>すべての変数について、それらが身体内で宣言されている場合はどこでも、それらは関数の上部に内部的に宣伝されます。関数の一般的な適用の理由は、関数が変数に割り当てられたオブジェクトのみであるためです。
名前が示すように、改善とは、次のことを上に言及することを意味します。 JSでは、以下の定義に定義されているもの(変数または関数)をアップグレードすることです。上記の例からわかるように、関数内の機能ホイストのFOOとBARは上部に移動し、グローバルなFOOとバーの機能をカバーします。ローカル機能バーとFooの違いは、Fooが上部に昇格し、正常に実行できることですが、Bar()の定義は改善されていませんが、その宣言のみが促進されます。したがって、bar()が実行されると、結果は関数として使用される代わりに未定義です。
リアルタイム機能モード
関数はオブジェクトでもあるため、戻り値として使用できます。自己実行関数を使用する利点は、匿名関数を直接宣言してすぐに使用することです。これは、一度使用されない関数の定義を避け、競合の命名の問題から回避されることです。 JSには名前空間の概念はないため、機能名が競合するのは簡単です。命名紛争が行われると、最後に宣言されたものが勝ちます。
モード1:
<script>(function(){var a = 1; return function(){alert(2);};}()()()()();()パターン2:自己実行関数変数の指さし
<script type = "text/javascript"> var result =(function(){return 2;})(); // function alert(result); // results result points fort u of rexecuted function; result()がポップアップすると、エラーが発生します</script>パターン3:ネストされた関数
<script type = "text/javascript"> var result =(function(){return function(){return 2;};})(); alert(result()); // alert(result)function(){return 2} </script>モード4:自己解釈関数は、その返品値を変数に割り当てます
var abc =(function(){var a = 1; return function(){return ++ a;}})() ABC()の場合、返された後の関数が実行されますパターン5:関数は、再帰的に内部的に実行されます
//これは自己執行関数であり、関数は内部的にそれ自体を実行します、再帰関数abc(){abc(); }コールバックモード
callback function:function write()を別のfunction call()への引数として渡すと、Call()は、ある時点でwrite(またはcall)を実行(または呼び出す)ことができます。この場合、write()はコールバック関数と呼ばれます。
非同期イベントリスナー
コールバックモードには多くの用途があります。たとえば、イベントリスナーがページ上の要素に接続されている場合、実際にイベントが発生したときに呼び出されるコールバック関数へのポインターを提供します。のように:
document.addeventlistener( "click"、console.log、false);
上記のコードの例は、ドキュメントがクリックしたときにバブルモードのコールバック関数console.log()を示しています。
JavaScriptは、コールバックモードが非同期に実行するプログラムをサポートするため、イベント駆動型プログラミングに特に適しています。
タイムアウト
コールバックモードを使用するもう1つの例は、ブラウザのウィンドウオブジェクトによって提供されるタイムアウトメソッドを使用する場合です。
<script type = "text/javascript"> var call = function(){console.log( "100msは尋ねられます..."); }; setimeout(call、100); </script>ライブラリのコールバックモード
JSライブラリを設計するとき、コールバック関数は役立ちます。ライブラリのコードは、再利用可能なコードを可能な限り使用する必要があり、コールバックはこの一般化を達成するのに役立ちます。巨大なJSライブラリを設計するとき、ユーザーはそのほとんどを必要としないということです。コア機能に焦点を当て、「フックフォーム」でコールバック関数を提供することができます。
カレー
Curryingは、複数のパラメーターを関数本文に埋めることにより、関数を新しい単純化された(より少ないパラメーター)関数に変換する手法です。 - - JavaScriptに熟練しています】
簡単に言えば、カレー化は変換プロセス、つまり関数変換のプロセスです。次の例に示すように:
<script type = "text/javascript"> // curry based add()関数add(x、y){var oldx = x、oldy = y; if(typeof oldy == "undefined"){return function(newy){return oldx + newy; }; } //完全に適用されますx+y; } // test typeof add(5); // output "function" add(3)(4); // 7 //新しい関数var add2000 = add(2000); add2000(10); // output 2010 </script>Add()が初めて呼び出されると、返された内部関数の閉鎖が作成されます。この閉鎖は、元のXとYの値をOldxおよびOldyにプライベート変数に保存します。
これで、次のような関数を使用して、カレーの一般的な方法を使用できます。
<script type = "text/javascript"> //通常の関数add(x、y){return x + y; } // curry function new function var newAdd = test(add、5); newAdd(4); // 9 //別のオプション、新しい関数テスト(追加、6)(7); //出力13 </script>を直接呼び出すいつカレーを使用するか
同じ関数が呼び出され、渡されたパラメーターのほとんどが同じであることがわかった場合、関数はカレー化の良い候補である可能性があります