2012-02-01 25 views
44

estaba leyendo las fuentes de JS Twitter — en mi camino para mejorar mis conocimientos JS, cuando me encontré con la extraña manera de llamar a la función anónima:Javascript llamada a la función anónima

!function($) { 
    ... 
}(window.jQuery); 

... y esto funciona ! :)

Es obvio para todos, que esta:

function ($) { ... } (window.jQuery) 

no funciona (error de sintaxis), mientras que ésta es correcta:

(function ($) { .... })(window.jQuery) 

Puede alguien por favor explicar esta magia (¿por qué caso con !function funciona)?

+1

Consulte http://benalman.com/news/2010/11/immediately-invoked-function-expression/ para conocer otros patrones IIFE válidos. –

+1

@AtesGoral, gracias, este artículo es muy útil. –

Respuesta

61

Cuando la palabra clave function se encuentra en una posición de enunciado (como el primer token en una instrucción), la declaración de función se expresa como una declaración de función . Las instrucciones de función se elevan al principio del alcance, no se pueden invocar inmediatamente y deben tener un nombre.

Cuando la palabra clave se reunió en una posición de expresión (es decir, no como el primer testigo en un comunicado, en su ejemplo ! es el primer token), la declaración de la función se expresa como una expresión función, que puede ser anónima y devuelve el valor de la función recién creada. Dado que devuelve el valor de la función recién creada, puede invocarlo inmediatamente añadiendo paréntesis después.

Envolver la declaración entre paréntesis hace lo mismo, pero es más común que prefijándolo con un ! o +:

(function() { 
    ... 
}()); 
+3

Probablemente usaron! en lugar de envolverlo en() porque usa un 50% menos de caracteres. :) Menos pasando por el cable = tiempos de carga más rápidos. – jinglesthula

0

En cuanto al signo de exclamación, eso no es mágico. Convierte el resultado en verdadero/falso.

Tu problema puede tener el mismo error que tu función anónima.

+4

Solo intenta evaluar 'function (a) {alert (a); } (5); '- obtendrá error. Luego reemplace 'function' con'! Function' y vuelva a intentarlo. También note que '(función (a) {...}) (5)' y '(función (a) {...} (5))' funcionan con éxito. –

6

La segunda forma function() {} es una declaración . El operador ! convierte esto en una expresión . También encontrará casos en los que las personas usan - o + antes de la palabra clave function.

Cuando tiene una expresión que evalúa una función, puede llamar a esa función utilizando el operador ().

Otro (quizás más fácil de entender) manera de lograr el mismo efecto ahorra es con otro conjunto de paréntesis:

(function(x) { body; })(arg); 

Al colocar la función dentro del paréntesis, de nuevo convertirlo en una expresión, que evalúa a una función. Esta función se llama con arg como argumento.

0

esto suena como un error de sintaxis javascript:

una función llamada podría ser una declaración sin embargo, una función anónima simplemente lo considera como una expresión.

Pro: que puede hacer function() { ... }()

contra: no se puede hacer function() { ... }

Pero por qué la gente quiere definir una función anónima sin invocar ella? Entonces la estafa no es realmente una preocupación.

Cuestiones relacionadas