JavaScript の匿名関数を学習して組み立てる_JavaScript のヒント

古代人は、「人に魚を教えるよりも、魚の釣り方を教えるほうが良い」と言いました。教師がいない場合は、自分で「魚を釣る」ことを学ぶしかありません。簡単に始めましょう！
次のコード行は最もよく知られていますが、なぜこのように書かれているか知っていますか?なぜこれらの数行のコードをページに追加するのでしょうか? jQuery オブジェクトはすでに導入されています。

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

(function($){
//関数 実装コード
})(jQuery);

ここから始めます！プログラマーは皆、Google と Baidu の使い方を知っています。私もそうです…ああ！これはJavaScriptの匿名関数であることがわかりました。

この匿名関数は何ですか?時間をかけて学んでください！
JavaScript で関数を定義するには、通常 3 つの方法があります。
1. 関数キーワード (関数) ステートメント:

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

function Name(a) {
return a;
}

2 . 関数リテラル:

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

var Name = function(a){
return a;
}

3. Function() コンストラクター:

var Name = new Function('a','return a;')
上記の 3 つのメソッドは同じメソッド関数 Name を定義します。最初のメソッドは最も一般的に使用されるメソッドで、関数を変数 Name にコピーします。 2 つの関数には名前がありません。これらはいわゆる匿名関数ですか?以下の説明をご覧ください。

関数リテラルと Function() コンストラクターには違いがあります。
(1). 関数リテラルは匿名関数であり、再帰関数を作成する場合、その構文では任意の関数名を指定できますが、Function() コンストラクターを使用するとそれができません。

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

var f = function fat(x) {
if (x return 1;
else
return x*fact(x-1);

(2) ). 関数 () コンストラクターを使用すると、実行時に Javascript コードを動的に作成およびコンパイルできます。この点では、グローバル関数 eval() に似ています。
(3). Function() コンストラクターは関数本体を解析し、実行されるたびに新しい関数オブジェクトを作成します。したがって、ループ内で Function() コンストラクターを呼び出したり、頻繁に実行される関数を呼び出したりする効率は非常に低くなります。対照的に、関数リテラルは、検出されるたびに再コンパイルされません。
(4). Function() コンストラクターを使用して関数を作成する場合、それは常にトップレベル関数として実行されます。

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

var y = "global"; >function constructionFunction () {
var y = "local";
return new Function("return y") // ローカル変数を取得できません
}
alert(constructFunction()(); ); // 出力 "global"


ここには Function オブジェクトという名前も含まれています。Function オブジェクトは JavaScript の固有のオブジェクトです。したがって、上記の 3 つはすべて関数オブジェクトです。

上記をまとめると、関数オブジェクトは通常の従来の方法と構築方法で関数を作成でき、関数は名前を持たないこともできます (匿名関数)。
匿名関数の続きですが、名前が示すように、匿名関数は実際の名前を持たない関数です。たとえば、上の例を見てみましょう。関数の名前を削除し、2 と 3 が同じ関数であるかどうかを判断します。

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

alert(typeof function(){}); // "関数"

alert(typeof function(a){return a;}); // "関数"
alert(typeof new Function( "a","re​​turn a;")) // "関数"


すべての戻り関数オブジェクトには名前がないようですが、それでも関数です。では、匿名関数を呼び出すにはどうすればよいでしょうか?
関数を呼び出すには、関数を見つけて参照する方法が必要です。したがって、名前を見つける必要があります。例 2 と例 3 の「名前」の役割です。そして、これは私たちがよく見る形式でもあります。
実際には、これを行う別の方法があります。つまり、最初に示した jQuery コードでは、() を使用して匿名関数を囲み、その後に 1 組のかっこ (パラメーター リストを含む) をその後に追加します。以下のコードを見てみましょう!

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

alert((function(x,y) {return x y ;})(2,3)); // "5"
alert((new Function("x","y","re​​turn x*y;"))(2,3)) ; // "6"

なぜこのメソッドが正常に呼び出せるのか不思議に思う人も多いのではないでしょうか？暇な時にもう一度コードを見てみると分かるかも知れません。

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

// 無名関数オブジェクトを abc に割り当てます
var abc=function(x,y){return x y;};
alert((abc).constructor==(function(x,y){return x y;}).constructor); // abc コンストラクターは無名関数のコンストラクターと同じです。つまり、2 つの関数の実装は同じです。

このアプリケーションがまだ奇妙だと思われる場合は、私がオンラインで読んだこの説明を見てください。
かっこを使用すると式の組み合わせをブロックに分割でき、各ブロック、つまりかっこの各ペアに戻り値があります。この戻り値は、実際には括弧内の式の戻り値です。したがって、一対のかっこを使用して無名関数を囲むと、一対のかっこが実際に返すものは、匿名関数の Function オブジェクトになります。したがって、かっこのペアと匿名関数は、名前付き関数と同様に参照されます。そこで、この参照変数の後にパラメータリストを追加すると、通常の関数の呼び出し形式になります。
最後に、匿名関数のコードパターンを見てみましょう!
エラー モード: 機能せず、ブラウザーは構文エラーを報告します。

function(){alert(1); }();
1. 関数リテラル: 最初に関数オブジェクトを宣言してから、それを実行します。
(function(){alert(1); } ) ( );
2. 優先順位式: Javascript は括弧の内側から外側に向かって式を実行するため、括弧を使用して式を強制的に実行できます。宣言された関数 。
(function(){alert(2); } ( ) );
3. void 演算子: かっこで囲まれていない単一のオペランドを実行するには、void 演算子を使用します。
void function(){alert(3); }()
これら 3 つのメソッドは同等ですが、どう考えるかによって異なります。
ははは！それはほぼそれだけです!今回はjQueryの最初の数文が関数リテラルだったことが分かりました！
(匿名関数)(パラメータ) (関数($){})(jQuery);