JavaScriptのクロージャ機構を徹底分析_基礎知識

JavaScript 変数は、ローカル変数またはグローバル変数にすることができます。
クロージャはプライベート変数に使用できます。
グローバル変数
関数は、次のような関数内で定義された変数にアクセスできます。 例

function myFunction() {
  var a = 4;
  return a * a;
}

関数は、次のような関数の外部で定義された変数にもアクセスできます。 例

var a = 4;
function myFunction() {
  return a * a;
}

後者の例では、 a はグローバル変数です。

Web ページのグローバル変数は window オブジェクトに属します。

グローバル変数は、ページ上のすべてのスクリプトに適用されます。
最初の例では、 a はローカル変数です。
ローカル変数は、それが定義されている関数内でのみ使用できます。他の関数またはスクリプト コードでは使用できません。
グローバル変数とローカル変数は同じ名前であっても、それらは 2 つの異なる変数です。どちらかの値を変更しても、もう一方の値には影響しません。
注
変数が var キーワードなしで宣言されている場合、それが関数内で定義されている場合でも、その変数はグローバル変数です。

可変ライフサイクル

グローバル変数のスコープはグローバルです。つまり、グローバル変数は JavaScript プログラム全体のあらゆる場所に存在します。 関数内で宣言された変数は、関数内でのみ機能します。これらの変数はローカル変数であり、そのスコープはローカルです。関数のパラメータもローカルであり、関数内でのみ機能します。

カウンタージレンマ
いくつかの値をカウントする必要があり、カウンタはすべての関数で使用できると想像してください。 グローバル変数や関数を使用して、カウンターが増加するように設定できます:
例

var counter = 0;

function add() {
  counter += 1;
}

add();
add();
add();

// 计数器现在为 3

add()関数を実行するとカウンタ値が変化します。

しかし、ここに問題があります。たとえ add() 関数が呼び出されていなくても、ページ上のスクリプトはカウンタを変更することができます。

関数内でカウンターを宣言した場合、関数を呼び出さずにカウンターの値を変更することはできません:
例

function add() {
  var counter = 0;
  counter += 1;
}

add();
add();
add();

// 本意是想输出 3, 但事与愿违，输出的都是 1 !

上記のコードは正しく出力されません。add() 関数を呼び出すたびにカウンターが 1 に設定されます。

JavaScript インライン関数はこの問題を解決できます。

JavaScript 組み込み関数
すべての関数はグローバル変数にアクセスできます。 実際、JavaScript では、すべての関数がその上のスコープにアクセスできます。
JavaScript はネストされた関数をサポートしています。ネストされた関数は、上位レベルの関数変数にアクセスできます。
この例では、インライン関数 plus() は親関数のカウンター変数にアクセスできます:
例

function add() {
  var counter = 0;
  function plus() {counter += 1;}
  plus();  
  return counter; 
}

plus() 関数に外部からアクセスできれば、カウンターのジレンマは解決されます。

また、counter = 0 が 1 回だけ実行されるようにする必要もあります。

クロージャが必要です。

JavaScript の終了
自分自身を呼び出す関数を覚えていますか?この機能は何をするのでしょうか? 例

var add = (function () {
  var counter = 0;
  return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器为 3

分析例

変数 add は、それ自体を呼び出す関数の戻り値の値を指定します。

自己呼び出し関数は 1 回だけ実行されます。カウンタを 0 に設定します。そして関数式を返します。
add 変数は関数として使用できます。優れた点は、関数の上のスコープからカウンターにアクセスできることです。
これは JavaScript クロージャと呼ばれます。これにより、関数がプライベート変数を持つことが可能になります。
カウンターは匿名関数のスコープによって保護されており、add メソッドを通じてのみ変更できます。

注意

クロージャは、前の関数が閉じられている場合でも、前の関数のスコープ内の変数にアクセスできる関数です。