JavaScript más signo delante de la expresión de la función


868

He estado buscando información sobre funciones invocadas de inmediato, y en algún lugar me topé con esta notación:

+function(){console.log("Something.")}()

¿Alguien puede explicarme qué +significa / hace el signo frente a la función?


17
Ben Alman lo explica todo aquí: mths.be/iife
Mathias Bynens

Respuestas:


1321

Obliga al analizador a tratar la parte que sigue al +como una expresión. Esto generalmente se usa para funciones que se invocan de inmediato, por ejemplo:

+function() { console.log("Foo!"); }();

Sin el +allí, si el analizador está en un estado en el que está esperando una declaración (que puede ser una expresión o varias declaraciones de no expresión), la palabra functionparece el comienzo de una declaración de función en lugar de una expresión de función y, por lo tanto, la ()siguiente (los que están al final de la línea anterior) serían un error de sintaxis (como sería la ausencia de un nombre, en ese ejemplo). Con el +, lo convierte en una expresión de función, lo que significa que el nombre es opcional y que da como resultado una referencia a la función, que se puede invocar, por lo que los paréntesis son válidos.

+Es solo una de las opciones. También puede ser -, !, ~o casi cualquier otro operador unitario. Alternativamente, puede usar paréntesis (esto es más común, pero ni más ni menos correcto sintácticamente):

(function() { console.log("Foo!"); })();
// or
(function() { console.log("Foo!"); }());


159
¿No podemos decir que la envoltura paren es una notación superior? Estoy MUY familiarizado con los padres que sirven para abarcar expresiones. No está claro en absoluto qué + está haciendo en este caso si aún no conoce esta peculiaridad arcana de js.
Chris

1
Nota: De las dos opciones de parens, jsLint prefiere la segunda. Creo que jsHint es menos quisquilloso.
Remolacha-Remolacha

43
Una de las bibliotecas de uso común que utiliza la notación "más" es Bootstrap (que es como terminé leyendo este hilo).
Ville

Bootstrap está haciendo esto, por cierto: maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js
xanderiel

95

Subsidiaria a la respuesta de @ TJCrowder, +generalmente se usa para forzar la conversión numérica de un valor como explica esta respuesta SO . En este caso, se llama 'operador unario plus' (para facilitar la búsqueda en Google).

var num = +variant;

Entonces, frente a una función, puede ser una forma de forzar que el resultado de la función se interprete como un número. Dudo que suceda todavía, pero en teoría el JIT podría usar eso para compilar la función como una función numérica, etc. Sin embargo, para evitar que el plus unario sea una concatenación cuando se usa en una expresión más grande, necesitaría paréntesis:

blah + (+(function(){ var scope; return "4"; })());

3
¿Cómo consiguió esto 37 votos a favor? La (+function() { ... })()notación nunca puede ejecutarse sin errores (aparte del hecho de que esto no responde la pregunta).
whitequark

66
@whitequark: se perdió un par de llaves alrededor de la función + llamada. Sospeche que los votos a favor se debieron más a la explicación del número.
Phil H

10
De acuerdo, podría haber sido quisquilloso.
whitequark

2
@ Christoph Me inclinaría a dejar esos corchetes allí. De hecho, iría tan lejos como para agregarlos si faltaran. Deja mucho más claro lo que está sucediendo y también evita problemas cuando el código se minimiza al eliminar los espacios, lo que lleva a 3++function...que no sea lo mismo.
Benjam

3
Aunque en una reflexión posterior, +function...es innecesario en sí mismo. Se puede obtener el mismo resultado con el blah + function( ){ ... }( );que se negaría la necesidad de los corchetes.
Benjam

61

Entonces, la respuesta corta es que evita un error de sintaxis, al usar los resultados de la función de una forma u otra.

También puede indicarle al motor que ni siquiera le interesa el valor de retorno utilizando el voidoperador:

void function() { console.log("Foo!"); }();

Por supuesto, poner llaves alrededor de todo esto también sirve para ese propósito.


45
Vacío o paréntesis son inmensamente preferibles. Son libres de WTF. Usar + es el tipo de inteligencia que no es muy inteligente.
Peter Wone

2
Un buen punto Parece que usar uno de los operadores iría en contra de lo que actualmente es el estándar de la industria. Quizás los desarrolladores "cool kid" optarían por él, de lo contrario todavía no veo el punto de usar algo en lugar de vacío o ()
dudewad
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.