Esta duda se puede tratar de diversas formas, pero te dejamos la que para nosotros es la respuesta más completa.
Solución:
Se trata de determinar el alcance de las variables. Las variables declaradas en la función autoejecutable están, por defecto, solo disponibles para codificar dentro de la función autoejecutable. Esto permite escribir código sin preocuparse por cómo se nombran las variables en otros bloques de código JavaScript.
Por ejemplo, como se menciona en un comentario de Alexander:
(function()
var foo = 3;
console.log(foo);
)();
console.log(foo);Esto primero registrará 3 y luego arrojar un error en el siguiente console.log porque foo no está definido.
Simplista. De apariencia muy normal, es casi reconfortante:
var userName = "Sean";
console.log(name());
function name()
return userName;
Sin embargo, ¿qué pasa si incluyo una biblioteca de JavaScript realmente útil en mi página que traduce caracteres avanzados en sus representaciones de nivel básico?
¿Esperar lo?
Quiero decir, si alguien escribe un carácter con algún tipo de acento en él, pero yo solo quiero caracteres “ingleses” de la A a la Z en mi programa. Bueno … los caracteres ‘ñ’ en español y ‘é’ en francés se pueden traducir a los caracteres básicos de ‘n’ y ‘e’.
Entonces, una buena persona ha escrito un convertidor de caracteres completo que puedo incluir en mi sitio … Lo incluyo.
Un problema: tiene una función llamada ‘nombre’ igual que mi función.
Esto es lo que se llama colisión. Tenemos dos funciones declaradas en el mismo alcance con el mismo nombre. Queremos evitar esto.
Así que tenemos que definir el alcance de nuestro código de alguna manera.
La única forma de establecer el alcance del código en javascript es envolverlo en una función:
function main()
// We are now in our own sound-proofed room and the
// character-converter libarary's name() function can exist at the
// same time as ours.
var userName = "Sean";
console.log(name());
function name()
return userName;
Eso podría resolver nuestro problema. Ahora todo está cerrado y solo se puede acceder desde dentro de nuestras llaves de apertura y cierre.
Tenemos una función en una función … que es extraño de ver, pero totalmente legal.
Solo un problema. Nuestro código no funciona. ¡Nuestra variable userName nunca se repite en la consola!
Podemos resolver este problema agregando una llamada a nuestra función después de nuestro bloque de código existente …
function main()
// We are now in our own sound-proofed room and the
// character-converter libarary's name() function can exist at the
// same time as ours.
var userName = "Sean";
console.log(name());
function name()
return userName;
main();
¡O antes!
main();
function main()
// We are now in our own sound-proofed room and the
// character-converter libarary's name() function can exist at the
// same time as ours.
var userName = "Sean";
console.log(name());
function name()
return userName;
Una preocupación secundaria: ¿Cuáles son las posibilidades de que el nombre “principal” no se haya utilizado todavía? … tan muy, muy delgado.
Necesitamos MÁS definición del alcance. Y alguna forma de ejecutar automáticamente nuestra función main ().
Ahora llegamos a las funciones de ejecución automática (o autoejecutables, autoejecutables, lo que sea).
(())();
La sintaxis es torpe como el pecado. Sin embargo, funciona.
Cuando envuelve la definición de una función entre paréntesis e incluye una lista de parámetros (¡otro conjunto o paréntesis!), Actúa como una función. llamar.
Así que veamos nuestro código nuevamente, con alguna sintaxis autoejecutable:
(function main()
var userName = "Sean";
console.log(name());
function name()
return userName;
)();
Entonces, en la mayoría de los tutoriales que lea, ahora será bombardeado con el término ‘autoejecutable anónimo’ o algo similar.
Después de muchos años de desarrollo profesional, fuertemente te insto a nombrar cada función que escribes con fines de depuración.
Cuando algo sale mal (y lo hará), estará comprobando el rastreo en su navegador. Está siempre ¡Es más fácil limitar los problemas de código cuando las entradas en el seguimiento de la pila tienen nombres!
¡Muy prolijo y espero que ayude!
La autoinvocación (también conocida como autoinvocación) es cuando una función se ejecuta inmediatamente después de su definición. Este es un patrón central y sirve como base para muchos otros patrones de desarrollo de JavaScript.
Soy un gran fan 🙂 porque:
- Mantiene el código al mínimo
- Refuerza la separación del comportamiento de la presentación.
- Proporciona un cierre que evita conflictos de nombres.
Enormemente – (¿Por qué deberías decir que es bueno?)
- Se trata de definir y ejecutar una función a la vez.
- Podría hacer que esa función autoejecutable devuelva un valor y pase la función como un parámetro a otra función.
- Es bueno para encapsular.
- También es bueno para el alcance de bloques.
- Sí, puede incluir todos sus archivos .js en una función autoejecutable y puede evitar la contaminación global del espacio de nombres. 😉
Más aquí.
Comentarios y puntuaciones del tutorial
Si te apasiona la programación, eres capaz de dejar un post acerca de qué le añadirías a esta reseña.