Javascript クロージャーの詳細な説明とコード例

JavaScript クロージャー

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

1 最後に、見てみましょう

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

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

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

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

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

(3) A で B を返す

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

(5) C を実行する

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

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

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

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

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

これで閉店です。

2 クロージャの目的

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

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

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

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

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

count は関数 A の変数であり、その値は関数 B で変更されます。関数 B が実行されるたびに、count の値は次のようになります。元の値に 1 を加算します。したがって、関数 A の count 変数は常にメモリに格納されます。

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

3 高級な書き方

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

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

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

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

上記のコードは (function(){}) と () の 2 つの部分に分割できます。最初の () は式であり、式自体は匿名関数であるため、この式の後に () を追加することは、これを実行することを意味します匿名関数。

したがって、このコードの実行プロセスは次のように分解できます:

(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);

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

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

4 簡単なまとめ

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