JavaScriptの関数の種類を簡単解説_基礎知識

この記事では主に通常関数、匿名関数、クロージャ関数を紹介します

1. 共通機能の紹介
1.1 例

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

function ShowName(名前) {
アラート(名前);
}

1.2 Js 内の同名関数の上書き

JS では、同じ関数名と異なるパラメーター シグネチャを持つ関数を定義すると、後の関数が前の関数を上書きします。呼び出された場合、次の関数のみが呼び出されます。

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

var n1 = 1;

関数 add(value1) {
n1 1 を返します;
}
alert(add(n1));//次の関数が呼び出され、出力: 3

function add(value1, value2) {
戻り値1 2;
}
alert(add(n1));//出力: 3

1.3 引数オブジェクト

arguments は C# の params に似ており、変数パラメーターを操作します。関数に渡されるパラメーターの数は、定義時のパラメーターの数よりも大きくなります。

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

function showNames(name) {
alert(name);//張三
for (var i = 0; i alert(arguments[i]);//張三、李斯、王武
}
}
showNames('張三','李思','王呉');

1.4 関数のデフォルト範囲値

関数で戻り値が指定されていない場合、デフォルトの戻り値は「未定義」です

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

関数 showMsg() {
}
alert(showMsg());//出力: 未定義

2. 匿名関数

2.1 変数無名関数

2.1.1 説明
変数やイベントに関数を割り当てることができます。

2.1.2 例

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

//変数の匿名関数。左側には変数、イベントなどを指定できます。
var anonymousNormal = function (p1, p2) {
アラート(p1 p2);
}
anonymousNormal(3,6);//出力 9

2.1.3 該当するシナリオ
①関数名の汚染を避ける。最初に名前を付けて関数を宣言し、それを変数またはイベントに割り当てると、関数名を悪用することになります。

2.2 名前のない匿名関数

2.2.1 説明
つまり、関数が宣言されると、その後にパラメーターが続きます。 JS 構文がこの関数を解析すると、内部のコードがすぐに実行されます。

2.2.2 例

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

(関数 (p1) {
アラート(p1);
})(1);

2.2.3 該当するシナリオ
①実行は一度だけで済みます。ブラウザがロードされている場合、関数は 1 回実行するだけで済み、その後は実行されません。

3. クロージャ機能

3.1 説明

関数 A が内部で関数 B を宣言し、関数 B が関数 B の外部の変数を参照し、関数 A の戻り値が関数 B への参照であるとします。この場合、関数 B はクロージャ関数です。

3.2 例

3.2.1 例 1: グローバル参照とローカル参照

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

関数 funA() {
var i = 0;
Function funB() { //クロージャ関数 funB
私;
アラート(i)
}
funB を返します;
}
var allShowA = funA(); //グローバル変数参照: 累積出力 1、2、3、4 など

関数partShowA() {
var showa = funA(); //ローカル変数参照: 1
のみを出力 showa();
}

allShowA は関数 funA を参照するグローバル変数です。 allShowA()を繰り返し実行すると、1、2、3、4などの累積値が出力されます。

関数partShowA()を実行します。ローカル変数showaのみがfunAを参照するために内部で宣言されているため、実行後、スコープによりshowaによって占有されていたリソースが解放されます。

クロージャの鍵はスコープです。グローバル変数によって占有されているリソースは、ページが変更されるかブラウザが閉じられるときにのみ解放されます。 var allShowA = funA() の場合、allShowA が funB() を参照するのと同等であるため、funB() 内のリソースは GC によってリサイクルされず、したがって funA() 内のリソースもリサイクルされません。

3.2.2 例 2: パラメトリッククロージャー関数

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

function funA(arg1,arg2) {
var i = 0;
関数 funB(ステップ) {
i = i ステップ;
アラート(i)
}
funB を返します;
}
var allShowA = funA(2, 3); //呼び出しは funA arg1=2, arg2=3
allShowA(1);//呼び出しは funB step=1、出力 1
allShowA(3);//呼び出しは funB setp=3、出力 4

3.2.3 例 3: 親関数 funA 内での変数の共有

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

関数 funA() {
var i = 0;
関数 funB() {
私;
アラート(i)
}
AllShowC = function () {// allShowC は匿名関数を参照し、変数 i
を funB と共有します 私;
アラート(i)
}
funB を返します;
}
var allShowA = funA();
var allShowB = funA();//allShowB は funA を参照し、allShowC は内部で再バインドされ、変数 i
を allShowB と共有します

3.3 該当するシナリオ

① funA の変数は外部から直接アクセスできないため、関数 funA 内の変数の安全性を確保する。

JavaScript 関数について何か学びましたか? ご質問がございましたら、メッセージを残してください。