JavaScript クロージャ

JavaScript 変数は、ローカルスコープまたは グローバルスコープに属することができます。

グローバル変数は、クロージャを使用してローカル (プライベート) にすることができます。

グローバル変数

次のように関数内でfunction定義されたすべての変数にアクセスできます。

例

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

自分で試してみる»

ただし、次のように、関数の外部でfunction定義された変数にアクセスすることもできます。

例

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

自分で試してみる»

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

Web ページでは、グローバル変数はページに属します。

グローバル変数は、ページ内の他のすべてのスクリプトで使用 (および変更) できます。

最初の例では、aです地元変数。

ローカル変数は、それが定義されている関数内でのみ使用できます。他の関数や他のスクリプトコードから隠されています。

同じ名前のグローバル変数とローカル変数は別の変数です。一方を変更しても、他方は変更されません。

作成された変数それなし宣言キーワード (var、let、またconst) は、関数内で作成された場合でも、常にグローバルです。

例

function myFunction() { a = 4; }

自分で試してみる»

可変寿命

グローバル変数は、別のページに移動するか、ウィンドウを閉じるときなど、ページが破棄されるまで有効です。

ローカル変数の寿命は短いです。関数が呼び出されると作成され、関数が終了すると削除されます。

カウンタージレンマ

何かをカウントするために変数を使用し、このカウンターをすべての関数で使用できるようにしたいとします。

グローバル変数とfunctionカウンターを増やすには

例

// カウンターを開始する let counter = 0; // カウンタをインクリメントする機能 function add() { counter += 1; } //add()を3回呼び出す add(); add(); add(); // カウンターは3になっているはずです

自分で試してみる»

上記のソリューションには問題があります。ページ上のコードは、add() を呼び出さずにカウンターを変更できます。

カウンターは、add()関数、他のコードがそれを変更するのを防ぐために

例

// カウンターを開始する let counter = 0; // カウンタをインクリメントする機能 function add() { let counter = 0; counter += 1; } // add()を3回呼び出す add(); add(); add(); //カウンターは3になっているはずだ。しかし0だ。

自分で試してみる»

ローカルカウンターではなくグローバルカウンターを表示しているため、機能しませんでした。

グローバルカウンターを削除し、関数にローカルカウンターを返させることでローカルカウンターにアクセスできます。

例

// カウンタをインクリメントする機能 function add() { let counter = 0; counter += 1; return counter; } // add()を3回呼び出す add(); add(); add(); //カウンターは3になっているはずだ。しかし1になっている。

自分で試してみる»

関数を呼び出すたびにローカルカウンターをリセットしたため、機能しませんでした。

JavaScript 内部関数はこれを解決できます。

JavaScript ネスト関数

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

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

JavaScript はネストされた関数をサポートしています。ネストされた関数は、それらの「上の」スコープにアクセスできます。

この例では、内部関数plus()にアクセスできますcounter親関数の変数:

例

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

自分で試してみる»

plus()この機能に外部からアクセスできれば、カウンターのジレンマは解決できたかもしれません。

また、一度だけ実行する方法を見つける必要もありますcounter = 0。

閉鎖が必要です。