JavaScript クロージャ: 初心者ガイド

クロージャは JavaScript の強力で重要な機能であり、多くの初心者が苦労しています。これらは、関数呼び出し全体での状態の保存やプライベート変数の作成など、JavaScript の最も便利な機能のいくつかを担当します。このブログでは、クロージャを簡単な言語に分解し、その重要性を実際の例とともに説明することでクロージャを説明しようとします。

?クロージャとは何ですか?

JavaScript で関数が別の関数から返されると、その関数は親関数のスコープを継承します。これは、返された関数は、外部関数の実行が完了した後でも、外部関数のスコープ内で定義された変数にアクセスできることを意味します。 クロージャは、関数とそれを囲むスコープの組み合わせです。
より簡単な定義は次のとおりです:

• クロージャーは、外側 (囲んでいる) 関数のスコープからの変数を「記憶」する関数です。
• これにより、外部関数が実行されなくなった場合でも、内部関数がこれらの変数にアクセスできるようになります。

?クロージャの仕組み: 例

?クロージャなしの例

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    inner()
}
outer()
outer() 
/* Output:
counter = 1
counter = 1 */

?クロージャ
を使用した例

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    return inner
}
const fn = outer()
fn()
fn()
/* Output:
counter = 1
counter = 2 */

?クロージャの主な特徴

1. 永続メモリ: 外部関数のスコープ内の変数は、外部関数が終了した後もずっと「記憶」されます。
2. 字句スコープ: クロージャは、関数が実行される場所ではなく、関数が定義される場所に基づきます。
3. 複数のインスタンス: 各クロージャ インスタンスは、外部変数の独自のコピーを保存します。

?複数のインスタンスの例:

function counterFunction() {
    let count = 0;

    return function increment() {
        count++;
        return count;
    };
}

const counter1 = counterFunction();
const counter2 = counterFunction();

console.log("counter1 = " + counter1()); // Output: 1
console.log("counter1 = " + counter1()); // Output: 2
console.log("counter2 = " + counter2()); // Output: 1
console.log("counter1 = " + counter1()); // Output: 3
console.log("counter2 = " + counter2()); // Output: 2

ここで、counter1 と counter2 はそれぞれ独自の個別のカウント変数を持ちます。

?クロージャーの実際的な使用法

1️⃣ データ プライバシー: クロージャは変数をグローバル スコープから隠すことができるため、変数は特定の関数内でのみ使用できます。
?例:

function secretInfo() {
    let secret = "I love JavaScript";
    return {
        getSecret: function() {
            return secret;
        },
        setSecret: function(newSecret) {
            secret = newSecret;
        }
    };
}

const secretObject = secretInfo();
console.log(secretObject.getSecret()); // Output: I love JavaScript
secretObject.setSecret("I love Python too!");
console.log(secretObject.getSecret()); // Output: I love Python too!
secretObject.setSecret("I love PHP too!");
console.log(secretObject.getSecret()); // Output: I love PHP too!
// Attempting to Access secret Directly will not work
console.log(secretObject.secret); // Output: undefined

✍️ このコードがデータ プライバシーを示す方法:

1. グローバル スコープ保護: 変数シークレットには、グローバル スコープやコードの他の部分から直接アクセスできません。たとえば、console.log(secretObject.secret) を試行すると、未定義が返されます。
2. プライベート状態のメンテナンス: クロージャの変数 Secret はプライベートであり、getSecret メソッドと setSecret メソッドを使用してのみ読み取りまたは変更できます。
3. アクセスの制御: プログラムは関数 getSecret および setSecret を定義することで、シークレット変数へのアクセスを制限します。

2️⃣ 関数ファクトリー: 関数ファクトリー は、新しい関数を生成して返す関数です。これにより、入力パラメータに基づいてカスタマイズされた機能を動的に構築できるようになります。
?例:

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    inner()
}
outer()
outer() 
/* Output:
counter = 1
counter = 1 */

✍️ このコードで関数ファクトリーを紹介する方法:

1. 計算関数は工場のように動作し、入力 (因数) に基づいて特殊な乗算関数 (2 倍、3 倍) を生成します。
2. 各関数は独自で独立していますが、同じコア ロジックを共有します。

3️⃣ イベント リスナー: クロージャは、状態を維持するためにコールバックとイベント リスナーでよく使用されます。
?例:

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    return inner
}
const fn = outer()
fn()
fn()
/* Output:
counter = 1
counter = 2 */

✍️ このコードは、イベント リスナーでクロージャがどのように機能するかを示しています:

1. setupListener 関数はクロージャを作成し、その中に clickCount 変数を定義します。
2. コールバックであるイベント リスナー関数は、setupListener メソッドの実行が終了した後でも clickCount にアクセスできます。
3. ID「myButton」のボタンがクリックされるたびに、イベント リスナーのコールバックは clickCount を増分し、更新された値をログに記録します。

?結論

クロージャは JavaScript の基本的な考え方であり、開発者がよりモジュール化された効率的でプライベートなコードを構築できるようになります。クロージャを理解すると、動的関数を記述し、永続的な状態を維持し、データのカプセル化を実現できるようになります。

初心者として、クロージャの練習と実験に時間を費やしてください。最初は難しそうに見えるかもしれませんが、実際の例と使用法を読めば、すぐに JavaScript プログラミングにおけるその驚くべき強みと多用途性に気づくでしょう。

クロージャの学習に役立つ実際の例えや例はありますか?以下のコメントセクションで共有してください!
コーディングを楽しんでください! ✨

以上がJavaScript クロージャ: 初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。