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

前の部分 。

• 短絡
  
  
  • 自動ガベージコレクション
  • クロージャーを作成する
  
  
  
• クロージャーで何ができますか？
  
  
  • 例1：関数参照を使用したsetTimeout
  • 例2：関数をオブジェクトインスタンスメソッドに関連付ける
  • 例3：相互接続された機能のカプセル化
  • 他の例
  
  
  
• ランダム閉包
• Internet Explorerのメモリリークの問題

短絡

自動ガベージコレクション

ECMAScriptは自動ガベージコレクションを使用します。 仕様では詳細が定義されていないため、開発者はこれに対処する必要があり、一部の実装ではガベージコレクション操作をほとんど重要視していないことが知られています。 しかし、一般的な考えは、オブジェクトを参照することが不可能になった場合（実行可能コードで使用可能な参照が残っていないため）、ガベージコレクターおよび何らかの時点で削除されるリソースで使用できるようになるということです。使用され、解放され、再利用のためにシステムに戻されます。



原則として、これは実行コンテキストを離れた直後に発生します。 スコープ構造、アクティベーション/変数オブジェクト、および関数オブジェクトを含む実行コンテキストで作成されたオブジェクトはアクセスできなくなり、ガベージコレクターが利用できるようになります。

クロージャーを作成する

この関数呼び出しから関数呼び出しの実行のコンテキストで作成された関数オブジェクトが返され、ネストされた関数へのリンクが別のオブジェクトのプロパティに割り当てられると、クロージャーが形成されます。 または、そのような関数オブジェクト、たとえばグローバル変数、グローバルにアクセス可能なオブジェクトのプロパティ、または外部関数呼び出しへの引数として参照によって渡されるオブジェクトへの参照を直接割り当てることによって。

function exampleClosureForm(arg1, arg2){ var localVar = 8; function exampleReturned(innerArg){ return ((arg1 + arg2)/(innerArg + localVar)); } /*     ,   exampleReturned */ return exampleReturned; } var globalVar = exampleClosureForm(2, 4);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、 exampleClosureFormの呼び出しを実行するコンテキストで作成された関数オブジェクトは、グローバル変数によって参照され、まだ利用可能であるため、ガベージコレクションによって処理できません。このオブジェクトはglobalVar（n）が呼び出されたときにも実行できます。



しかし、グローバル変数globalVarは関数オブジェクトを参照するため、このオブジェクトは[[scope]]プロパティで作成され、作成された実行コンテキストに属するアクティベーション/変数オブジェクトを含むスコープチェーンを参照するため、グローバルオブジェクトを含む）。 アクティベーション/変数オブジェクトはガベージコレクターで処理できず、 globalVarで参照される関数オブジェクトが実行されると、 [[scope]]プロパティで参照されるスコープチェーン全体が毎回作成される実行コンテキストのスコープに追加されます関数オブジェクトを呼び出します。



クロージャーが作成されます。 ネストされた関数のオブジェクトには自由変数があり、この関数の可視性のチェーンにあるアクティベーションオブジェクト/変数は、それらを接続する媒体です。



アクティベーションオブジェクト/変数がトラップされるのは、 それへの参照は、 globalVar変数によって参照される関数オブジェクトの内部[[scope]]プロパティに割り当てられたスコープチェーンに含まれます。 アクティベーションオブジェクト/変数は、その状態とともに保存されます。 プロパティの値を使用します。 内部関数の呼び出しの実行実行コンテキストのスコープを解決するプロセスでは、このアクティベーションオブジェクト/変数の名前付きプロパティに対応する識別子が、単にこのオブジェクトのプロパティとして計算されます。 これらのプロパティの値は、作成された実行コンテキストを終了した後でも読み取りおよび設定できます。



上記の例では、このアクティベーション/変数オブジェクトは、外部関数が完了した（実行コンテキストが終了した）時点での仮パラメーターの値、内部関数とローカル変数の定義を表す状態を持ちます。 arg1プロパティの値は2 、 arg2の値は4 、 localVarの値は8、 exampleReturnedプロパティは、外部関数から返されるネストされた関数のオブジェクトへの参照です。 （以下では、便宜上、このアクティベーションオブジェクト\変数をActOuter1として示します。）



もう一度exampleClosureFormを呼び出すと

 var secondGlobalVar = exampleClosureForm(12, 3);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-新しいアクティブ化オブジェクトを使用して、新しい実行コンテキストが作成されます。 そして、引数値arg1-12およびarg2-3を持つ2番目の実行コンテキストからのアクティベーションオブジェクトを含むスコープチェーンを参照する、独自の個別のプロパティ[[scope]]で新しい関数オブジェクトが返されます。 （以下では、便宜上、このアクティベーションオブジェクト\変数をActOuter2として示します。）



exampleClosureFormへの2回目の呼び出しによって、2番目の異なるクロージャーが作成されました。



それぞれglobalVarとsecondGlobalVarで参照されるexampleClosureFormを実行して作成されたこれらの関数オブジェクトは両方とも、式（（arg1 + arg2）/（innerArg + localVar））を返します。 4つの識別子に対して複数のステートメントを実行します。 これらの識別子の計算方法によって、クロージャの目的と意味が決まります。



globalVar ： globalVar（2）によって参照される関数オブジェクトの実行を検討してください。 新しい実行コンテキストが作成され、アクティベーションオブジェクト（ActInner1と呼びましょう）が、実行された関数オブジェクトの[[scope]]プロパティが参照するスコープチェーンの先頭に追加されます。 ActInner1は、仮パラメーターに引数2の値が割り当てられた後にinnerArgプロパティを取得します。 新しい実行コンテキストのスコープチェーンは、ActInner1-> ActOuter1->グローバルオブジェクトになります。



識別子名は、この方法でスコープチェーンを通じて解決されます。 式（（arg1 + arg2）/（innerArg + localVar））の値を返すために、これらの識別子の値は、スコープチェーンから各オブジェクトの識別子に対応する名前を持つプロパティを順番に検索することで決定されます。



チェーンの最初のオブジェクトはActInner1で、値が2の innerArgプロパティがあります。 残りの3つの識別子は、ActOuter1の名前付きプロパティに対応しています。 値が2の arg1 、 arg2は4 、 localVarは8です。 関数呼び出しは（（2 + 4）/（2 + 8））を返します。



これを、 secondGlobalVarで参照される別の同一の関数オブジェクトの実行と比較してください： secondGlobalVar（5） 。 新しい実行コンテキストActInner2のアクティベーションオブジェクトに名前を付けます。チェーンは、ActInner2-> ActOuter2->グローバルオブジェクトのようになります。 ActInner2はinnerArgを5として返し、ActOuter2はarg1 、 arg2およびlocalVarをそれぞれ12、3および8として返します。 戻り値： （（12 + 3）/（5 + 8）） 。



secondGlobalVarを再度実行すると、スコープチェーンの先頭に新しいアクティベーションオブジェクトが表示されますが、ActOuter2はチェーン内の次のオブジェクトのままであり、その名前付きプロパティの値は識別子arg1 、 arg2およびlocalVarの解決に再び使用されます。



このようにして、ECMAScriptのネストされた関数は、仮パラメーター、ネストされた関数の宣言、および作成された実行コンテキストのローカル変数へのアクセスを受け取り、保持します。 したがって、クロージャを作成すると、そのような関数オブジェクトはこれらの値を参照し続け、存在している間にそれらを読み取って変更することができます。 ネストされた関数が作成された実行コンテキストのアクティベーションオブジェクト/変数は、ネストされた関数へのすべての参照が解放され、関数オブジェクトが参照されるまで、関数オブジェクトの[[scope]]プロパティが参照するスコープのチェーンに残りますガベージコレクターで使用できなくなります（今後、スコープチェーン内のすべてのオブジェクトと一緒に不要になります）。



入れ子関数自体に入れ子関数を含めることができます。 クロージャーを形成するために関数によって返されるネストされた関数は、ネストされた関数を返し、クロージャーを作成できます。 添付ファイルごとに、スコープチェーンは、ネストされた関数オブジェクトが作成された実行コンテキストと共に発生する追加のアクティベーションオブジェクトを受け取ります。 ECMAScript仕様では、 スコープチェーンが有限であることが必要ですが、その長さに制限はありません。 おそらく、実際のいくつかの実装にはいくつかの制限がありますが、これまでのところ特定の数量の報告はありませんでした。 どうやら、機能のさらなる投資の可能性は、誰もが必要とするよりも多いです。

クロージャーで何ができますか？

奇妙に思えるかもしれませんが、この質問に対する答えは絶対にすべてです。 私は、クロージャーによってECMAScriptが何でもエミュレートできるようになるという事実について話しています。制限は、このエミュレーションを考案して実装する能力にのみあります。 これは少しわかりにくいので、もっと実用的なものから始める方が良いかもしれません。

例1：関数参照を使用したsetTimeout

クロージャーは、実行前に実行する関数のパラメーターを提供するためによく使用されます。 たとえば、関数をsetTimeout関数の最初の引数として渡す必要がある場合、これはWebブラウザー環境で一般的です。



setTimeoutは、ミリ秒単位で表された間隔（2番目の引数から）の後、最初の引数からアクセス可能な関数（またはコードのjavascript行ですが、この場合はそうではありません）の実行時間を設定します。 setTimeoutを使用するには、この関数を呼び出して、関数オブジェクトへの参照を最初の引数として、ミリ秒単位の間隔を2番目として渡す必要がありますが、関数オブジェクトへの参照には、この関数のスケジュールされた実行のパラメーターを含めることはできません。



ただし、ネストされた関数のオブジェクトへの参照を返す別の関数を呼び出すことができます。この関数は、 setTimeout関数への参照によって渡されます。 ネストされた関数で使用されるパラメーターは、それを返す関数が呼び出されたときに送信されます。 setTimoutは引数を渡さずにネストされた関数を実行しますが、このネストされた関数は、それを返した外部関数を呼び出すことで提供されるパラメーターに引き続きアクセスできます。

 function callLater(paramA, paramB, paramC){ /*      ,   : */ return (function(){ /*        setTimeout,     ,      ,     */ paramA[paramB] = paramC; }); } ... /*  ,       ,     .  ,        ,    .         : */ var functRef = callLater(elStyle, "display", "none"); /*   setTimeout,     ,   funcRef,   : */ hideMenu=setTimeout(functRef, 500);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例2：関数をオブジェクトインスタンスメソッドに関連付ける

関数オブジェクトへの参照が割り当てられ、関数が将来のある時間後に実行される場合、他の多くの状況があります。この場合、この関数の実行のためのパラメーターを準備すると便利です。実行時に簡単にアクセスできませんが、割り当ての瞬間まで不明です。



1つの例は、特定のDOM要素との相互作用をカプセル化するように設計されたjavascriptオブジェクトです。 このDOM要素の対応するイベントがトリガーされたときに実行するdoOnClick 、 doMouseOver 、およびdoMouseOutメソッドが含まれていますが、さまざまなDOM要素に関連付けるために作成されたjavascriptオブジェクトのインスタンスはいくつでもあり、個々のオブジェクトインスタンスはそれらの方法を知らない場合がありますそれらが作成されるコードに適用されます。 これらのオブジェクトインスタンスは、グローバルに参照される方法を決定できません。 どのグローバル変数（存在する場合）にそれらへの参照が割り当てられるかはわかりません。



したがって、問題は、イベントを処理する関数の実行にあります。関数は、javascriptオブジェクトの特定のインスタンスに関連付けられ、このオブジェクトのどのメソッドを呼び出す必要があるかを認識しています。



次の例では、オブジェクトインスタンスを要素のイベントハンドラーに関連付けるクロージャに基づく単純な汎化関数を使用します。 イベントハンドラーを実行すると、イベントオブジェクトと関連付けられた要素への参照が渡されるオブジェクトインスタンスの特定のメソッドが呼び出され、このメソッドによって返される値が返されるとします。

 /*  ,       .       .      obj,   ,      ,   methodName -   . */ function associateObjWithEvent(obj, methodName){ /*   , , ,      DOM : */ return (function(e){ /*  ,     e  ,      DOM,    ,   IE,         ,   */ e = e||window.event; /*      obj,      methodName   ,          ,    ,     this ( , ..        ,      ) */ return obj[methodName](e, this); }); } /*  -  ,   DOM ,  ID      .      , ,      onclick, onmouseover  onmouseout,       . */ function DhtmlObject(elementId){ /*  ,     DOM  ( null,    )   ID  ,   .      el. */ var el = getElementWithId(elementId); /*  el      boolean     if ,   el   ,    ,    null - .  ,    ,    el    DOM. */ if(el){ /*       ,     associateObjWithEvent,   (    this)  ,     ,     .  associateObjWithEvent     ,      DOM .         javascript    . */ el.onclick = associateObjWithEvent(this, "doOnClick"); el.onmouseover = associateObjWithEvent(this, "doMouseOver"); el.onmouseout = associateObjWithEvent(this, "doMouseOut"); ... } } DhtmlObject.prototype.doOnClick = function(event, element){ ... //   doOnClick. } DhtmlObject.prototype.doMouseOver = function(event, element){ ... //   doMouseOver. } DhtmlObject.prototype.doMouseOut = function(event, element){ ... //   doMouseOut. }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、グローバルな名前空間に影響を与えたり 、 DhtmlObjectの他のインスタンスと衝突したりすることなく、 DhtmlObjectのインスタンスをDOM要素に関連付けることができ、他のコードによる使用方法を考慮する必要はありません。

例3：相互接続された機能のカプセル化

クロージャーを使用して、相互接続され相互依存するコードをグループ化する追加のスコープを作成して、偶発的な相互作用のリスクを最小限に抑えることができます。 文字列を作成する関数があり、連結操作の繰り返し（および多くの中間文字列の作成）を避けるために、配列を使用して文字列の一部を特定の順序で保存し、 Array.prototype.joinを使用して結果を出力することをお勧めします（引数として空の文字列を使用します）。 配列は出力のバッファーとして使用されますが、関数内でローカルに定義されている場合、関数が実行されるたびに再作成されます。これは、関数の呼び出しごとに配列の変数の内容のみが変更される場合は不要です。



1つの方法は、この配列のグローバル変数を作成して、毎回使用するたびに再作成する必要がないようにすることです。 ただし、その後、バッファ配列を使用する関数を参照するグローバル変数に加えて、配列自体を参照する別のグローバルプロパティがあります。 その結果、コードを制御することがより困難になります;他の場所で使用する場合、作成者は関数定義と配列定義の両方を追加する必要があることを覚えておく必要があります。 また、このようなコードは、関数名の一意性を確認することに加えて、この関数が依存する配列の名前がグローバル名前空間にも一意であることも確認する必要があるため、他のコードと組み合わせることが困難です。



クローズすると、バッファー配列をそれに依存する関数に関連付けることができます（そしてきちんとパッケージ化できます）。同時に、名前空間の競合やランダムな相互作用のリスクなしに、グローバル名前空間の外部に配列に設定されたプロパティ名を保存できます。



トリックは、エクスプレッション関数に組み込み（インライン）実行することにより、1つの追加の実行コンテキストを作成することです。これにより、外部コードで使用されるネストされた関数が返されます。 バッファー配列は、組み込み（インライン）実行を伴う式関数のローカル変数として定義されます。 実行は1回行われるため、配列は1回だけ作成されますが、それに依存する関数は繰り返し使用できます。



次のコードでは、ほとんど変更されないHTML文字列を返す関数が作成されますが、この文字シーケンスには、関数が呼び出されたときにパラメーターを介してアクセス可能な変数情報が含まれている必要があります。



ネストされた関数オブジェクトへの参照は、式関数に組み込まれた実行から返され、グローバル変数に割り当てられます。したがって、この関数オブジェクトはグローバル関数として呼び出すことができます。 バッファ配列は、外部式関数のローカル変数として定義されます。 グローバル名前空間に配置されておらず、それを使用する関数の呼び出しごとに再作成されません。

 /*   getImgInPositionedDivHtml       -,      -.      HTML,     DIV,   IMG,           . */ var getImgInPositionedDivHtml = (function(){ /* bufferAr - ,     - .            , ..         .     -  ,       . */ var buffAr = [ '<div id="', '', // 1, DIV ID  '" style="position:absolute;top:', '', // 3, DIV top  'px;left:', '', // 5, DIV left  'px;width:', '', // 7, DIV width 'px;height:', '', // 9, DIV height 'px;overflow:hidden;\"><img src= '', // 11, IMG URL '\" width= '', // 13, IMG width '\" height= '', // 15, IMG height '\" alt= '', // 17, IMG alt  '\"><\/div>' ]; /*    ,     -.           getImgInPositionedDivHtml(...) */ return (function(url, id, width, height, top, left, altText){ /*           */ buffAr[1] = id; buffAr[3] = top; buffAr[5] = left; buffAr[13] = (buffAr[7] = width); buffAr[15] = (buffAr[9] = height); buffAr[11] = url; buffAr[17] = altText; /*  ,            (   ,       ) */ return buffAr.join(''); }); //  -. })(); /*^^-  (inline)   - */
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

1つの関数が別の（または複数の）関数に依存しているが、これらの他の関数が他のコードで直接呼び出されることを意図していない場合、同じ手法を使用してこれらの関数をオープンアクセスの1つにグループ化できます。したがって、複雑な多機能プロセスが、簡単に移植できるカプセル化されたコードモジュールで作成されます。

その他の例

おそらく、クロージャーの最も有名なアプリケーションの1つは、Douglas Crockford ECMAScriptオブジェクトでプライベートインスタンス変数をエミュレートする手法です。ECMAScriptオブジェクトのプライベート静的メンバーのエミュレーションを含む、組み込みのアクセシビリティと可視性を含むあらゆる種類のスコープ構造で拡張できます。



クロージャーアプリケーションは無数にありますが、それらがどのように機能するかを理解することが、おそらくそれらをどのように使用できるかを理解するための最良のガイドです。

ランダム閉包

埋め込まれた関数を、それが作成された関数の本体の外部でアクセス可能にすると、クロージャーが形成されます。したがって、クロージャーは非常に簡単に作成できます。その結果、クロージャーが言語の機能であることを理解していないjavascript開発者は、クロージャーが作成されたことや結果になる可能性があることを認識せずに、明らかな結果なしでさまざまなタスクに埋め込み関数を使用します。



偶発的なクロージャの作成には、次のセクションで説明するIEのメモリリーク問題などの副作用があります。また、コードのパフォーマンスに影響を与える可能性があります。理由は、クロージャー自体ではなく、実際、慎重に使用すると、クロージャーは効果的なコードの作成に大きく貢献する可能性があります。ポイントはネストされた関数にあり、その使用は効率に影響する可能性があります。



ネストされた関数がDOM要素のイベントハンドラーとして使用される場合、一般的な方法です。たとえば、次のコードを使用して、onclickイベントハンドラーをリンク要素に追加できます。

 /*   ,        href            */ var quantaty = 5; /*         (     linkRef),       onclick,      quantaty   href        ,    true,  ,    ,    href,     . */ function addGlobalQueryOnClick(linkRef){ /*   linkRef     true ( ,     ) */ if(linkRef){ /*  -            onclick   */ linkRef.onclick = function(){ /*   -      href ,         */ this.href += ('?quantaty='+escape(quantaty)); return true; }; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

addGlobalQueryOnClick関数が呼び出されるたびに、新しいネストされた関数が作成されます（割り当てられたときにクロージャーが形成されます）。効率の観点から、addGlobalQueryOnClickが1回または2回だけ呼び出されたかどうかは関係ありませんが、関数が集中的に使用された場合、多くの個別の関数オブジェクトが作成されました（内部式関数の計算ごとに1つ）。



上記のコードは、内部関数が作成された関数の外で利用可能になったという事実（つまり、クロージャーの結果）を利用していません。イベントハンドラーとして個別に使用する関数を定義し、この関数へのリンクをイベントハンドラーのプロパティに割り当てることで、まったく同じ効果を実現できます。単一の関数オブジェクトが作成され、このイベントハンドラーを使用するすべての要素は、この単一の関数へのリンクを使用します。

 /*   ,        href            */ var quantaty = 5; /*         (     linkRef),       onclick,      quantaty   href        ,    true,  ,    ,    href,     . */ function addGlobalQueryOnClick(linkRef){ /*   linkRef     true ( ,     ) */ if(linkRef){ /*          ,  ,     . */ linkRef.onclick = forAddQueryOnClick; } } /*   ,         ,         href  . */ function forAddQueryOnClick(){ this.href += ('?quantaty='+escape(quantaty)); return true; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初のバージョンのネストされた関数は、その使用によって作成されたクロージャーを使用することを意図していないため、ネストされた関数を使用せず、したがって本質的に同一の関数オブジェクトのセットを作成するプロセスを繰り返さないほうが効率的です。



同様の原則がコンストラクター関数オブジェクトに適用されます。次のコンストラクター構造に似たコードが表示されることは珍しくありません。

 function ExampleConst(param){ /*      -             */ this.method1 = function(){ ... //   }; this.method2 = function(){ ... //   }; this.method3 = function(){ ... //   }; /*     . */ this.publicProp = param; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンストラクターを使用して、新しいExampleConst（n）を実行してオブジェクトを作成するたびに、メソッドとして機能する関数オブジェクトの新しいセットが作成されます。つまり、より多くのオブジェクトインスタンスが作成されると、より多くの対応する関数オブジェクトが作成されます。



ダグラスクロックフォードのjavascriptオブジェクトのプライベートフィールドをエミュレートする手法では、コンストラクター内で作成されたオブジェクトのオープンプロパティにネストされた関数のオブジェクトへの参照を割り当てる結果として生じるクロージャーが使用されます。ただし、オブジェクトのメソッドがコンストラクター内で形成されるクロージャーを利用しない場合、各インスタンスに追加の関数オブジェクトを作成すると、オブジェクトの作成プロセスが遅くなり、より多くのリソースが必要になります。



この場合、関数オブジェクトを一度作成し、コンストラクターのプロトタイプオブジェクトの対応するプロパティにそれらへの参照を割り当てると、このコンストラクターによって作成されたすべてのオブジェクトで使用できます。

 function ExampleConst(param){ /*      */ this.publicProp = param; } /*       -            prototype  */ ExampleConst.prototype.method1 = function(){ ... //   }; ExampleConst.prototype.method2 = function(){ ... //   }; ExampleConst.prototype.method3 = function(){ ... //   };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Internet Explorerのメモリリークの問題

Internet Explorerブラウザ（バージョン4〜6（テスト時は現在のバージョンは6）でテスト済み）には、ガベージコレクションシステムに欠陥があります。これらの環境オブジェクトが「円形」リンクの一部である場合、ECMAScriptオブジェクトと一部の環境オブジェクトの処理が妨げられます。この場合の環境オブジェクトは、DOM Nodeオブジェクト（ドキュメントオブジェクトとその子孫を含む）およびActiveXオブジェクトとして理解されます。循環リンクにそれらの1つ以上が含まれている場合、参加しているオブジェクトはどれも解放されず、それらが使用するメモリはブラウザが閉じられるまでシステムにアクセスできなくなります。



循環参照とは、2つ以上のオブジェクトが開始点につながるように相互に参照する場合です。たとえば、オブジェクト1にオブジェクト2を参照するプロパティがあり、オブジェクト2にオブジェクト3を参照するプロパティがあり、オブジェクト3にオブジェクト1を参照するプロパティがある場合、純粋なECMAScriptオブジェクトの場合、オブジェクト1 2または3、他のオブジェクトは参照を停止し、相互に参照するだけであるという事実が認識され、ガベージコレクターで使用できるようになります。ただし、Internet Explorerの場合、これらのオブジェクトの少なくとも1つがDOM NodeまたはActiveXオブジェクトである場合、ガベージハンドラーは、この循環関係がシステムの他の部分から分離されていることを確認できず、それらを解放します。代わりに、ブラウザが閉じられるまで、それらはすべてメモリに残ります。



クロージャーは、循環参照の作成に非常に適しています。たとえば、クロージャーを作成する関数のオブジェクトがDOM Nodeオブジェクトのイベントハンドラーとして割り当てられ、このノードへのリンクがこの関数のスコープ内のアクティベーションオブジェクト/変数のプロパティの1つに割り当てられている場合、循環リンクが表示されます。 DOM_Node.onevent-> function_object。[[Scope]]-> scope_chain-> Activation_object.nodeRef-> DOM_Node。これは非常に簡単であり、すべてのページに共通のコードの一部でこのようなリンクを形成するサイトを少し見ると、ほとんどのシステムメモリ（場合によってはすべて）を使用できます。



IEでonunloadイベントを使用してイベントを処理する機能へのリンクをリセットするなど、循環リンクの作成を避け、回避できない場合は修正措​​置を講じる必要があります。問題を特定し、クロージャ（およびそのメカニズム）を理解することで、IEでこの問題を回避できます。



リチャード・コーンフォードによって書かれました。2004年3月。

修正および提案者：

Martin Honnen。

ヤン・エルワン・ペリオ（うん）。

ラッセ・ライヒシュタイン・ニールセン。（短絡検出）

マイクシロッコ。

ジョン・ストックトン博士。

ギャレット・スミス。



Lyudmila Likhovidの翻訳にご参加いただきありがとうございます。