1. Ejemplo MDN

El fragmento de código a continuación asigna una función que muestra el texto de ayuda en cada campo de texto cuando se enfoca, aquí está el enlace a JsFiddle: https://jsfiddle.net/v7gjv/8164/

 function showHelp(help) { document.getElementById('help').textContent = help; } function setupHelp() { var helpText = [ {'id': 'email', 'help': 'Your e-mail address'}, {'id': 'name', 'help': 'Your full name'}, {'id': 'age', 'help': 'Your age (you must be over 16)'} ]; for (var i = 0; i < helpText.length; i++) { var item = helpText[i]; document.getElementById(item.id).onfocus = function() { showHelp(item.help); } } } setupHelp();

Pero solo mostrará el último texto de ayuda sin importar cuál de las tres entradas esté enfocada. MDN dice que la función asignada a las tres entradas es un cierre, por lo que comparten la misma referencia a la variable helpText, cuando termina el ciclo, i=2, por lo que las tres entradas tienen referencia al último elemento en helpText.

2.Mi prueba

La parte donde no entiendo es por qué las tres entradas tienen la misma referencia al mismo elemento variable. Hago una prueba como esta.

 (function() { function closure() { var i = 0; return { display: function() { console.log(i); }, add: function() { i += 1; } } } var a = closure(); var b = closure(); a.add(); a.display(); //return 1 b.display(); //return 0 })()

3.Mis pensamientos y preguntas

De la prueba, a y b tienen diferentes variables i, i de a cambió pero b sigue siendo el mismo. Pero en el ciclo for, todas las entradas apuntan a la misma variable, por lo tanto, el ciclo for cambia el valor que hace que todas las entradas apunten al último elemento en el texto de ayuda.

Entonces mi pregunta es por qué apuntan a la misma variable pero en mi prueba a,b no.