lunes, 25 de agosto de 2014

Referencias en javascript

Un caso de referencia incorrecta, sacado de aquí:

function addLinks () {
    for (var i=0, link; i<5; i++) {
        link = document.createElement("a");
        link.innerHTML = "Link " + i;
        link.onclick = function () {
            alert(i);
        };
        document.body.appendChild(link);
    }
}
window.onload = addLinks;

Clickando en cualquiera de los links siempre se referirá a Link5 ya que el onclick no se ejecuta.

Para solucionarlo, debemos crear una closure en el onclick para que tome el valor de i en ese momento:

function addLinks () {
    for (var i=0, link; i<5; i++) {
        link = document.createElement("a");
        link.innerHTML = "Link " + i;
        link.onclick = function (num) {
            return function () {
                alert(num);
            };
        }(i);
        document.body.appendChild(link);
    }
}
window.onload = addLinks;

No hay comentarios: