Dizque



Cajón de sastre, Desarrollo web, JavaScript, Programando

Funciones anónimas y autoejecutables en javascript

Saltar a Anotaciones relacionadas

¿Sabías que en javascript una función puede contener a otras? Pues ahora ya lo sabes. Fíjate en el siguiente código:

function barrioSesamo() {
    function epi() {
        alert('hola Blas');
    }

    function blas() {
        alert('hola Epi');
    }

    epi();
    blas();
}

barrioSesamo();
// el navegador nos presentará un par
// de alertas, a saber, "hola Blas" y
// "hola Epi"

Nada impresionante, por el momento. Lo interesante del asunto es que, al definir la función epi dentro de la función barrioSesamo, el ámbito de la misma (scope) queda limitado, de manera que solo podemos llamar a epi desde su propio barrio.

Vale, sigo sin impresionarte. ¿Qué ganamos al definir funciones de esta manera? Al limitar el ámbito de la función, evitamos colisiones con (posibles) funciones del mismo nombre (posiblemente) definidas en otro(s) script(s).

Veamos ahora eso de las funciones anónimas:

function() {
    alert('soy la función sin nombre');
}

Queda claro: una función anónima es… efectivamente, una función que no tiene nombre. Y si no tiene nombre, ¿cómo demonios hacemos una llamada a la misma? Truco: haciendo que se ejecute por su cuenta.

(
function() {
    alert('me ejecuto yo solita');
}
)();

Fíjate bien en la sintaxis: la función va definida entre un par de paréntesis, a continuación de los cuales viene otro par, que utilizamos para ejecutar la llamada.

¿Aún impasible? Eres duro, tío. Quizá la traca final consiga impresionarte:

(
function() {
    function hazCosasMaravillosasConElDOM() {
        // lo que fuere
    }

    //addEvent() by John Resig
    function addEvent( obj, type, fn ){ 
        if (obj.addEventListener){ 
            obj.addEventListener( type, fn, false );
        }
        else if (obj.attachEvent){ 
            obj["e"+type+fn] = fn; 
            obj[type+fn] = function(){ obj["e"+type+fn]( window.event ); } 
            obj.attachEvent( "on"+type, obj[type+fn] ); 
        } 
    } 

    // la función comienza a ejecutarse
    // en la próxima línea
    addEvent(window, 'load', hazCosasMaravillosasConElDOM);
}
)();

¿Lo pillas? Ahora tenemos un script completamente encapsulado, que se ejecuta él solito y que jamás de los jamases colisionará con otros scripts con los que le toque convivir.

El colmo de la no intrusividad.




3 comentarios RSS

Yo estoy impresionado, debo ser blandito :-D

Muy buena explicación.

Sí, blandito y suave XD

Espero que te sea de utilidad en algún momento.

Realmente brutal.

A partir de ahora deberia ser de manual usar los javascripts de esta manera.

Felicidades!


Di la tuya

Puedes usar markdown y estas etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> . Por favor, evita el abuso de las mayúsculas y cuida la ortografía.