JavaScript イベントハンドラの循環参照




$(function() {
    var menu = document.getElementById('my-menu');
    $('#run').click(function() {
        attachEvt(menu);
    });
});

var attachEvt = function(element) {
    var mouseHandler = function() {
        /* whatever */
        $('#debug').html('done.');
    };
    element.addEventListener('mouseover', mouseHandler, false);
};




attachEvt の中に mouseHandler をネストさせている。

これは、ハンドラ(mouseHandler) が呼び出し元の attachEvt のスコープ内に閉じ込められることを意味する。

したがって、ハンドラは element への参照を保持し続ける。

element は menu への参照を保持し、menu は div#my-menu への参照を保持する。

さらに div#my-menu はハンドラへの参照を保持している。

これを循環参照(circular reference)という。



参考：JavaScriptの最適化について、code.google.comの記事の適当訳 - それ図解で。・・・tohokuaikiのチラシの裏

　　　Fabulous Adventures In Coding : What are closures?

　　　element.addEventListener - MDC