JavaScript関数の種類を詳しく解説_JavaScriptスキル

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

目次

• 通常の関数: 同じ名前のオーバーライド、引数オブジェクト、デフォルトの戻り値など、通常の関数の特徴を紹介します。
• 匿名関数: 匿名関数の特徴を紹介します:可変匿名関数、名前のない匿名関数。
• クロージャ関数: クロージャ関数の特徴を紹介します。

1. 通常の機能
1.1 例

function ShowName(name) {
  alert(name);
}
 

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

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

var n1 = 1;
 
function add(value1) {
  return n1 + 1;
}
alert(add(n1));//调用的是下面的函数，输出：3
 
function add(value1, value2) {
  return value1 + 2;
}
alert(add(n1));//输出：3
 

1.3 引数オブジェクト

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

function showNames(name) {
  alert(name);//张三
  for (var i = 0; i < arguments.length; i++) {
    alert(arguments[i]);//张三、李四、王五
  }
}
showNames('张三','李四','王五');

1.4 関数のデフォルトの戻り値

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

function showMsg() {
}
alert(showMsg());//输出：undefined
　　

2. 匿名関数
2.1 変数無名関数

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

2.1.2 例

//变量匿名函数，左侧可以为变量、事件等
var anonymousNormal = function (p1, p2) {
  alert(p1+p2);
}
anonymousNormal(3,6);//输出9

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

2.2 名前のない匿名関数

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

2.2.2 例

(function (p1) {
  alert(p1);
})(1);

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

3. クロージャ機能
3.1 説明

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

3.2 例

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

function funA() {
  var i = 0;
  function funB() { //闭包函数funB
    i++;
    alert(i)
  }
  return funB;
}
var allShowA = funA(); //全局变量引用：累加输出1,2,3,4等
 
function 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;
  function funB(step) {
    i = i + step;
    alert(i)
  }
  return 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 内での変数の共有

function funA() {
  var i = 0;
  function funB() {
    i++;
    alert(i)
  }
  allShowC = function () {// allShowC引用匿名函数,与funB共享变量i
    i++;
    alert(i)
  }
  return funB;
}
var allShowA = funA();
var allShowB = funA();//allShowB引用了funA，allShowC在内部重新进行了绑定，与allShowB共享变量i

3.3 該当するシナリオ

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

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。