javascript_javascriptスキルでのクロージャの詳細な説明

JavaScript では、関数はデータの一種と見なすことができ、変数に割り当てたり、別の関数にネストしたりできます。

var fun = function(){
  console.log("平底斜");
}

function fun(){
  var n=10;
  function son(){
    n++;
  }
  son();
  console.log(n);
}
fun(); //11
fun(); //11

上記の 2 番目のコードを少し変更してみましょう:

var n=10;
function fun(){
  function son(){
    n++;
  }
  son();
  console.log(n);
}
fun(); //11
fun(); //12

違いがわかりますか? コードの実行結果が理解できない場合は、JavaScript スコープとスコープ チェーンについて説明した前のブログ投稿を読んでください。

上記のコードの変数 n はグローバル変数であり、fun 関数を呼び出さなくてもいつでも再割り当てできます。変数 n が汚染されるのを防ぐため、またはグローバル変数の汚染を軽減するには、n をローカル変数として関数に入れる必要があります。

function fun(){
  var n=10;
  function son(){
    n++;
    console.log(n);
  }
  son();
}
fun(); //11
fun(); //11

son 関数をグローバルに直接呼び出すことができれば、望ましい効果を達成できます。 Son 関数はローカル変数として存在します。これにグローバルにアクセスしたい場合は、通常、次の 2 つの方法があります。

1 つはグローバル変数に値を代入することです

var a;
function fun(){
  var n=10;
  a = function son(){
    n++;
    console.log(n);
  }
}
fun(); //son()
a(); //11
a(); //12

もう 1 つは、return を使用して値を返すことです

function fun(){
  var n=10;
  return function son(){
    n++;
    console.log(n);
  }
}
var a=fun();
a(); //11
a(); //12

上記の Son() 関数は、ある意味、すべての関数をクロージャとみなすことができます。クロージャは、外部関数のスコープ内の変数にアクセスできる関数です。

var a;
function fun(){
  var n=10;
  a = function son(){
    n++;
    console.log(n);
  }
  return a();
}
fun(); //11
a(); //12
a(); //13
fun(); //11
a(); //12
a(); //13

これは上記のコードのままです。少し変更して実行結果を見てみましょう。これは、変数 n が fun() 関数が実行されるたびに初期化されるためです。

クロージャの利点は、グローバル変数を削減し、グローバル汚染を回避し、ローカル変数をメモリに保存できることです。ただし、これは利点でもあり、欠点でもあります。コード内にクロージャが多すぎると、メモリ リークが発生する可能性があります。クロージャ内のローカル変数はガベージ コレクション メカニズムによってリサイクルされないため、手動で null を割り当てる必要があります (メモリ リークについては、後で別のトピックを開きます)