Aquí hay un fragmento de código que incrementa el número en uno al hacer clic en el botón:

<script type="text/javascript">
    var incrementClickCount = (function () {
        var clickCount = 0;
        return function () {
            return ++clickCount;
        }
    })();
</script>
<input type="button" value="click me" onclick="alert(incrementClickCount());" />

Lo que no sé es que creo que deberíamos obtener el valor "1" cada vez que hacemos clic en el botón, por lo que las secuencias serán

Paso 1: llamada a función externa auto invocada por sí mismo, la definición de función anónima interna se almacena en la variable de incremento incrementClickCount.

Paso 2: Cuando haga clic en el botón, llame a la función anónima interna para cambiar el valor de clickCount de 0 a 1, de modo que obtengamos 1 como entrada, lo suficientemente justo.

Paso 3: Aquí está la parte difícil que no entiendo aquí, cuando hacemos clic nuevamente en el botón. en realidad llamamos a una nueva función anónima interna, por lo que la entrada debería ser 1 nuevamente, ¿por qué es 2 ahora? Al igual que esta función normal de Java o C #:

public int getNumber()
{
   int clickCount = 0;
   return addNumber(clickCount);
}

public int addNumber(int number)

{
   return number++;
}

No importa cuántas veces llame a la función getNumber(), siempre obtengo 1 en lugar de 1,2,3,4,5 ...

0
slowjamsz11 10 ene. 2017 a las 10:40

4 respuestas

La mejor respuesta

cuando volvemos a hacer clic en el botón. en realidad llamamos una nueva función anónima interna

No.

La función anónima se devuelve desde el IIFE cuando se analiza el IIFE. Es por eso que se denominan expresiones de función invocadas inmediatamente . () en la línea })(); lo invoca (no incrementClickCount() que invoca la función devuelta).

Cada vez que hace clic en el botón (incluida la primera vez), llama a la función misma que se devolvió (y se asignó a incrementClickCount) en ese momento.

El IIFE nunca se vuelve a llamar, por lo que la línea var clickCount = 0; nunca se vuelve a ejecutar.

3
Quentin 10 ene. 2017 a las 07:44

En la primera llamada a la función incrementClickCount, el IIFE devuelve la función interna que opera la variable clickCount y la incrementa.
Todas las llamadas adicionales serán ON esa función interna. Entonces, la variable clickCount se asigna var clickCount = 0; solo una vez.
Considere el siguiente resultado:

console.log(incrementClickCount);
// outputs the inner function definition    
return function () {
    return ++clickCount;
}

console.log(incrementClickCount());  // 1
console.log(incrementClickCount());  // 2
console.log(incrementClickCount());  // 3

Aquí hay un buen ejemplo:
https://developer.mozilla.org/en-US/ docs / Web / JavaScript / Closures # Emulating_private_methods_with_closures

1
RomanPerekhrest 10 ene. 2017 a las 08:01

Cada vez que hace clic en el botón está llamando a la función "incrementClickCount ()".

Pero cuando el código se ejecuta por primera vez, la variable 'incrementClickCount' obtiene el valor de la función devuelta de la función de invocación automática.

Así que simplemente la variable 'incrementClickCount' mantiene la función interna dentro de ella, como se muestra a continuación.

incrementClickCount = function () {
            return ++clickCount;
        }

Y el valor clickCount está disponible para este método debido al cierre. así que lo incrementa cada vez, en lugar de restablecer el valor.

Ya que la función de auto invocación no se llama cada vez, debido a que 'clickCount' no se restablece a 0

1
MGA 10 ene. 2017 a las 07:51

Debe crear la variable clickCount fuera de la función y luego habilitar la función onClick para modificar su valor. Salud.

-1
mnemosdev 10 ene. 2017 a las 07:45