Comment passer la valeur (et non la référence) d'une variable JS à une fonction ?

Question

Voici une version simplifiée de ce que j'essaie d'exécuter :

for (var i = 0; i < results.length; i++) {
    marker = results[i];
    google.maps.event.addListener(marker, 'click', function() { 
        change_selection(i);
    }); 
}

mais je constate que chaque écouteur utilise la valeur de results.length (la valeur lorsque la boucle for se termine). Comment puis-je ajouter des listeners de telle sorte que chacun utilise la valeur de i au moment où je l'ajoute, plutôt que la référence à i ?

Answer 1

Dans les navigateurs modernes, vous pouvez utiliser l'option let o const pour créer une variable à l'échelle du bloc :

for (let i = 0; i < results.length; i++) {
  let marker = results[i];
  google.maps.event.addListener(marker, 'click', () => change_selection(i));
}

---

Dans les navigateurs plus anciens, vous devez créer une portée distincte qui enregistre la variable dans son état actuel en la passant comme paramètre de fonction :

for (var i = 0; i < results.length; i++) {
  (function (i) {
    marker = results[i];
    google.maps.event.addListener(marker, 'click', function() { 
      change_selection(i);
    }); 
  })(i);
}

En créant une fonction anonyme et en l'appelant avec la variable comme premier argument, vous passez par valeur à la fonction et créez une fermeture.

Answer 2

En plus des fermetures, vous pouvez utiliser function.bind :

google.maps.event.addListener(marker, 'click', change_selection.bind(null, i));

transmet la valeur de i en tant qu'argument de la fonction lorsqu'elle est appelée. ( null est pour la liaison this dont vous n'avez pas besoin dans ce cas).

function.bind a été introduit par le cadre Prototype et a été normalisé dans la cinquième édition d'ECMAScript. Jusqu'à ce que tous les navigateurs le prennent en charge de manière native, vous pouvez ajouter votre propre code d'accès. function.bind l'utilisation de fermetures :

if (!('bind' in Function.prototype)) {
    Function.prototype.bind= function(owner) {
        var that= this;
        var args= Array.prototype.slice.call(arguments, 1);
        return function() {
            return that.apply(owner,
                args.length===0? arguments : arguments.length===0? args :
                args.concat(Array.prototype.slice.call(arguments, 0))
            );
        };
    };
}

Answer 3

Les fermetures :

for (var i = 0, l= results.length; i < l; i++) {
    marker = results[i];
    (function(index){
        google.maps.event.addListener(marker, 'click', function() { 
            change_selection(index);
        }); 
    })(i);
}

EDIT, 2013 : Ceux-ci sont désormais communément appelés IIFE

Answer 4

Vous vous retrouvez avec une fermeture. Voici un article sur les fermetures et comment travailler avec eux. Consultez l'exemple 5 sur la page ; c'est le scénario auquel vous êtes confronté.

EDIT : Quatre ans plus tard, ce lien est mort. La racine de la question ci-dessus est que les for La boucle forme des fermetures (spécifiquement sur marker = results[i] ). Comme marker est passé dans addEventListener vous voyez l'effet secondaire de la fermeture : l'"environnement" partagé est mis à jour à chaque itération de la boucle, avant d'être finalement "sauvegardé" via la fermeture après la dernière itération. MDN explique cela très bien.

Answer 5

for (var i = 0; i < results.length; i++) {
    marker = results[i];
    google.maps.event.addListener(marker, 'click', (function(i) {
        return function(){
            change_selection(i);
        }
    })(i)); 
}