javascript fonction dans la boucle/fermeture

Question

Je suis nouveau javascript et essayer de comprendre le comportement de ce code, qui tente d'assigner des gestionnaires onclick uniques à différents éléments DOM dans les myElements du tableau []:

(function handleClicks(){ 
for (var i = 0; i < 100; ++i) { 
myElements[i].onclick = function() { 
     alert('You clicked on: ' + i); 
}; 
})(); 

je crois comprendre que chaque fois qu'un élément DOM est cliqué, le navigateur doit alerter « Vous avez cliqué sur 100 » comme javascript utilisera la valeur i a une fois que la fonction a terminé

J'ai deux questions:

1. Si i a une portée que dans la fonction handleClicks() comment l'accès au navigateur i fois la fonction terminée - sûrement i n'existe plus?
2. J'ai essayé ce code en mettant deux éléments HTML dans le tableau

var myElements = [];

myElements.push(document.getElementById('1'); 

myElements.push(document.getElementById('2'); 

http://jsfiddle.net/branmong/fS7qE/

Mais lorsque le programme est exécuté, il avertit « que vous avez cliqué sur: 2 » pour chaque élément cliqué .

Pourquoi n'est-il pas en alerte 'vous avez cliqué sur: 100'. comme c'est sûrement la valeur de moi une fois que la fonction a fini de fonctionner?

Answer 1

« Si i ne dispose d'une marge dans la fonction handleClicks() comment l'accès au navigateur i une fois que la fonction est terminée - sûrement i n'existe plus? »

La variable i se trouve dans le champ d'enceinte (la fonction handleClicks). Lorsqu'une fonction est créée, elle porte sa portée variable d'origine pour la durée de vie de la fonction. Ceci est appelé fermeture. Pour cette raison, toutes les fonctions de gestionnaire créées dans la boucle font référence à la même variable i qui existe dans handleClicks. Cela maintient i en vie. Lorsque vous détruisez les gestionnaires, i pourra être collecté.

---

Le deuxième exemple de code arrête à 2 parce que vous obtenez un TypeError pour accéder à une propriété sur undefined. Cela interrompt l'exécution du code.

Answer 2

Cela est dû au fait que vous n'avez que deux éléments dans le tableau myElements. Ainsi, la boucle s'exécute seulement jusqu'à 2 et les erreurs après cela. Si vous avez ajouté 5 éléments, il affichera 5, affichera 100 si vous avez ajouté 100.