guide - javascript pdf

Declarando funciones en JavaScript

Question

Posible duplicado:
Javascript: var functionName = function () {} vs function functionName () {}

¿Cuál es la diferencia entre estas dos formas de declarar una función?

function someFunc() { ... }

var someFunc = function() { ... }

No estoy preguntando en el sentido técnico. No estoy preguntando qué es mejor para la legibilidad, o qué estilo es el preferido.

Answer 1

Cuando escribes

function Test() {
}

JavaScript realmente está creando una propiedad a la que asigna el objeto de función que una vez llamado ejecutará el código informado en la definición de la función. La propiedad se adjunta a la window del objeto, o al objeto que contiene la definición de la función.

Answer 2

En cuanto al estilo, el segundo ejemplo es más consistente con otras formas comunes de declarar funciones y, por lo tanto, podría argumentarse que es más legible.

this.someFunc = function() { ... }
...
someFunc: function() { ... },

Sin embargo, como también se mencionó, es anónimo y, por lo tanto, el nombre no aparece cuando se hace un perfil. Otra forma de declarar la función es la siguiente que te ofrece lo mejor de ambos mundos

var someFunc = function someFunc() { ... }

Answer 3

En realidad, la diferencia es que la segunda declaración nos da la capacidad de declarar funciones como esta que permiten tener una función como propiedad de un objeto:

var myObject=new Object();
myObject.someFunc=function() { ... }; 

Answer 4

Es cierto que la primera forma:

function test() { }

es una sintaxis más reconocida y que la segunda forma:

var test = function() { ... }

le permite controlar el alcance de la función (mediante el uso de var; sin ella, sería global de todos modos).

E incluso puedes hacer ambas cosas:

var test = function test() { ... test(); ... }

Esto le permite definir una función recursiva en la segunda forma.

Answer 5

Estoy en una opinión diferente con la mayoría de la gente aquí. Técnicamente, esta sintaxis puede significar lo mismo para declarar funciones en ambos sentidos ( me quedo mal en mi última afirmación. Leí en una publicación diferida por qué son técnicamente diff y añadiré al final, por qué ); pero la forma en que juegan un papel en la evolución de los patrones es masiva. Recomiendo encarecidamente "Javascript: The Good Parts" de Doughlas Crockford.

Pero para probar mi punto de una manera sutil y simple; aquí hay un pequeño ejemplo.

//Global function existing to serve everyone
function swearOutLoud(swearWord) {
    alert("You "+ swearWord);           
}
//global functions'' territory ends here

//here is mr. spongebob. He is very passionate about his objects; but he''s a bit rude.
var spongeBob = {
    name : "squarePants",
    swear : function(swearWord) {
                name = "spongy";
                alert("You "+ swearWord);
                return this;
            }
}

//finally spongebob learns good manners too. EVOLUTION!
spongeBob.apologize = function() {
    alert("Hey " + this.name + ", I''m sorry man!");
    return this;
}


//Ask spongebob to swear and then apologize in one go (CASCADING EFFECT!!)
alert(spongeBob.swear("twit").apologize());

si miras el código de arriba, declare una función con un nombre swearOutLoud. Que tomaría una maldición de cualquier objeto o una llamada y le dará la salida. Puede hacer operaciones en cualquier objeto usando el parámetro "this" que se le pasa y los argumentos.

Sin embargo, la segunda declaración se declara como un atributo del objeto llamado "spongeBob". Esto es importante tener en cuenta; como aquí me estoy moviendo hacia un comportamiento orientado a objetos. Mientras también mantengo el "efecto de cascada", devuelvo "esto" si no tengo nada más que devolver.

Algo similar se hace en jquery; y este patrón en cascada es importante si estás tratando de escribir un marco o algo así. Lo vinculará al patrón de diseño de Builder también.

Pero con funciones declaradas como atributos de un objeto, puedo lograr un comportamiento centrado en el objeto que conduce a un mejor paradigma de programación. A menos que esté bien diseñado; las funciones individuales declaradas fuera con acceso global conducen a una forma de codificación no orientada a objetos. De alguna manera prefiero lo último.

Para ver la cascada en efecto, mira la última declaración en la que puedes pedirle a Bob Esponja que jure y se disculpe de inmediato; aunque se haya agregado una disculpa como atributo más adelante.

Espero aclarar mi punto. La diferencia desde una perspectiva técnica puede ser pequeña; pero desde el punto de vista del diseño y la evolución del código, es enorme y hace una gran diferencia.

¡Pero solo soy yo! Tómelo o déjelo. :)

EDITAR:

Entonces ambas llamadas son técnicamente diferentes; porque una declaración con nombre está vinculada al espacio de nombres global y se define en el tiempo de análisis. Entonces se puede llamar incluso antes de declarar la función.

 //success
 swearOutLoud("Damn");

function swearOutLoud(swearWord) {
    alert("You " + swearWord)
}

El código anterior funcionará correctamente. Pero el código a continuación no.

swear("Damn!");
    var swear = function(swearWord) {
    console.log(swearWord);
}

Answer 6

Otra diferencia es que, en la mayoría de los navegadores, este último le permite definir diferentes implementaciones según las circunstancias, mientras que el primero no. Supongamos que quiere una suscripción a eventos entre navegadores. Si trataste de definir una función addEventListenerTo así:

if (document.addEventListener) {
    function addEventListenerTo(target, event, listener) {
        ....
    }
} else if (document.attachEvent) {
    function addEventListenerTo(target, event, listener) {
        ....
    }
} else {
    function addEventListenerTo(target, event, listener) {
        ....
    }
}

en algunos navegadores, todas las funciones terminan siendo analizadas, y la última tiene prioridad. Resultado: lo anterior simplemente no funciona. Sin embargo, la asignación de funciones anónimas a variables funcionará. También puede aplicar técnicas de programación orientadas a aspectos funcionales y básicas utilizando funciones anónimas asignadas a variables.

var fib = memoize(function (n) { 
    if (n < 0) return 0;
    if (n < 2) return 1;
    return fib(n-1) + fib(n-2); 
});

...
// patch the $ library function
if (...) {
    $ = around($, fixArg, fixResult);
}

Answer 7

Para la legibilidad, diría que el primero es claramente mejor. Un programador de mantenimiento futuro, incluso asumiendo que están lo suficientemente familiarizados con javascript para conocer muchos de los puntos más finos que surgen en este hilo, van a asumir el primer formato.

Por ejemplo, si algún día quisieran ctrl-f para buscar la definición de su función para ver qué está sucediendo allí, ¿van a buscar primero someFunc = function() o function someFunc() ?

Además, para ser francamente tipográfico al respecto (ya que hablamos de reabilidad) los lectores a menudo escanean el texto rápidamente, y estarían más inclinados a omitir una línea que comienza con "var" si están buscando una definición de función.

Sé que esta es una respuesta no técnica, pero es más difícil para los humanos leer códigos que las computadoras.

Answer 8

Una ventaja del uso de la function someFunc() { ... } es que el nombre de la función aparece en el depurador Firebug. Las funciones que se declaran de otra manera ( var someFunc = function() { ... } ) aparecen como anónimas .