Estoy usando el patrón modular en JavaScript. Tengo tres IIFE en total:

• El primero devuelve un objeto con una gran cantidad de métodos.
• El segundo hace lo mismo.
• El tercero llama a los métodos devueltos, controlando así la lógica de la aplicación.

Todos los métodos llamados dentro del tercer IIFE están vinculados a un detector de eventos cuando hace clic en cualquier parte del documento. Si el tercer IIFE se ejecuta pero no regresa, no se crea ningún cierre, lo que significa que el tercer IIFE se saca de la pila y se lleva consigo el objeto variable creado durante la fase de creación del contexto de ejecución.

El detector de eventos se guarda en la memoria que llama a todos los métodos de retorno del primer y segundo IIFE, ya que son métodos globales. Sin embargo, también vinculado al detector de eventos, hay una función privada que quiero ejecutar dentro del tercer IIFE. Si no se crea un cierre en el tercer IIFE, ¿cómo es que cuando ocurre el evento de clic en el documento, el detector de eventos reconoce la función privada en el tercer IIFE si el objeto variable sale de la pila con el tercer IIFE y ya no es como no? se creó el cierre?

El controlador IIFE no ha regresado, por lo que no se crea ningún cierre y, por lo tanto, el detector de eventos llama a una función que no está disponible actualmente ya que el tercer IIFE ha salido de la pila, ¿un detector de eventos lleva consigo un alcance de cuando se creó? Entiendo cómo se llaman los métodos de devolución, ya que todavía son globales, pero estoy confundido sobre cómo un detector de eventos llama a la función privada después de que finaliza el tercer IIFE.

Vea el código a continuación. El primer y segundo IIFE están ausentes y devuelven todos los métodos que he llamado en el detector de eventos. En lugar de aburrirlos a todos con mi código largo en el proyecto en el que estoy trabajando, lo he simplificado a continuación.

 var scoreController = (function() { var score = 0; return { updateScore: function() { score++ return score; } } })(); var UIcontroller = (function() { return { updateUI: function(value) { document.querySelector("#displayScore").textContent = value; } } })(); var controller = (function() { function setupEventListener() { document.addEventListener("click", updateGame); } setupEventListener(); function privateFunction() { console.log("how does this work if") } function updateGame() { var globalScore = scoreController.updateScore(); UIcontroller.updateUI(globalScore); privateFunction(); } })();