Javascriptのクロージャー[パート1]

リチャードコーンフォードJavascript Closuresによる翻訳。

• はじめに
• オブジェクトプロパティの名前解決
  
  • 値の割り当て
  • 値の読み取り
  
  
• 識別子の名前解決、実行コンテキスト、およびスコープチェーン
  
  • 実行コンテキスト
  • スコープチェーンと[[scope]]プロパティ
  • 識別子の名前解決
  
  
• ...

はじめに

短絡

クロージャーは、自由変数を持つことができる式（通常は関数）であり、これらの変数をバインドする環境（つまり、この式を閉じる）を持つことができます。

クロージャーはECMAScript（javascript）の最も強力な機能の1つですが、理解なくして適切に適用することはできません。 偶然でも簡単に作成できるという事実にもかかわらず、特に比較的一般的なブラウザ環境では、作成が有害な結果をもたらす可能性があります。 障害との偶発的な衝突を避け、障害を利用するには、そのメカニズムを理解する必要があります。 これは、識別子の解決におけるスコープチェーンの役割と、オブジェクトのプロパティ名の解決に大きく依存します。

クロージャーの最も簡単な説明は、ECMAScriptが他の関数の本体内にネストされた関数、関数定義、および関数式を許可するということです。 また、これらのネストされた関数は、外部関数（外部関数）内のすべてのローカル変数、パラメーター、および関数にアクセスできます。 これらのネストされた関数の1つが含まれていた関数の外部で使用可能になると、クロージャーが形成されるため、外部関数の完了後に実行できます。 この時点で、彼女はまだローカル変数、パラメーター、および外部関数の内部関数宣言にアクセスできます。 これらのローカル変数、パラメーター、および関数宣言は（最初は）外部関数が完了したときと同じ値を持ち、内部関数と対話できます。

残念ながら、クロージャーを適切に理解するには、クロージャーの背後にあるメカニズムを理解し、多くの技術的な詳細を知る必要があります。 以下の説明の冒頭でECMA 262で定義されているアルゴリズムの一部について説明していますが、ほとんどのアルゴリズムを省略したり、単純化して単純化したりすることはできません。 オブジェクトのプロパティ名の解決に精通している場合は、このセクションをスキップできますが、クロージャーに既に精通している人だけが後続のセクションをスキップし、今すぐ読むのをやめてそれらの使用に戻ることができます。

オブジェクトプロパティの名前解決

ECMAScriptは、ネイティブオブジェクトとホストオブジェクト、および組み込みオブジェクトと呼ばれるネイティブオブジェクトのサブカテゴリの2つのカテゴリのオブジェクトを認識します（ECMA 262 3rd Ed Section 4.3）。 ネイティブオブジェクトは言語に属し、ホストオブジェクトは環境によって提供され、たとえばドキュメントオブジェクト、DOMノードなどになります。

ネイティブオブジェクトは、名前付きプロパティの無料の動的コンテナです（一部の実装は、埋め込みオブジェクトのサブカテゴリになるとそれほど動的ではありませんが、通常は重要ではありません）。 ネイティブオブジェクトの特定の名前付きプロパティは、別のオブジェクト（この意味では関数でもあります）への参照となる値、または基本値、String、Number、Boolean、Null、またはUndefinedを格納します。 プリミティブ型Undefinedは、オブジェクトのプロパティをundefinedに設定できるという意味で少し珍しいですが、プロパティはオブジェクトから削除されません。 オブジェクトの名前付きプロパティのままであり、値undefinedを単に格納します。

以下は、オブジェクトのプロパティがどのように読み取られて設定され、内部の詳細に可能な限り影響を与えるかについての簡単な説明です。

値の割り当て

オブジェクトの名前付きプロパティを作成するか、既存の名前付きプロパティの値を設定するには、名前付きプロパティに値を割り当てます。
このように

var objectRef = new Object(); //   (generic)  javascript. 

「testNumber」という名前のプロパティは、次のように作成できます。

 objectRef.testNumber = 5; /*  */ objectRef["testNumber"] = 5; 

オブジェクトには、値を割り当てる前にtestNumberプロパティがありませんでしたが、 後で作成されました。 以降の割り当てでは、このプロパティを作成する必要はありません。値を変更するだけです。

 objectRef.testNumber = 8; /*  */ objectRef["testNumber"] = 8; 

Javascriptオブジェクトには、以下で簡単に説明するように、それ自体がオブジェクトになる可能性のあるプロトタイプがあり、これらのプロトタイプには名前付きプロパティを含めることができます。 ただし、これは割り当てには適用されません。 値が割り当てられ、オブジェクトに対応する名前のプロパティがない場合、このプロパティが作成され、値が割り当てられます。 オブジェクトにそのようなプロパティがある場合、その値はリセットされます。

値の読み取り

オブジェクトのプロトタイプが使用されるのは、値を読み取るときです。 オブジェクトにプロパティアクセサー式で使用される名前のプロパティがある場合、このプロパティの値が返されます

 /*    .           ,     */ objectRef.testNumber = 8; /*     */ var val = objectRef.testNumber; /*  val    8,        . */ 

しかし、すべてのオブジェクトはプロトタイプを持つことができ、プロトタイプはオブジェクトであり、プロトタイプを持つことができるプロトタイプなどを持つことができ、プロトタイプチェーンと呼ばれるものを形成します。 プロトタイプチェーンは、チェーン内のオブジェクトの1つにnullプロトタイプがあると終了します 。 Objectコンストラクターでデフォルトで使用されるプロトタイプには、 nullプロトタイプがあるため、

 var objectRef = new Object(); //   (generic)  javascript 

プロトタイプObject.prototypeを使用してオブジェクトを作成します。それ自体はnullプロトタイプを持ちます 。 次に、 objectRefオブジェクトのプロトタイプチェーンには、 Object.prototypeという 1つのオブジェクトのみが含まれます。 しかし

 /*  “”     MyObject1.*/ function MyObject1(formalParameter){ /*    testNumber    ,  ,     */ this.testNumber = formalParameter; } /*  “”     MyObject2 */ function MyObject2(formalParameter){ /*  testString      ,  ,     */ this.testString = formalParameter; } /*   ,   ,      MyObject2,   MyObject1,   8   MyObject1,     testNumber     */ MyObject2.prototype = new MyObject1( 8 ); /*,    MyObject2    objectRef    ,        */ var objectRef = new MyObject2( "String_Value" ); 

変数objectRefによって参照されるMyObject2のインスタンスには、プロトタイプチェーンがあります。 このチェーンの最初のオブジェクトはMyObject1のインスタンスで、作成され、 MyObject2コンストラクターのprototypeプロパティに割り当てられています 。 MyObject1のインスタンスには、デフォルトでMyObject1のprototypeプロパティに割り当てられたプロトタイプオブジェクトがあります。 このプロトタイプはObjectのデフォルトのプロトタイプです。 Object.prototypeによって参照されるオブジェクト。 Object.prototypeにはnullプロトタイプがあるため、チェーンはこの時点で終了します。

プロパティアクセス式がobjectRefによって参照されるオブジェクトから名前付きプロパティを読み取ろうとすると、プロトタイプチェーン全体がプロセスに参加できます。 単純な場合

 var val = objectRef.testString; 

-objectRefを介してアクセス可能なMyObject2のインスタンスにはtestStringというプロパティがあるため、このプロパティの値はString_Valueに設定され、変数valに割り当てられます。
しかし

 var val = objectRef.testNumber; 

MyObject2関数のインスタンスからプロパティを読み取ることができないため、 そのようなプロパティはありませんが、変数valは 8に設定され、 undefinedではありません。これは、オブジェクト自体の対応する名前付きプロパティの検索が失敗したため、インタプリタがそのプロトタイプであるオブジェクトをチェックするためです そのプロトタイプは、このプロパティに値8が割り当てられたtestNumberプロパティで作成された関数MyObject1のインスタンスであるため、プロパティへのアクセスの式は値8として計算されます。 MyObject1もMyObject2もtoStringメソッドを定義しませんが、プロパティアクセス式がobjectRefからtoStringプロパティの値を読み取ろうとすると、

 var val = objectRef.toString; 

次に、 val変数に関数参照が割り当てられます。 この関数はObject.prototypeオブジェクトのtoStringプロパティであり、プロトタイプ検証プロセスの結果として返されます： objectRefオブジェクトがチェックされ 、その中にtoStringプロパティが欠落した後、 objectRefプロトタイプがチェックされ 、このプロパティがないことが判明するとそのプロトタイプはテスト中です。 そのプロトタイプはObject.prototypeで、 toStringメソッドがあり、リンクはこの関数に戻ります。

結論として：

 var val = objectRef.madeUpProperty; 

-プロトタイプチェーンを処理するプロセスがどのオブジェクトにもmadeUpPropertyという名前のプロパティを見つけられないため、 undefinedを返し、最終的にObject.prototypeオブジェクトのプロトタイプに到達します。 nullの場合、 undefinedを返すことでプロセスが終了します。

名前付きプロパティを読み取ると、オブジェクトまたはそのプロトタイプチェーンから最初に見つかった値が返されます。 対応するプロパティが存在しない場合、オブジェクトの名前付きプロパティに値を割り当てると、オブジェクト自体にプロパティが作成されます。

これは、値がobjectRef.testNumber = 3に割り当てられた場合、 testNumberプロパティがMyObject2関数のインスタンスで作成され、その後値を読み取ろうとすると、オブジェクトに設定された値が返されることを意味します。 これで、プロパティのアクセス式を実行するためにプロトタイプチェーンは不要になりましたが、 testNumberプロパティに値8が割り当てられたMyObject1のインスタンスは変更されていません。 objectRefオブジェクトに値を割り当てると、そのプロトタイプチェーン内の対応するプロパティが単純に非表示になります。

ECMAScript が内部型Objectの内部プロパティ[[prototype]]を定義していることに注意してください。 このプロパティはスクリプトから直接アクセスできませんが、アクセスプロパティ式を解決するために使用される内部[[prototype]]プロパティによって参照されるオブジェクトのチェーンがあります。 このチェーンは、オブジェクトのプロトタイプチェーンです。 パブリックプロトタイププロパティは、内部[[prototype]]プロパティと共に、値の割り当て、プロトタイプの定義、および操作のために存在します。 蜂蜜のこれら2つの特性間の関係の詳細はECMA 262（第3版）で説明されており、この説明には含まれていません。

識別子の名前解決、実行コンテキスト、およびスコープチェーン

実行コンテキスト

実行コンテキストは、ECMAScript実装（ECMA 262第3版）で使用される抽象概念で、ECMAScript実装に必要な動作を決定します。 仕様には、 実行コンテキストの実装方法については何も記載されていませんが、 実行コンテキストには、仕様で定義された構造を参照する関連属性があるため、閉じられていても、プロパティを持つオブジェクトとして構想（または実装）することができます。

すべてのjavascriptコードは、実行コンテキストで実行されます 。 グローバルコード（htmlページまたはJSファイルに埋め込まれたコード、またはページのロード（ロード）後に実行されるコード）はグローバル実行コンテキストで実行され、各関数呼び出し（おそらくコンストラクターとして）には対応する実行コンテキストがあります。 eval関数を使用して実行されるコードも特定の実行コンテキストを取得しますが、 evalはjavascriptプログラマーによって一般的に使用されないため、ここでは説明しません。 実行コンテキストの指定された詳細は、ECMA 262（第3版）のセクション10.2にあります。

javascript関数が呼び出されると、 実行コンテキストが追加されます 。別の関数が呼び出されると（または同じ関数が再帰的に）、新しい実行コンテキストが作成され、実行プロセスは関数呼び出し中にこのコンテキストを追加します。 呼び出された関数が完了すると、元の実行コンテキストが返されます。 したがって、実行するJavaScriptコードは、 実行コンテキストのスタックを形成します。

実行コンテキストが作成されると、特定の順序でいくつかのことが起こります。 最初に、 実行のコンテキストで 、Activationオブジェクトが作成されます。 アクティベーションオブジェクトは、仕様の別のメカニズムです。 結果としてアクセス可能な名前付きプロパティがあるため、オブジェクトと見なすことができますが、通常のオブジェクトではありません。 プロトタイプがありません（少なくともプロトタイプは定義されていません）。javascriptコードには、リンクがありません。

関数を呼び出すための実行コンテキストを作成する次のステップは、 引数オブジェクトを作成することです。これは、この順序で関数に送信される引数に対応する整数でインデックス付けされた要素を持つ配列のようなオブジェクトです。 また、プロパティlengthとcalleeがあります（これは説明に関係ありません。詳細は仕様にあります）。 アクティベーションオブジェクトのプロパティは、 引数argumentsへの参照が割り当てられたargumentsという名前で作成されます。

次に、実行コンテキストが scopeを割り当てます 。 スコープは、オブジェクトのリスト（またはチェーン）で構成されます。 各関数オブジェクトには内部[[scope]]プロパティがあり（これについては後で詳しく説明します）、これもオブジェクトのリスト（またはチェーン）で構成されています。 関数呼び出しの実行コンテキストに割り当てられるスコープは、対応する関数オブジェクトの[[scope]]プロパティによって参照されるリストと、チェーンの最上部（またはこのリストの最上部）に追加されたアクティベーションオブジェクトで構成されます。

次に、ECMA 262で変数のオブジェクト（変数オブジェクト）として定義されているオブジェクトを使用して、変数を作成するプロセス（変数のインスタンス化）が発生します。 同時に、アクティベーションオブジェクトは変数のオブジェクトとして使用されます（これは同じオブジェクトであり、これは重要です）。 変数オブジェクトの名前付きプロパティは、関数の各仮パラメーターに対して作成され、関数を呼び出すときの引数がこれらのパラメーターに対応する場合、引数はこれらのプロパティに割り当てられます（そうでない場合はundefined ）。 内部関数の定義は、関数宣言で使用される関数の名前に対応する名前を持つ変数のオブジェクトプロパティに割り当てられた関数オブジェクトを作成するために使用されます。 変数を作成する最後の手順は、関数内で定義されたすべてのローカル変数に対応する変数オブジェクトの名前付きプロパティを作成することです。

宣言されたローカル変数に対応する変数オブジェクトで作成されたプロパティは、変数の作成中に最初に未定義の値を取得します。ローカル変数は、関数本体コードの実行中に対応する割り当て操作が実行されるまで初期化されません。

実際、関数のローカル変数に対応するargumentsプロパティを持つアクティベーションオブジェクトと名前付きプロパティを持つ変数オブジェクトは、識別子の引数を関数のローカル変数と見なすことができる同じオブジェクトです。

結論として、thisキーワードで使用される値が割り当てられます。 この値がオブジェクトを参照する場合、 この接頭辞が付いたプロパティアクセス式はこのオブジェクトのプロパティを参照します。 この値（関数内で割り当てられる）がnullの場合、 これはグローバルオブジェクトを参照します。

グローバル実行コンテキストの処理はわずかに異なり、引数がないため、参照するアクティベーションオブジェクトを定義する必要はありません。 グローバル実行コンテキストにはスコープが必要であり、そのチェーンにはグローバルオブジェクトという1つのオブジェクトのみが含まれます。 グローバル実行コンテキストは変数の作成を通過し、その内部関数は通常のトップレベルの宣言関数であり、ほとんどのJavaScriptコードを構成します。 グローバルオブジェクトは変数のオブジェクトとして使用されるため、グローバルに宣言された関数はグローバルオブジェクトのプロパティになります。 グローバルに宣言された変数についても同じです。

グローバル実行コンテキストは、 thisの値としてグローバルオブジェクトへの参照も使用します。

スコープチェーンと[[scope]]プロパティ

関数呼び出しの実行コンテキストのスコープチェーンは、関数オブジェクトの[[scope]]プロパティに含まれるスコープチェーンの先頭にアクティベーションオブジェクト（変数オブジェクト）を追加することによって組み立てられます。したがって、内部[[scope]]プロパティの定義方法を理解することが重要です。

ECMAScriptでは、関数はオブジェクトであり、関数宣言から変数を作成するとき、式関数（関数式）を実行するとき、またはFunctionコンストラクターが呼び出されるときに作成されます。

Functionコンストラクターによって作成された関数オブジェクトには、常に[[scope]]プロパティがあります。これは、グローバルオブジェクトのみを含むスコープチェーンを参照します。

関数宣言または関数式によって作成された関数オブジェクトには、それらが作成される実行コンテキストのスコープがあり、内部[[scope]]プロパティに割り当てられます。

次のようなグローバル関数宣言の最も単純な場合

 function exampleFunction(formalParameter){ ... //    } 

対応する関数オブジェクトは、グローバル実行コンテキストの変数の作成中に作成されます。 グローバル実行コンテキストには、グローバルオブジェクトのみで構成されるスコープがあります。

したがって、グローバルオブジェクトexampleFunctionのプロパティによって参照されるこの作成された関数オブジェクトには、グローバルオブジェクトのみを含むスコープチェーンを参照する内部プロパティ[[scope]]が割り当てられます。

グローバルコンテキストでの式関数の実行中に、同様のスコープチェーンが割り当てられます。

 var exampleFuncRef = function(){ ... //    } 

ただし、この場合、グローバルオブジェクトの名前付きプロパティは、グローバル実行コンテキストの変数の作成中に作成されますが、関数オブジェクトは作成されず、割り当て式が実行されるまで、グローバルオブジェクトの名前付きプロパティにその参照が割り当てられません。 ただし、関数の作成は引き続きグローバル実行コンテキストで行われるため、作成された関数オブジェクトの[[scope]]プロパティには、割り当てられたスコープチェーンのグローバルオブジェクトのみが含まれます。

関数と式関数の内部宣言により、関数実行のコンテキスト内で作成される関数オブジェクトが作成されるため、スコープのより複雑なチェーンが取得されます 。 内部関数の宣言で関数を定義し、外部関数を実行する以下のコードを検討してください

 function exampleOuterFunction(formalParameter){ function exampleInnerFuncitonDec(){ ... //    } ... //      } exampleOuterFunction( 5 ); 

外部関数の宣言に対応する関数オブジェクトは、グローバル実行コンテキストでの変数の作成中に作成されるため、その[[scope]]プロパティには、1つのグローバルオブジェクトで構成されるスコープ チェーンが含まれます。

グローバルコードがexampleOuterFunction呼び出しを行うと、アクティベーションオブジェクト（変数オブジェクト）とともに、この関数呼び出しの新しい実行コンテキストが作成されます。 新しい実行コンテキストのスコープは、新しいアクティベーションオブジェクトと、それに続く外部関数の[[scope]]プロパティが参照するチェーン（グローバルオブジェクトのみ）で構成されるチェーンになります。 新しい実行コンテキストの変数を作成するプロセスにより、内部関数の宣言に対応する関数オブジェクトが作成されます。この内部関数の[[scope]]プロパティには、作成された実行コンテキストのスコープの値が割り当てられます。 スコープチェーンには、アクティベーションオブジェクトとそれに続くグローバルオブジェクトが含まれます。

この時点まで、すべてはソースコードの構造と実行によって自動的に実行および制御されます。 実行コンテキストのスコープのチェーンは 、作成された関数オブジェクトの[[scope]]プロパティを定義し、 [[scope]]関数オブジェクトのこれらのプロパティは（対応するアクティベーションオブジェクトと共に）実行コンテキストのスコープを決定します。 ただし、ECMAScriptは、スコープを変更する手段としてwithステートメントをサポートしています。

withステートメントは式を評価し、それがオブジェクトである場合、現在の実行コンテキストのスコープに追加されます（アクティベーションオブジェクト/変数の直前）。 次に、withは別の式（ブロックの場合もある） を評価し、実行コンテキストのスコープチェーンを元の形式に復元します 。

関数オブジェクトの作成は変数の作成中に行われるため、 withステートメントは関数の宣言に影響しませんが、式関数はwithステートメント内で実行できます

 /*    y,     */ var y = {x:5}; //     x function exampleFuncWith(){ var z; /*  ,     y,      */ with(y){ /*  -,    ,          z */ z = function(){ ... //   -; } } ... } /*   exampleFuncWith */ exampleFuncWith(); 

exampleFuncWithが呼び出されると 、その実行コンテキストには、この関数のアクティベーションオブジェクトと次のグローバルオブジェクトで構成されるスコープチェーンがあります。 withステートメントを実行すると 、この式関数の実行中、グローバル変数yによって参照されるオブジェクトがこのスコープチェーンの先頭に追加されます。式関数の実行によって作成された[[scope]]関数オブジェクトのプロパティには、このオブジェクトが作成された実行コンテキストのスコープに対応する値が割り当てられます。スコープは、オブジェクトyと、それに続く外部関数の実行のコンテキストからのアクティベーションオブジェクト、グローバルオブジェクトから構成されます。with

ステートメントのblockステートメントが完了すると、実行コンテキストのスコープが復元されます（yオブジェクトは削除されます）が、その時点で関数オブジェクトが作成され、その[[scope]]プロパティにスコープチェーンへのリンクが割り当てられましたオブジェクトyが上部にあります。

識別子の名前解決

識別子は、スコープのチェーンを通じて検索されます。ECMA 262は、これを識別子ではなくキーワードとして定義しますが、これは不合理ではありません。スコープのチェーンに頼ることなく、それが使用される実行のコンテキストにあるthisの値に応じて決定されます。

識別子名解決は、スコープチェーンの最初のオブジェクトから始まります。プロセスは、識別子に対応する名前のプロパティがあるかどうかを確認します。事実のためのスコープの連鎖オブジェクトのチェーンである場合、このテストはこのオブジェクトのプロトタイプのチェーン（存在する場合）をカバーします。対応する値がスコープチェーンの最初のオブジェクトで見つからない場合、検索は次のオブジェクトで続行されます。そして、識別子に対応する名前を持つプロパティがチェーンのオブジェクトの1つ（またはそのプロトタイプの1つ）で見つかるまで、または可視領域のチェーンが終了するまで続きます。

識別子に対する操作は、前述のように、オブジェクトのプロパティにアクセスするための式が使用されるのと同じ方法で発生します。スコープチェーンで識別されるオブジェクト対応するプロパティを持つように、プロパティへのアクセスの式でオブジェクトの場所を取り、識別子はこのオブジェクトのプロパティの名前として機能します。グローバルオブジェクトは常にスコープチェーンの最後にあります。

関数呼び出しの実行コンテキストにはチェーンの先頭にアクティベーションオブジェクト（変数オブジェクト）が含まれているため、関数本体で使用される識別子は、最初にそれらが正式なパラメーター、内部関数宣言の名前、またはローカル変数に対応するかどうかを確認します。これらは、アクティベーションオブジェクト（変数オブジェクト）の名前付きプロパティとして計算されます。

翻訳にはリュドミラ・リホビッドも含まれていました。

JavaScriptのクロージャー[パート2]