2012-03-12 22 views
15

He visto a otros usar el siguiente patrón.¿Por qué la declaración de función de JavaScript (y expresión)?

var bar = function foo(){}; 
console.log(bar); // foo() 
console.log(foo); // ReferenceError: foo is not defined 

¿Pero por qué? Puedo ver el punto si ambos fueron declarados, pero no lo son. ¿Por qué es la razón?

+3

Lo que tienes ahí es una función anónima que tiene un nombre. La única razón por la que sé hacer eso es cuando estás depurando en la función foo() el seguimiento de la pila mostrará el nombre en lugar de simplemente 'función anónima'. –

Respuesta

7

como han mencionado otros, usando el primer formulario en su ejemplo (a llamado expresión de función) puede ayudar con la depuración, a pesar de las recientes mejoras en la incorporada en las herramientas de desarrollo en los navegadores, este argumento es cada vez menos convincente. La otra razón para usar una expresión de función nombrada es que puede usar el nombre de la función como una variable dentro del cuerpo de la función en lugar de la ahora obsoleta en ES5 arguments.callee.

Sin embargo, las expresiones de función con nombre son implementado de forma incorrecta y problemáticamente en Internet Explorer 9 < y generalmente se debe evitar cuando se está apuntando a los navegadores. Ver Juriy Zaytsev's excellent article on the subject para más información.

+0

+1 por mencionar la visibilidad del nombre de la función en el alcance interno. – fcalderan

+0

+1, como se ve en la documentación oficial de Mozilla '" El nombre de la función solo se puede usar dentro del cuerpo de la función ". Https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions# Diferencias –

7

Al depurar una aplicación, es más fácil saber qué está llamando qué en la pila de llamadas cuando se usan funciones anónimas "nombradas". Por lo tanto, es una manera de dar un nombre a una función anónima con fines de depuración.

Prueba esto y mirar la pila de llamadas en un depurador:

myDiv = document.getElementById("myDiv"); 

myDiv.onclick = function OnClick(){ 
    debugger; 
    //do something 
} 
+1

Hice un violín que prueba su punto: http://jsfiddle.net/fqeDG/. Gracias! – 98374598347934875

+4

Tenga cuidado con el uso de expresiones de funciones nombradas en IE <9: la implementación en esos navegadores está rota. http://kangax.github.com/nfe/ –

+0

Para elaborar, la asignación de una función al atributo onclick se rompe en versiones anteriores de, es decir, no la función de sintaxis OnClick() {}. – Zoidberg

2

Ellos han puesto el nombre de una función anónima, ya que hace más fácil la depuración. Al depurar, verá una llamada a "foo" en la pila de llamadas en lugar de un montón de llamadas a "anónimo".

2

La única razón que me puedo imaginar para esto es darle a la función un nombre deseado. Esto ayuda a la depuración ya que el inspector usa el atributo name del objeto de función. Prueba esto:

var bar = function foo(){}; 
console.log(bar.name); // foo 

Si pones algo de código real dentro de foo y añadir un punto de interrupción en el depurador de JavaScript en su navegador, verá la función como foo en la pila de llamadas.

0

La definición de la función (o literal) tiene 4 partes. 1. La palabra reservada function 2. Un nombre opcional que puede ser utilizado por los depuradores o por la función para llamarse recursivamente. 3. Los parámetros y 4. El cuerpo de la función envuelto por { }

Fuera de la función foo foo no existe. Pero como asignó la función a la barra de variables, puede llamarla utilizando la barra de invocación de métodos y, como la barra está definida, puede imprimirla.

Si está interesado en JavaScript que realmente debería considerar la obtención de Douglas Crockford's book Javascript: The Good Parts

Cuestiones relacionadas