JavaScript クロージャの理解と使用

JavaScript クロージャは、グローバル変数とローカル変数で重要な役割を果たします。この記事では、それらに関連する知識について説明します。

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

プライベート変数ではクロージャを使用できます。

グローバル変数

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

instances

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

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

instances

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 では、すべての関数がその上のスコープにアクセスできます。

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

グローバル変数とローカル変数のクロージャの知識を一般的に理解します。その他の学習教材については、PHP 中国語 Web サイトを参照してください。

関連する推奨事項:

JavaScriptフォーム検証に関する関連説明

JavaScriptポップアップイベントの関連知識

JavaScriptの日付(日付)関連の知識と使い方

以上がJavaScript クロージャの理解と使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。