JavaScript関数パターンの詳しい解説_基礎知識-jsチュートリアル-php.cn

JavaScript関数パターンの詳しい解説_基礎知識

WBOY

リリース： 2016-05-16 16:31:58

オリジナル

1338 人が閲覧しました

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

js関数の基本部分：javascript学習メモ(4)関数関数部分

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

名前付き関数式

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

//名前付き関数式

var add = function add(a,b){

b を返します;

};

関数式

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

//匿名関数とも呼ばれます

var add = function(a,b){

b を返します;

};

関数の宣言

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

関数 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 を出力