Странное поведение при добавлении событий-функций изнутри функций и передачи элементов

Question

Сегодня я столкнулся со странным поведением в javascript, когда добавлял функцию к событию onclick.

Позвольте мне объяснить:
При динамическом создании некоторых кнопок и добавлении функции к их событиям onclick,как это:

    function createButton(a) {
        button = document.createElement("button");
            button.setAttribute("id","a"+a);
            button.innerHTML = "a"+a;
            button.onclick = function () {
                alert("Should be the same: a"+a+" and "+this.id);
            };
        return button;
    }

    for (var a=0;<3=;a++) {
        document.body.appendChild(createButton(a));
    }

Я получаю это сообщение при нажатии первой кнопки: "Должно быть одинаковым: a0 и a0" , как и ожидалось.

Но когдаЯ хочу сделать то же самое, не используя отдельную функцию (createButton), как это:

    var button;
    for (var a=0;a<=3;a++) {
        button = document.createElement("button");
        button.setAttribute("id","a"+a);
        button.innerHTML = "a"+a;
        button.onclick = function () {
            alert("Should be the same: a"+a+" and "+this.id);
        };
        document.body.appendChild(button);
    }
    a=999;

Теперь я получил это сообщение при нажатии первой кнопки: "Должно быть одинаково: a999 и a0«.

Кто-нибудь знает, почему они не выдают одинаковые оповещения?И есть ли способ заставить второй пример работать как первый?(я знаю, что button.onclick = "alert('Should be the same: a"+a+" and "+this.id+"')) делает свое дело, но это просто уродливо)

Любая помощь будет оценена, сценарий можно посмотреть по адресу http://xc -results.com / static / stackoverflowq1.htm

Answer 1

Это не странное поведение в JavaScript.

Вы звоните alert() после того, как скрипт завершил свою оценку, и a равно 999.Подумай об этом.

Answer 2

Во втором примере button.onclick - это замыкание: функция + некоторые ограниченные переменные (в данном случае a). Это означает, что a будет оцениваться в тот момент, когда onclick() будет оценено , а не в данный момент определено . На данный момент button.onclick выполняется, a равно 999, следовательно, ваш результат.

Answer 3

Это очень распространенная проблема.

a в предупреждении является ссылкой на переменную a, которая принимает значение 999.Таким образом, все оповещения будут иметь одинаковое значение a = 999.

Чтобы избежать этого, вам нужно сразу же оценить его при добавлении клика.

    var b = a;
    button.onclick = function () {
        alert("Should be the same: a"+b+" and "+this.id);
    };

Скорее всего, это сработает.