Primero, veamos un pedazo de código:
La copia del código es la siguiente:
<a href = "javascript: void (0);"> 111 </a>
<a href = "javascript: void (0);"> 222 </a>
<a href = "javacsript: void (0);"> 333 </a>
var a = document.getElementsBytagName ("A");
función b () {
para (var i = 0; i <a.length; i ++) {
a [i] .onclick = function () {
alerta (i);
}
}
}
Según nuestra intención original de diseño, debe ser hacer clic en una etiqueta A para aparecer en el número de serie correspondiente de la etiqueta, es decir, haga clic en la primera A para aparecer 0 y hacer clic en el segundo para aparecer 1 ... pero el hecho es que el número de etiquetas siempre emergentes siempre es la cantidad de etiquetas a. ¿Cuál es la razón? Este problema me ha preocupado durante mucho tiempo. He consultado muchos materiales en línea y libros de referencia. La mayoría de ellos son plausibles. Creo que muchos estudiantes no saben mucho sobre las razones. Hablaré sobre mi comprensión de este problema. Si hay alguna inapropiación, critique y corrija.
En mi comprensión personal, la razón por la cual la función anterior no logró lograr su propósito es que la función de procesamiento de eventos une la variable I, y la función de procesamiento de eventos se asigna a OnClick, es decir, la función solo se llamará cuando se haga clic en la etiqueta A. Por lo tanto, lógicamente hablando, la función () {alerta (i);} en un bucle simple no se ejecuta realmente, y cuando hacemos clic en la etiqueta A, el bucle for ya se ha ejecutado. En este momento, el valor de I es el valor final de la ejecución de bucle for. Para ser simple, el valor de I pertenece a la función B, y el valor de I que necesitamos es el valor que se le pasa a la función de procesamiento de eventos en tiempo real. Entonces, ¿hay alguna forma de realizar nuestra intención de diseño original? Un compañero de clase inteligente puede haber adivinado que es usar cierres.
Veamos otro código:
La copia del código es la siguiente:
var a = document.getElementsBytagName ("A");
función b () {
para (var i = 0; i <a.length; i ++) {
a [i] .onclick = function (j) {
Función de retorno () {
alerta (j);
}
}(i);
}
}
b();
Ejecute el código anterior y encontrará que la función que queremos se ha implementado, es decir, hacer clic en cualquier etiqueta A aparecerá el número de serie donde se encuentra la etiqueta. Creo que muchos estudiantes han visto muchas versiones similares del código anterior, pero ¿por qué podemos lograr las funciones que necesitamos haciendo esto? Esta es mi opinión personal. Si hay alguna inapropiación, por favor dame algún consejo.
La esencia de la comprensión del código anterior es la comprensión de la variable i. En este código, cuando se ejecuta la función y se encuentra el bucle for, se encuentra una función de llamada inmediata. En este momento, el valor variable en tiempo real se pasa a la función de llamada inmediata. La función se llama inmediatamente y la función de procesamiento de eventos almacena el valor variable en tiempo real en tiempo I.
Lo anterior se trata de este artículo. Espero que sea útil para la comprensión de todos los cierres de JS.