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() { return counter += 1; } add(); add(); add(); //カウンターは現在 3

試してみる »

カウンターの値は add() 関数の実行時に変化します。

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

関数内でカウンターを宣言すると、関数を呼び出さない限りカウンターの値を変更できません：

サンプル

function add() { var counter = 0; return counter += 1; } add(); add(); add(); //本来は 3 を出力したいのですが、期待に反して、出力されるのはすべて 1 です！

試してみる »

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

JavaScript のネスト関数でこの問題を解決できます。

JavaScript ネスト関数

すべての関数はグローバル変数にアクセスできます。

実際、JavaScript では、すべての関数はその1つ上のスコープにアクセスできます。

JavaScript はネスト関数をサポートしています。ネスト関数は1つ上の関数の変数にアクセスできます。

このサンプルでは、ネスト関数plus()は親関数のcounter変数にアクセスできます：

サンプル

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

試してみる »

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

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

クロージャが必要です。