понимание замыканий и их объем

Question

У меня проблемы с пониманием замыканий и объема. Я был почти уверен, что понял это, пока не получил неожиданное поведение.

function doSomething () {
    // Code unrelated to frag

    var rightDiv = document.createElement(rightDiv);

    var img, i, frag = document.createDocumentFragment();
    for (i = 0; i < photoIDs.length; i++){
        img = new Image();
        addClass(img, "popup-image-preview");
        img.src = "photos/"+photoIDs[i]+".jpg";
        frag.appendChild(img)
    }
    // add popup for preview
    addEvent(rightDiv, "mouseover", function() {
        showPopup(frag, this);
        console.dir(frag);
    });

    // more code unrelated to frag
}

Я ожидал, что обработчик onmouseover все еще будет иметь доступ к DocumentFragment, содержащему изображения. Но когда я вижу его в консоли, у него больше нет детей. Не правда ли, что эта конкретная анонимная функция имеет доступ к значениям локальных переменных для этого конкретного выполнения doSomething , или последующие вызовы doSomething повлияют на закрытия предыдущих выполнений? Последнее сделает мою ситуацию понятной, поскольку последующие вызовы doSomething могут иметь пустой frag .

Answer 1

Кажется, что закрытие работает как ожидалось. Моя ошибка была в showPopup, где я добавлял frag к узлу документа. Я не знал, что это, следовательно, очистит DocumentFragment. Я сейчас использую node.appendChild(frag.cloneNode(true)) в showPopup.

Спасибо всем за помощь

Answer 2

Вообще говоря, вы правы, и ваш код должен работать так, как вы ожидаете. Но есть несколько вещей, которые заставляют задуматься:

• где определено rightDiv? Похоже, вы добавляете все больше и больше mouseover событий в этот «узел», поскольку это не является частью контекста.

• do addEvent или showPopup изменить что-либо в переменной frag?