por qué el counter variable se establece en 0 cuando se produce el primer clic.

Ese no es el momento en que se establece en 0. Esto sucede cuando ocurre la asignación a .onclick . En ese momento se define y ejecuta outer . Ese es el momento en que el counter se establece en 0. Aún no se maneja ningún clic.

solo se ejecuta la función inner()

Por cierto. El outer solo se ejecuta una vez, cuando el script principal se ejecuta en la carga de la página, y nunca más. inner es la función que se asigna a onclick y, por lo tanto, tiene la función de controlador de eventos. inner tiene acceso al counter que está definido en outer , pero outer nunca se vuelve a ejecutar.

outer es una llamada función de ejecución inmediata.

Como comparación: podrías lograr algo similar con este código:

 var counter = 0; element.onclick = function inner() { counter++; alert('Number of clicks: ' + counter); };

...pero la desventaja ahora es que counter es una variable global, que podría ser alterada por algún otro código. Para asegurarse de que el counter solo esté disponible para el controlador de clics, se crea un cierre para él, que también podría hacer así:

 function outer() { var counter = 0; element.onclick = function inner() { counter++; alert('Number of clicks: ' + counter); }; } outer();

La desventaja aquí es que outer tiene un llamado efecto secundario : se asigna a element.onclick . Esta es la razón para optar por volver al inner y dejar que la persona que llama al outer haga algo con él, por ejemplo, asignarlo a .onclick .

Entonces obtenemos algo como esto:

 function outer() { var counter = 0; return function inner() { counter++; alert('Number of clicks: ' + counter); }; } element.onclick = outer();

Esto es esencialmente lo mismo que su código: la función se define primero y luego se ejecuta inmediatamente. La función que se asigna a onclick es la que devuelve outer , es decir, el inner .

Otra forma más de lograr esta encapsulación de counter :

 function inner() { this.counter++; alert('Number of clicks: ' + this.counter); } element.onclick = inner.bind({ counter: 0 });

Aquí proporcionamos un objeto sin nombre que siempre se pasa como this -argumento a inner cada vez que se llama. Como no retenemos una referencia a ese objeto fuera de esta construcción, logramos el mismo principio: el estado del contador se mantiene, pero no se puede acceder a él fuera del controlador.