この記事では、例を通して、js での匿名関数の作成および呼び出しメソッドを分析します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。
匿名関数は名前のない関数であり、クロージャー関数 (closure) とも呼ばれ、名前を指定せずに関数を一時的に作成できます。コールバック関数 (callback) のパラメーターとして最もよく使用される値。初心者の多くは匿名関数を理解していません。ここで分析してみましょう。
関数 関数名(パラメータリスト) {関数本体;}
匿名関数を作成する場合は、次のようにする必要があります:
function(){関数本体;}
これは匿名関数であるため、通常はパラメータが渡されません。
なぜ匿名関数を作成するのでしょうか?匿名関数はどのような状況で使用されますか?匿名関数には主に 2 つの一般的なシナリオがあり、1 つはコールバック関数、もう 1 つは関数の直接実行です。
コールバック関数には、ajaxの非同期操作と同様にコールバック関数が必要です。ここでは詳しく説明しません。関数の直接実行については、次の例を見ると理解できます。
上記のコードでは、2 つのアラート ボックスが連続して出力されます。最初のアラート ボックスの内容は b で、2 番目のアラート ボックスの内容は a です。何かメリットはありましたか?はい、関数を使用して直接実行すると、変数のスコープを制限できるため、異なるスクリプト内の同じ変数が共存できます。
次に、まず匿名関数に関連する概念を予備的に見てみましょう。
関数宣言 (関数ステートメント) 関数を使用するには、まずその存在を宣言する必要があります。最も一般的に使用される方法は、次のような function ステートメントを使用して関数を定義することです。
function abc(){
// 処理するコード
}
function abc(){ // 処理するコード }
もちろん、関数はパラメーターを受け取ったり、値を返したりすることもできます。
クリップボードプリントへのプレーンコピーを表示しますか?
関数 abc(x,y){
x y を返します。
}
関数 abc(x,y){ return x y }
ただし、関数をどのように定義しても、JS インタープリターはそれを Function オブジェクトに変換します。たとえば、上記の例のいずれかで関数番号を定義している場合は、次のコードを入力します:
ブラウザーにプロンプト ボックスが表示され、abc が Function オブジェクトであることが通知されます。では、Function オブジェクトとは正確には何でしょうか?
関数オブジェクト
Function オブジェクトは JavaScript に固有のオブジェクトであり、すべての関数は実際には Function オブジェクトです。まず、Function オブジェクトがコンストラクターを直接使用して新しい関数を作成できるかどうかを見てみましょう。答えは「はい」です。例:
コードをコピー コードは次のとおりです。var abc = new Function("x","y"," return x* y;");
alert(abc(2,3)); // "6"
関数の宣言方法は理解できたと思います。では、匿名関数とは何でしょうか?
匿名関数の宣言
名前が示すように、匿名関数は実際の名前のない関数です。たとえば、上の例の関数の名前を削除してから、それが関数であるかどうかを判断してみましょう:
コードをコピー コードは次のとおりです:alert(typeof function(){});// "function"
alert(typeof function(x,y){return x y;});// "関数"
alert(typeof new Function("x","y","return x*y;"))// "関数"
alert(typeof function(){});// "関数"
alert(typeof function(x,y){return x y;});// "関数"
alert(typeof new Function("x","y","return x*y;"))// "function"
これらはすべて Function オブジェクトであることが簡単にわかります。つまり、すべて関数ですが、名前がないという 1 つの特徴があります。したがって、これらを「匿名関数」と呼びます。しかし、「名前」がないからといって、それを見つける方法はありません。これは、匿名関数をどのように呼び出すかという問題につながります。
匿名関数の呼び出し
関数を呼び出すには、関数を見つけて参照する方法が必要です。したがって、名前を見つける必要があります。例:
var abc=function(x,y){
x y を返します。
}
アラート(abc(2,3)); // "5"
上記の操作は、実際には、別の方法で関数を定義することと同じです。この使用法は、私たちがよく目にするものです。たとえば、DOM 要素のイベント処理関数を設定する場合、通常は名前を付けず、対応するイベント参照に匿名関数を割り当てます。
実際には、匿名関数を呼び出す別の方法があります。これは、先ほど見た jQuery フラグメントです。() を使用して匿名関数を囲み、括弧のペア (パラメーター リストを含む) を追加します。次の例をもう一度見てみましょう:
alert((function(x,y){return x y;}) (2, 3));// "5"
alert((new Function("x","y","return x*y;"))(2,3));// "6"
多くの人は、なぜこのメソッドが正常に呼び出せるのか疑問に思うかもしれません。このアプリケーションが奇妙だと思われる方は、以下の私の説明を読んでください。
括弧の役割を知っていますか?かっこを使用すると式の組み合わせをブロックに分割でき、各ブロック、つまりかっこの各ペアに戻り値があります。この戻り値は、実際には括弧内の式の戻り値です。したがって、一対のかっこを使用して無名関数を囲むと、一対のかっこが実際に返すものは、匿名関数の Function オブジェクトになります。したがって、かっこのペアと匿名関数は、名前付き関数と同様に参照されます。したがって、この参照変数の後にパラメータリストを追加すると、通常の関数の呼び出し形式になります。
上記の文章表現を理解できるかわかりませんが、それでも理解できない場合は、次のコードを見てください。
var abc=function(x,y){return x y;}; // 無名関数オブジェクトは abc
に割り当てられます
// abc のコンストラクターは、無名関数のコンストラクターと同じです。つまり、2 つの関数の実装は同じです。
alert((abc).constructor==(function(x,y){return x y;}).constructor);
追記: コンストラクターとは、オブジェクトを作成する関数を指します。つまり、関数オブジェクトによって表される関数本体です。
つまり、これ (括弧で囲まれた無名関数) を括弧の式によって返される関数オブジェクトとして理解すれば、この関数オブジェクトに対して通常のパラメーター リスト呼び出しを行うことができます。 (前に間違いを犯しました。関数式のみを使用して関数を直接呼び出すことはできません。匿名関数括弧を削除するには、式を代入する必要があります。つまり、(function(){alert(1)})() は次のようにする必要があります。 =function(){alert(1)}() と同じであるため、a= ) を削除することはできません。
閉店
クロージャとは何ですか?クロージャとは、第 1 レベルの関数の存在を許可する特定のプログラミング言語のコード ブロックを指し、第 1 レベルの関数で定義された自由変数は、第 1 レベルの関数が解放されるまで解放されません。第 1 レベルの関数の外側に適用された自由変数が解放されました。
どうやって?観終わった後は汗だくになるでしょう…大丈夫です、私もです（それは分かっていますが、私の表現力の問題です）。より簡単に説明しましょう。クロージャは実際には、関数をオブジェクトとして扱うことを可能にするプログラミング言語を指し、オブジェクト内の操作と同様にインスタンスを関数内に定義できます。関数のインスタンス オブジェクトが破棄されるまで、変数は関数内に保存できます。他のコード ブロックは、これらのインスタンス (ローカル) 変数の値を何らかの方法で取得し、アプリケーションを拡張できます。
このように説明しても明確になるかどうかはわかりませんが、まだ理解できない場合は、もう一度単純化してみましょう。クロージャは実際には、コードが実行中のメソッドを呼び出すことを可能にする、プログラミング言語で定義されたローカル変数を指します。関数。
次に例を見てみましょう:
コードをコピー コードは次のとおりです:var abc=function(y){
var x=y;// これはローカル変数です
return function(){
alert(x);// ここで、クロージャ機能の第 1 レベル関数のローカル変数の x が呼び出され、操作されます
alert(y--);//参照されるパラメータ変数も自由変数です
}}(5);//初期化
abc();// "5" "5"
abc();// "6" "4"
abc();// "7" "3"
アラート(x); // エラー! 「x」は定義されていません!
これを見ると、jQuery コード スニペットが閉じられているかどうかわかりますか?
私の理解を使ってみましょう。クロージャ機能が適用されるかどうかにかかわらず、コードに最も重要な要素、つまり破棄されていないローカル変数が含まれているかどうかを判断する必要があります。したがって、実装のない匿名関数はクロージャ機能を適用できないことは明らかです。しかし、匿名関数に実装がある場合はどうなるでしょうか?次に、破棄されていないローカル変数がその実装で使用されているかどうかを確認する必要があります。それでは、冒頭の記事の jQuery コード スニペットでは、JS のどのような機能が使用されているのでしょうか?そうなると、それは単なる匿名関数と匿名関数呼び出しになります。ただし、これはクロージャのプロパティを意味しており、クロージャはいつでも適用できます。
最も一般的な使用法:
(function() {
アラート('水');
})();
もちろん、パラメータを指定することもできます:
(function(o) {
アラート(o);
})('水');
匿名関数への連鎖呼び出しを使用したいですか?とてもシンプルです:
アラート(o);
引数を返します。呼び出し先
})('水')('ダウン');
一般的な匿名関数はすべてご存知でしょう。珍しい関数を見てみましょう:
コードをコピー
コードは次のとおりです:~(function(){
アラート('水');
})();//文章がちょっとかっこいいですね～
void function(){
アラート('水');
}();//一番効率が良いと言われています~
function(){
アラート('水');
}();
-function(){
アラート('水');
}();
~function(){
アラート('水');
}();
!function(){
アラート('水');
}();
(関数(){
アラート('水');
}());//ちょっと強制的な感じですね～
この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
