DOMとクロージャによる循環参照問題の解決方法

Question

最近、DOMオブジェクトとクロージャにより循環参照が起き、メモリリークが発生するという問題について知りました。
この問題が古いブラウザで発生し、動作に影響すると知ったため、昔書いたクロスブラウザ対応コードにこの問題が無いか検証したところ、以下の様な循環参照パターンとなっている事が分かりました。
(以下に提示するのは、簡易化したコードです)

/**
 * @param {Node} targetNode
 */
function clickCaptcha(targetNode) {
    targetNode.addEventListener('click', function () {
        console.log(targetNode);
    }, false);
}

targetNodeが操作対象のDOMノードです。
これに追加するリスナーがクロージャになっており、targetNodeを参照しています。
このコードを循環参照が発生しないものに書き換えようと考えていますが、その方法が分かりません。

単純に考えるならば、以下のようにすれば解決すると思います。

/**
 * @param {Node} targetNode
 */
var clickCaptcha = (function () {
    // イベントのリスナーを外部に出すことでクロージャを回避
    var clickListener = function () {
        // addEventListenerにより設定したリスナーは、
        // thisがイベントを追加した要素のDOMノード(=targetNode)となる
        console.log(this);
    };

    return function (targetNode) {
        targetNode.addEventListener('click', clickListener, false);
    };
}());

/**
 * @param {Node} targetNode
 */
var clickCaptcha = (function () {
    // イベントのリスナーを外部に出すことでクロージャを回避
    var clickListener = function (e) {
        // EventオブジェクトのcurrentTargetプロパティを利用
        console.log(e.currentTarget);
    };

    return function (targetNode) {
        targetNode.addEventListener('click', clickListener, false);
    };
}());

しかし、クロスブラウザ対応用のコードであるため、addEventListenerではなくattachEventを使用した場合はthisが扱えませんし、Eventオブジェクトも信用できません。
このため、この2つの解決方法は採用できず、変数targetNodeを他の方法でリスナーから参照する必要があります。

【クロージャとメモリリークについてのコピペ - こんにちはこんにちはmonmonです！】の702で提示されたcreateLeakFreeClosure関数を使用し、以下のように書く方法もあります。

function createLeakFreeClosure(closure) {
    /**
     * Note: 適切に動作するよう、いくつか修正
     */
    var count = createLeakFreeClosure.count++;
    createLeakFreeClosure[count] = closure;
    closure = null;
    return function () {
        return createLeakFreeClosure[count].apply(
            this,
            Array.prototype.slice.call(arguments)
        );
    };
}
createLeakFreeClosure.count = 0;

/**
 * @param {Node} targetNode
 */
function clickCaptcha(targetNode) {
    targetNode.addEventListener('click', createLeakFreeClosure(function () {
        console.log(targetNode);
    }), false);
}

しかし、createLeakFreeClosure関数は同ページの707でも指摘されているように、何度も実行した場合に引数に渡した関数が保持され続ける事になり、これはこれで問題となってしまいます。
私自身もこの関数が循環参照を回避できる理由が理解できていないため、下手に改良もできません。
よって、これも採用できません。

冒頭のコードを、循環参照が発生せず、また変数targetNodeを参照できるようにするには、どのようにすれば良いでしょうか。

循環参照について理解できていないため、動作の違うサンプルを例示されても修正して活用できません。
このため、コメントにて私の書いたコードを例示し、何度も指導していただく形になってしまいます。

可能であれば、「第一引数に受けたDOM Nodeにclickイベントを定義」する、質問本文冒頭のコードと同じ動作をする循環参照を解決したコードを例示していただければ有難いです。

Comments

[ngyuki]

Event オブジェクトが信用出来ない、というのはどういう理由で？ window.event だったり、event.srcElement だったりするという理由ですか？

[sounisi5011]

文中のe.targetはe.currentTargetの誤りでした。event.currentTargetはattachEventのEventオブジェクトに代替のプロパティが存在しません。またaddEventListenerのPolyfillを設計する場合には、逆にEventオブジェクトを補う必要があります。このような場合も想定したため、Eventオブジェクトに頼る実装は可能な限り避けたいと考えています。

Answer 1

文中のe.targetはe.currentTargetの誤りでした。event.currentTargetはattachEventのEventオブジェクトに代替のプロパティが存在しません。

あ、そういうことですか・・
↓のような回答を書こうとしていたのですがそういう意味ではないということですね・・

---

単に clickCaptcha で次のように target を取り出せば良い、というわけではないのでしょうか？

var clickListener = function (e) {
    e = e || window.event;
    e.target = e.target || e.srcElement;
};

昔はよくこのようなコードを書いていた気がします。
ただ、addEventListener のレシーバとイベントオブジェクトの target は意味が異なるので注意です。

---

おそらくキレイな解決方法はなく、要素の ID を振るなどの泥臭い方法しか無いと思います。
例えば次のような風にです。

function createEventHandler(id, func){
    return function(ev){
        ev = ev || window.event;
        ev.target = ev.target || ev.srcElement;
        ev.currentTarget = ev.currentTarget || document.getElementById(id);

        ev.currentTarget._func_ = func;
        var retval = ev.currentTarget._func_(ev);
        ev.currentTarget._func_ = null;

        ev.target = null;
        ev.currentTarget = null;
        return retval;
    };
}

function addEventListener(elem, name, func)
{
    // 要素に ID が無ければならない、あるいは、無ければ ID をここで自動生成する
    var handler = createEventHandler(elem.id, func);

    if (elem.addEventListener) {
        elem.addEventListener(name, handler, false);
    } else if(elem.attachEvent) {
        elem.attachEvent('on'+name, handler);
    }
}

function clickListener(ev)
{
    console.log(ev.target.tagName);         // BUTTON
    console.log(ev.currentTarget.tagName);  // DIV
    console.log(this.tagName);              // DIV
}

function clickCaptcha(targetNode) {
    addEventListener(targetNode, 'click', clickListener);
}

clickCaptcha(document.getElementById('hoge'));

この例だと、createEventHandler の中のイベントハンドラであるクロージャーは要素を束縛していません。
代わりに id を束縛していて、ハンドラの中で id を元に要素を取り出して色々使ってます。

Comments

[sounisi5011]

IDの自動生成コードを追加したコードです。
このような感じでしょうか?
(下記コードでは、インデントが表示されるよう半角スペースをEN SPACE(U+2002)に置換しています)

/**
 * @param {Node} targetNode
 */
var clickCaptcha = (function () {
    /**
     * @return {string}
     * @see http://stackoverflow.com/questions/3231459#19842865
     */
    function createRandomId() {
        var id;
        do {
            id = 'x' + Math.random().toString(16).slice(2);
        } while (document.getElementById(id));
        return id;
    }

    function createEventHandler(id, listener) {
        return function (ev) {
            ev = ev || window.event;
            ev.target = ev.target || ev.srcElement;
            ev.currentTarget = ev.currentTarget || document.getElementById(id);

            var retval = listener.call(ev.currentTarget, ev);

            ev.target = null;
            ev.currentTarget = null;

            return retval;
        };
    }

    function addEventListener(target, type, listener) {
        var id = target.id || (target.id = createRandomId());
        var handler = createEventHandler(id, listener);

        if (target.addEventListener) {
            target.addEventListener(type, handler, false);
        } else if (target.attachEvent) {
            target.attachEvent('on' + type, handler);
        }
    }

    function clickListener(event) {
        console.log(event.currentTarget);
    }

    /**
     * @param {Node} targetNode
     */
    return function (targetNode) {
        addEventListener(targetNode, 'click', clickListener);
    };
}());

[ngyuki]

そのような感じです。

ちなみにページのアンロード時に DOM のオブジェクトを絡めた循環参照があるとメモリリークする問題は、かなり昔に解決されていたと思います（IE7 だったかな？）。

Answer 2

まず、質問者さんが必要としているのは event.target, event.currentTarget (this と等価) のどちらなのでしょうか？
解決法として挙げられている2つのコードが event.target だったり、this だったりするので判別できませんでした。

addEventListenerではなくattachEventを使用した場合はthisが扱えませんし、Eventオブジェクトも信用できません。

attachEvent では this を使えませんが、event オブジェクトは DOM Events と互換性がないだけで信用できないわけではありません。
event.target を利用した場合のメモリリーク回避パターンは次の通りです。

(function () {
  function handleClick (event) {
    var target = event.target || event.srcElement;  // attachEvent では event.srcElement で target を参照できる
  }
  
  function initEvent () {
    if (document.addEventLisetner) {
      document.addEventLisetner('click', handleClick, false);
    } else if (document.attachEvent) {
      document.attachEvent('onclick', handleClick);
    }
  }
}());

attachEvent では event.currentTarget に代わるプロパティが存在しない為、parentNode を辿って参照する工夫は必要になります。
また、複数ノードに同じイベントを割り当てる処理をたまにみかけますが、event.target を利用すれば上位ノードでイベント定義するだけで済む場合が結構あります。

大抵はこれで何とかなりますが、どうしても event.currentTarget が必要と思える状況が出てきた場合は event.currentTarget を返す関数を定義して関数呼び出しして下さい。

(function () {

  var getCurrentTarget;  // event.currentTarget を返す関数

  function createGetElement (element) {   // 「要素ノードを返す関数」を生成する関数
    return function getElement () { return element; };
  }
  
  function handleClick (event) {
    var currentTarget = event.currentTarget || getCurrentTarget();
  }

  function initEvent () {
    var currentTarget = document.getElementById('sample');

    getCurrentTarget = createGetElement(currentTarget);

    if (currentTarget.addEventLisetner) {
      currentTarget.addEventLisetner('click', handleClick, false);
    } else if (currentTarget.attachEvent) {
      currentTarget.attachEvent('onclick', handleClick);
    }
  }

  initEvent();
}());

あとは、「event.currentTarget をグローバル変数にする」という方法もないわけではありませんが、お勧めしません。

---

最後に window.onunload 時に全てのイベントハンドラ(イベントリスナ)を detachEvent (removeEventListener) を実行する事をお勧めします。
この処理を入れておくと循環参照が発生していたとしても window.onunload のタイミングで順参照が切れる為、メモリリークしません。

(function () {

  function handleClick (event) {
  }

  function handleDOMContentLoaded (event) {
  }

  function handleUnload (event) {   // 全てのイベント登録を解除する
    if (document.removeEventListener) {
      document.removeEventListener('click', handleClick, false);
      document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded, false);
      removeEventListener('unload', handleUnload, false);
    } else if (document.detachEvent) {
      document.detachEvent('onclick', handleClick);
      detachEvent('onload', handleDOMContentLoaded);
      detachEvent('onunload', handleUnload);
    }
  }

  function initEvent () {
    if (document.addEventListener) {
      document.addEventListener('click', handleClick, false);
      document.addEventListener('DOMContentLoaded', handleDOMContentLoaded, false);
      addEventListener('unload', handleUnload, false);
    } else if (document.attachEvent) {
      document.attachEvent('onclick', handleClick);
      attachEvent('onload', handleDOMContentLoaded);
      attachEvent('onunload', handleUnload);
    }
  }

  initEvent();
}());

Comments

[sounisi5011]

すみません。event.targetを、リスナーを設定した要素に対応するプロパティであると誤解していました。正しくはevent.currentTargetです。

[sounisi5011]

> どうしても `event.currentTarget` が必要と思える状況が出てきた場合は `event.currentTarget` を返す関数を定義して関数呼び出しして下さい。

このような感じでしょうか。
(下記コードでは、インデントが表示されるよう半角スペースをEN SPACE(U+2002)に置換しています)

/**
 * @param {Node} targetNode
 */
var clickCaptcha = (function () {
    // 循環参照対策のため、「要素を返す関数」を返す関数を定義
    var createGetElement = function (element) {
        return function () {
            return element;
        };
    };

    return function (targetNode) {
        // 対象要素を返す関数を定義
        var getTargetNode = createGetElement(targetNode);

        targetNode.addEventListener('click', function () {
            // リスナー内で「対象要素を返す関数」を実行し、
            // それをローカル変数`targetNode`として定義
            var targetNode = getTargetNode();

            console.log(targetNode);
        }, false);

        // nullを代入し、参照を削除
        targetNode = null;
    };
}());

[ngyuki]

その『「要素ノードを返す関数」を生成する関数』だと、「要素ノードを返す関数」が要素を束縛しているので、getTargetNode は要素を束縛しています。getTargetNode が存在するスコープの addEventListener の引数の function は getTargetNode を束縛するので、そのやり方では変わりません。

[think49]

To: sounisi5011さん
targetNode = null; があるので参照は切れていますが、良いコードとはいえません。
初めから targetNode を参照しないようにスコープを調節してください。
unload 時の処理を踏まえると、イベントリスナは全て名前付きで関数宣言する必要があります。
親記事に具体的なコードを追加しました。

[sounisi5011]

createGetElement関数によるevent.currentTarget取得コードの例ですが、これですと複数の要素にイベントを登録したい場合に変数getCurrentTargetが上書きされてしまい、正しく動作しないように思います。
この問題を解決するため、「handleClick関数を生成する関数」を定義し、その引数にgetCurrentTargetを指定する以下のコードを記述してみました。
これはどうなのでしょうか。
(下記コードでは、インデントが表示されるよう半角スペースをEN SPACE(U+2002)に置換しています)

/**
 * @param {Node} targetNode
 */
var clickCaptcha = (function () {
    var createGetElement = function (element) {
        return function () { return element; };
    };

    var createHandleClick = function (getCurrentTarget) {
        return function (event) {
            var targetNode = event.currentTarget || getCurrentTarget();

            console.log(targetNode);
        };
    };

    /**
     * @param {Node} targetNode
     */
    return function (targetNode) {
        var getCurrentTarget = createGetElement(targetNode);

        var handleClick = createHandleClick(getCurrentTarget);
        if (targetNode.addEventLisetner) {
            targetNode.addEventLisetner('click', handleClick, false);
        } else if (targetNode.attachEvent) {
            targetNode.attachEvent('onclick', handleClick);
        }
    };
}());

[sounisi5011]

unloadイベント時に追加したイベントを削除する例ですが、documentオブジェクトにイベントを追加する事が前提のコードとなっています。
これをclickCaptcha関数のように、任意のDOM Nodeにイベントを追加できるよう変更を試みましたが、unloadイベント時に任意のDOM Nodeからイベントを削除する関係上、何かしらの変数で任意のDOM Nodeとリスナーに対する参照を保持し続ける必要があり、適切に設計できませんでした。
(focusイベントなどイベントバブリングが行われないものは、上位ノードのdocumentオブジェクトでキャッチできません。このため、任意のDOM Nodeにイベントを追加する必要があります)

このような場合、どのようにすれば良いでしょうか。

[ngyuki]

もう一度コメントしておきますと・・・

    var createGetElement = function (element) {
        return function () {
            return element;
        };
    };

createGetElement が返す関数は element を参照しています（クロージャーだから）。

    var getTargetNode = createGetElement(targetNode);

 createGetElement の引数に targetNode を与えているので、createGetElement の戻り値である getTargetNode は targetNode を参照しています。

    targetNode.addEventListener('click', function () { /* ... */}, false);

ここの function は getTargetNode を参照しています（クロージャーだから）。

    targetNode = null;

targetNode に null をセットしても、getTargetNode が参照している targetNode は変わらず、この参照は切れていません（createGetElement の引数は共有渡しとか参照の値渡しとか呼ばれるやつだから）。

[think49]

To: sounisi5011さん
複数の要素を扱いたい場合は getCurrentTarget を配列化して handleClick を要素の数だけ用意してください。
DOMとScriptの循環参照回避パターンは基本的に汎用性は犠牲になります。
汎用性を求める場合は event.currentTarget, event.type, listener, useCapture をキャッシュして実行する仕組みが必要であり、jQuery も同様のコードになっていたはずです。
私も以前書いた事がありますが、event のプロパティの互換性をとったり、attachEvent で実行順を保証したり、といろいろ実装したらかなり長いコードになりました。
https://gist.github.com/think49/882821
いろいろ考えて書いている内は楽しいですが、それに伴う労力を考えると割り切りも必要なのかもしれません。
原理的には可能なはずなので、もし、よろしければ私の書いたコードを読み解いて fork してみて下さい。

To: ngyukiさん
createGetElement で返す getCurrentTarget は currentTarget への参照を保持しますが、関数呼び出しされるまで参照できません。
メモリリークパターンの循環参照は「click(DOM) -> handleClick(Script) -> DOMノード(DOM)」で形成されるものですが、currentTarget となる要素ノードは handleClick のスコープ上に存在しない為、「click(DOM) -> handleClick(Script) -> getCurrentTarget(Script)」と「getCurrentTarget(Script) -> currentTarget(DOM)」が独立に形成され、循環参照しなくなるという認識でした。

[ngyuki]

> click(DOM) -> handleClick(Script) -> DOMノード(DOM)

中間に js オブジェクトを幾つ挟んでも循環参照であることには変わりないです。なので、

> 「click(DOM) -> handleClick(Script) -> getCurrentTarget(Script)」と「getCurrentTarget(Script) -> currentTarget(DOM)」

でも循環参照してます。

[think49]

返信遅くなりましてすみません。
今では検証手段がないので真偽を確かめることは出来ませんが、ngyukiさんの言われる内容が正しいのであれば、汎用的な対策としては unload 時に detachEvent する以外に方法はなさそうですね…。

Answer 3

jQuery 1.11.3の実装を見たところ、以下のようにしてメモリリークを回避しているようです。
(4306~4417行目)

/**
 * @param {Node} targetNode
 */
function clickCaptcha(targetNode) {
    var eventHandle = function () {
        var targetNode = eventHandle.elem;

        console.log(targetNode);
    };
    // Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
    eventHandle.elem = targetNode;

    // Bind the global event handler to the element
    if (targetNode.addEventListener) {
        targetNode.addEventListener('click', eventHandle, false);
    } else if (targetNode.attachEvent) {
        targetNode.attachEvent('onclick', eventHandle);
    }

    // Nullify elem to prevent memory leaks in IE
    targetNode = null;
}

ただ、この処理が循環参照の解決策となるのかどうかについては確証が持てません…