JS クロージャを数分で学習できます

クロージャは Javascript の重要な概念です。初心者にとって、クロージャは非常に抽象的な概念であり、特に ECMA 仕様で与えられている定義は、実際の経験がなければ、定義から理解するのが困難です。したがって、この記事ではクロージャの概念について長々と説明するのではなく、数分でクロージャを学習できるように実践的な情報に直接進みます。

1 終わりに、見てみましょう

新しいテクノロジーに接したとき、私が最初に行うことは、そのデモ コードを見つけることです。私たちにとって、自然言語よりもコードを見る方が物事の本質をよりよく理解できます。実際、クロージャはいたるところにあります。たとえば、jQuery と zepto のコア コードはすべて大きなクロージャに含まれているため、頭の中でクロージャを生成できるように、最も単純で最も原始的なクロージャを最初に書きます。

function A(){    function B(){
       console.log("Hello Closure!");
    }    return B;
}var C = A();
C();//Hello Closure!

これが最も単純なクロージャーです。

予備的な理解ができたら、通常の関数とどのように違うのかを簡単に分析してみましょう。 上記のコードを自然言語に翻訳すると、次のようになります。

(1) 通常の関数 A を定義する

(2) A に通常の関数 B を定義する。

(3) A で B を返す

(4) A を実行し、A の戻り結果を変数 C に代入する

(5) C を実行する

これら 5 つのステップを 1 つの文に要約します:

内部に関数 B関数 A は、関数 A の外部の変数 c によって参照されます。

この文を再処理すると、クロージャの定義になります:

内部関数がその外部関数の外側の変数によって参照されるとき、クロージャが形成されます。

つまり、上記の 5 つのステップを実行すると、すでにクロージャが定義されています。

これで閉店です。

2 クロージャの目的

クロージャの機能を理解する前に、まず Javascript の GC メカニズムを理解しましょう:

Javascript では、オブジェクトが参照されなくなった場合、そのオブジェクトは GC リサイクルされ、それ以外の場合は GC リサイクルされます。このオブジェクトは常にメモリに保存されます。

上記の例では、BがAで定義されているため、BはAに依存し、外部変数CがBを参照しているため、AはCによって間接的に参照されます。

言い換えると、A は GC によってリサイクルされず、常にメモリに保存されます。私たちの推論を証明するために、上記の例を少し改良しました:

function A(){    var count = 0;    function B(){
       count ++;
       console.log(count);
    }    return B;
}var C = A();
C();// 1C();// 2C();// 3

モジュール内でいくつかの変数を定義する必要があり、これらの変数をグローバル変数を「汚染」せずにメモリに保持したい場合は、次のように使用できます。このモジュールを定義するクロージャ。

3 高級な書き方

上記の書き方は実は最も原始的な書き方ですが、実際のアプリケーションではクロージャと匿名関数を併用することになります。以下は、クロージャを記述する一般的に使用される方法です:

(function(document){    var viewport;    var obj = {
        init:function(id){
           viewport = document.querySelector("#"+id);
        },
        addChild:function(child){
            viewport.appendChild(child);
        },
        removeChild:function(child){
            viewport.removeChild(child);
        }
    }
    window.jView = obj;
})(document);

このコンポーネントの機能は、コンテナを初期化することであり、その後、コンテナにサブコンテナを追加したり、コンテナを削除したりできます。

関数は非常に単純ですが、ここには関数を即時に実行するという別の概念が関係しています。 理解する必要があるのは、この記述メソッドがクロージャ関数をどのように実装するかということです。

上記のコードは 2 つの部分に分割できます:

(function(){}) と () 、最初の () は式であり、この式は匿名です関数なので、この式の後に () を追加すると、この匿名関数が実行されることになります。 したがって、このコードの実行プロセスは次のように分解できます:

var f = function(document){    var viewport;    var obj = {
        init:function(id){
            viewport = document.querySelector("#"+id);
        },
        addChild:function(child){
            viewport.appendChild(child);
        },
        removeChild:function(child){
            viewport.removeChild(child);
        }
    }
    window.jView = obj;
};
f(document);

このコードにはクロージャの影が見られるように見えますが、fには戻り値がなく、クロージャの条件が満たされていると思われますこの文に注意してください。 コード:

window.jView = obj;

obj は関数 f で定義されたオブジェクトです。このオブジェクトは一連のメソッドを定義します。この変数を obj に指すオブジェクト、つまりグローバル変数 jView は obj を参照し、obj オブジェクト内の関数は関数 f 内の変数 viewport を参照します。したがって、関数 f 内のビューポートは再利用されません。 GC が実行され、ビューポートは常にメモリに保存されるため、この書き方でクロージャ条件が満たされます。

4 簡単なまとめ

これはクロージャの最も単純な理解です。もちろん、クロージャはより深く理解する必要があり、JS の実行コンテキスト、アクティベーション オブジェクト、およびスコープの操作メカニズムを理解する必要があります。そしてスコープチェーン。しかし、初心者としては、今はこれらを理解する必要はありません。簡単に理解した後、実際のプロジェクトで使用することで、自然とクロージャの理解が深まります。