Javascript クロージャの使用シナリオの原則の詳細

1. 終了

Javascriptでは、関数内のサブ関数のみがローカル変数を読み取ることができ、クロージャは他の関数内の変数を読み取ることができる関数です。

たとえば、次のコード:

関数f1() {
    var n = 999;
    関数f2() {
    コンソールにログ出力します。
    }
    f2 を返します。
}
var 結果 = f1();
結果();//999

関数 f2 は関数 f1 に含まれており、f1 内のすべてのローカル変数は f2 から参照できます。しかし、その逆は当てはまりません。f2 内のローカル変数は f1 からは見えません。

これは、 Javascript言語に特有の「 chain scopeスコープ」構造です。子オブジェクトは、一度に 1 レベルずつ、すべての親オブジェクトの変数を検索します。したがって、親オブジェクトのすべての変数は子オブジェクトに表示されますが、その逆はできません。

f2 は f1 内のローカル変数を読み取ることができるため、f2 が戻り値として使用されている限り、その内部変数は f1 の外部で読み取ることができます。

2. クロージャの使用シナリオ

1.タイムアウトを設定する

ネイティブsetTimeoutによって渡される最初の関数にはパラメーターを指定できませんが、パラメーターを渡す効果はクロージャーを通じて実現できます。

関数 f1(a) {
    関数f2() {
        コンソールにログ出力します。
    }
    f2 を返します。
}
var fun = f1(1);
setTimeout(fun,1000);//1秒後に1を出力します

2. コールバック

動作を定義し、それをユーザーイベント (クリックまたはキー押下) に関連付けます。コードは通常、コールバック (イベントがトリガーされたときに呼び出される関数) としてイベントにバインドされます。

たとえば、次のコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>テスト</title>
</head>
<本文>
    <a href="#" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" id="size-12">12</a>
    <a href="#" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" id="size-20">20</a>
    <a href="#" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" id="size-30">30</a>

    <script type="text/javascript">
        関数 changeSize(サイズ){
            関数()を返す{
                document.body.style.fontSize = サイズ + 'px';
            };
        }

        var size12 = changeSize(12);
        var size14 = changeSize(20);
        var size16 = changeSize(30);

        document.getElementById('size-12').onclick = size12;
        document.getElementById('size-20').onclick = size14;
        document.getElementById('size-30').onclick = size16;

    </スクリプト>
</本文>
</html>

数字をクリックすると、フォントサイズが対応するサイズに変わります。

3. 手ぶれ補正機能

コールバックはイベントがトリガーされてから n 秒後に実行されます。n 秒以内に再度トリガーされた場合は、タイミングが再開されます。

実装の鍵はsetTimeOut関数にあります。タイミングを保存するための変数が必要なので、グローバルな純粋性を維持するために、クロージャを使用して実装できます。

次のコードに示すように:

/*
* fn [関数] 手ぶれ補正を必要とする関数* delay [数値] ミリ秒、手ぶれ補正の期限値*/
関数デバウンス(fn,delay){
    タイマーを null にする
    //クロージャの助けを借りて return function() {
        if(タイマー){
            clearTimeout(timer) //この分岐ステートメントを入力すると、タイミング プロセスが現在進行中であり、同じイベントが再度トリガーされることを示します。したがって、現在のタイミングをキャンセルしてタイミングを再開するには、timer = setTimeOut(fn,delay) を使用します。 
        }それ以外{
            timer = setTimeOut(fn,delay) // このブランチに入るということは、現在タイミングがないことを意味し、タイミングを開始します}
    }
}

4. プライベート変数をカプセル化する

次のコードに示すように: jsを使用してカウンターを作成する

方法1:

関数f1() {
    var 合計 = 0;
    var obj = {
       inc:関数() {
           合計++;
           合計を返します。
       }
};
    obj を返します。
}
結果を f1() とします。
console.log(result.inc());//1
コンソール.log(result.inc()); //2
console.log(result.inc());//3

返されたオブジェクトには、ローカル変数 x を保持するクロージャが実装されており、変数 x には外部コードからまったくアクセスできません。

方法2:

関数f1() {
    var 合計 = 0;
    関数f2() {
        合計++;
        f2 を返します。
    }
    f2.valueOf = 関数（）{
        合計を返します。
    };
    f2.toString = 関数（）{
        sum+'' を返します。
    };
    f2 を返します。
}
//関数f1を実行し、関数f2を返す
コンソール.log(+f1());//0
コンソールログ(+f1()()) //1
コンソール.log(+f1()()()) //2

すべてのjsデータ型には、 nullを除く2つのメソッドvalueOfとtoStringがあります。

valueOf()メソッド: 指定されたオブジェクトのプリミティブ値を返します。
toString()メソッド: オブジェクトの文字列表現を返します。

数値演算では、最初にvalueOfが呼び出され、文字列演算では、最初にtoStringが呼び出されます。
sum+' 'は文字列型データです

Javascript クロージャの使用シナリオに関するこの記事はこれで終わりです。より関連性の高い Javascript クロージャのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: