JavaScript_javascriptスキルの関数パターンの詳細説明

JavaScript デザイン パターンの役割は、コードの再利用性と読みやすさを向上させ、コードの保守と拡張を容易にすることです

JavaScript では、関数はオブジェクトの一種です。つまり、関数はパラメータとして他の関数に渡すことができるほか、スコープも提供できます。

関数を作成するための構文

名前付き関数式

コードをコピーします コードは次のとおりです:

//名前付き関数式
var add = function add(a,b){
b を返します;
};

関数式

コードをコピーします コードは次のとおりです:

//匿名関数とも呼ばれます
var add = function(a,b){
b を返します;
};

変数 add に割り当てられる値は関数定義そのものです。このようにして、add はどこからでも呼び出すことができる関数になります。

関数の宣言

コードをコピーします コードは次のとおりです:

関数 foo(){
// ここにコードを記述します
} //ここではセミコロンは必要ありません

関数式では末尾のセミコロンを常に使用する必要があり、関数宣言では末尾のセミコロンは必要ありません。

関数の宣言と式

関数の巻き上げ

関数宣言の動作は、名前付き関数式の動作と同等ではありません。次の例を参照してください。

コードをコピー コードは次のとおりです:

<スクリプトタイプ="text/javascript">
//グローバル関数
関数 foo(){alert("global foo!");}
関数 bar(){alert('グローバル バー');}

関数 hoist(){
console.log(typeof foo);//関数
console.log(typeof bar);//未定義

foo();//ローカル foo!
bar();//TypeError: '未定義' は関数ではありません

//変数 foo と実装者が昇格されます
function foo(){
alert('local foo!');
}

//変数 bar のみがプロモートされ、関数実装部分はプロモートされません
var bar = function(){
alert('地元のバー!');
};
}
ホイスト();

すべての変数は、関数本体のどこで宣言されているかに関係なく、内部的に関数の先頭にホイストされます。これが関数に広く適用できる理由は、関数が変数に割り当てられた単なるオブジェクトだからです。
アセンションとは、その名が示すとおり、下にあるものを上に引き上げることです。 JSでは最後に定義したもの（変数や関数）を前に定義するように昇格させることです。 上の例からわかるように、関数ホイスト内の foo と bar が先頭に移動され、グローバルな foo 関数と bar 関数がカバーされます。ローカル関数 bar と foo の違いは、foo は最上位に昇格され、通常どおり実行できますが、bar() の定義は昇格されず、その宣言のみが昇格されるため、bar() が実行されると結果が表示されることです。関数として使用されるのではなく、未定義として使用されます。

インスタント機能モード

関数はオブジェクトでもあるため、戻り値として機能します。自己実行関数を使用する利点は、匿名関数を直接宣言してすぐに使用できるため、一度使用した後は使用しない関数を定義する必要がなくなり、名前の競合の問題が回避されることです。そのため、関数名の競合が発生しやすくなります。名前の競合が発生した場合は、最後に宣言されたものが優先されます。

モード 1:

コードをコピー コードは次のとおりです:

<スクリプト>
(関数() {
var a = 1;
return 関数 () {
アラート(2);
};
}()());//ポップアップ 2、最初のかっこは自己実行、2 番目のかっこは内部匿名関数
を実行します

モード 2: 自己実行関数変数を指す

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
var result = (function () {
return 2;
})();//関数はここで実行されました

alert(result);//result は自己実行関数の戻り値 2 を指します。result() がポップアップすると、エラーが発生します。

モード 3: 入れ子関数

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
var result = (function () {
return 関数 () {
2 を返します;
};
})();

alert(result());//alert(result) がポップアップしたとき 2;alert(result()) がポップアップしたとき function(){return 2}

モード 4: 自己実行関数は戻り値を変数に代入します

コードをコピーします コードは次のとおりです:

var abc = (function () {
var a = 1;
return 関数 () {
return a;
}
})();//自己実行関数は変数
に戻った後に関数を返します。 alert(abc());//alert(abc)の場合はreturn文以降のコードが表示され、abc()の場合はreturn以降の関数が実行されます

モード 5: 関数は内部的に再帰的に実行されます

コードをコピーします コードは次のとおりです:

// これは自己実行関数です。この関数は内部的に再帰的に実行されます。
関数 abc() { abc() }

コールバックモード

コールバック関数: 関数 write() をパラメータとして別の関数 call() に渡すと、call() は特定の瞬間に write() を実行 (または呼び出し) することがあります。この場合、write() はコールバック関数と呼ばれます。

非同期イベントリスナー

コールバック パターンには多くの用途があります。たとえば、ページ上の要素にイベント リスナーをアタッチする場合、実際にはイベントの発生時に呼び出されるコールバック関数へのポインターが提供されます。例:

コードをコピー コードは次のとおりです:

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

上記のコード例は、ドキュメントのクリック イベントが発生したときに、バブリング モードでコールバック関数 console.log() に渡される を示しています。

JavaScript は、コールバック モードがプログラムの非同期実行をサポートしているため、イベント駆動型プログラミングに特に適しています。

タイムアウト

コールバック モードを使用する別の例は、ブラウザのウィンドウ オブジェクトによって提供されるタイムアウト メソッド、setTimeout() および setInterval() を使用する場合です。

コードをコピー コードは次のとおりです:

<スクリプトタイプ="text/javascript">
var call = function(){
console.log("100ms が要求されます...");
};
setTimeout(call, 100);

ライブラリ内のコールバック パターン

js ライブラリを設計する場合、ライブラリのコードは可能な限り再利用可能なコードを使用する必要があり、コールバックはこの一般化を実現するのに役立ちます。実際、巨大な JS ライブラリを設計する場合、ユーザーはほとんどの関数を必要とせず、コア関数に集中して「フック形式」でコールバック関数を提供できるため、拡張機能の構築が容易になります。およびカスタム ライブラリ メソッド

カレー

Curry テクノロジは、関数本体に複数のパラメータを埋め込むことによって、関数を新しい簡略化された (受け入れられるパラメータが少なくなった) 関数に変換するテクノロジです。 ————【JavaScriptに堪能な方】

簡単に言えば、カリー化は変換プロセス、つまり関数変換を実行するプロセスです。以下の例:

コードをコピー コードは次のとおりです:

<スクリプトタイプ="text/javascript">
// カレーベースの add() 関数
関数 add(x,y){
var oldx = x、oldy = y;
If(古いタイプ == "未定義"){
return 関数(newy){
return oldx newy;
};
}
//完全に適用されました
return x y;
}
//テスト
Typeof add(5);//「関数」を出力
Add(3)(4);//7
//新しい関数を作成して保存します
var add2000 = add(2000);
Add2000(10);//2010 を出力

add() が初めて呼び出されるとき、返された内部関数のクロージャが作成されます。このクロージャは、元の x 値と y 値をプライベート変数 oldx と oldy に保存します。

これで、次のような関数カレーの一般的なメソッドを使用できるようになります。

コードをコピー コードは次のとおりです:

<スクリプトタイプ="text/javascript">
//通常の関数
関数 add(x,y){
return x y;
}
// 関数をカリー化して新しい関数を取得します
var newadd = test(add,5);
newadd(4);//9

//別のオプションは、新しい関数を直接呼び出すことです
Test(add,6)(7);//出力 13

カリー化を使用する場合

同じ関数が呼び出されており、渡されたパラメーターが圧倒的に同じであることが判明した場合、その関数はカリー化のパラメーターとして適している可能性があります