que - javascript pdf

Función javascript líder bang! sintaxis

Question

He estado viendo esta sintaxis en algunas bibliotecas ahora y me pregunto cuál es el beneficio. (tenga en cuenta que conozco bien los cierres y lo que hace el código, solo me preocupan las diferencias sintácticas)

!function(){
  // do stuff
}();

Como alternativa a los más comunes.

(function(){
  // do stuff
})();

Para auto invocar funciones anónimas.

Me pregunto algunas cosas. En primer lugar, ¿qué es lo que permite que el ejemplo superior funcione realmente? ¿Por qué es necesaria la explosión para hacer esta declaración sintácticamente correcta? También me han dicho que + funciona, y estoy seguro de que algunos otros, en lugar de !

Segundo, ¿cuál es el beneficio? Todo lo que puedo decir es que guarda un solo personaje, pero no puedo imaginar que sea un gran beneficio atraer a numerosos adoptantes. ¿Hay algún otro beneficio que me esté perdiendo?

La única otra diferencia que puedo ver es el valor de retorno de la función de auto invocación, pero en estos dos ejemplos, no nos importa el valor de retorno de la función, ya que se usa solo para crear un cierre. Entonces, ¿alguien puede decirme por qué uno puede usar la primera sintaxis?

Answer 1

Además de las cosas que ya se dijeron, la sintaxis con el! Es útil si escribes javascript sin punto y coma:

var i = 1
!function(){
  console.log(''ham'')
}()

i = 2
(function(){
  console.log(''cheese'')
})()

El primer ejemplo genera ''ham'' como se esperaba, pero el segundo arrojará un error porque la instrucción i = 2 no termina debido a los siguientes paréntesis.

Además, en los archivos javascript concatenados no tiene que preocuparse si el código anterior tiene un punto y coma faltante. Así que no hay necesidad de lo común; (function () {}) (); para asegurarse de que su propia no se rompa.

Sé que mi respuesta es un poco tarde, pero creo que aún no se ha mencionado :)

Answer 2

Así que, con negar "!" y todos los demás operadores unarios como +, -, ~, delete, void, se ha dicho mucho, solo para resumir:

!function(){
  alert("Hi!");
}(); 

O

void function(){
  alert("Hi!");
}();

O

delete function(){
  alert("Hi!");
}();

Y unos cuantos casos más con operadores binarios por diversión :)

1 > function() {
   alert("Hi!"); 
}();

O

1 * function() {
   alert("Hi!"); 
}();

O

1 >>> function() {
   alert("Hi!"); 
}();

O incluso

1 == function() {
   alert("Hi!"); 
}();

Dejando el ternario para alguien más chicos :)

Answer 3

Como puede ver jsperf.com/self-invoking-function , la mejor manera de hacer métodos autoinvocados en javascript es usando:

(function(){}()); -> 76,827,475 ops/sec

!function(){}();  -> 69,699,155 ops/sec

(function(){})(); -> 69,564,370 ops/sec

Answer 4

En Javascript, se espera que una línea que comience con una function sea ​​una declaración de función y se vea como

function doSomething() {
}

Una función auto-invocadora como

function(){
  // do stuff
}();

no se ajusta a esa forma (y causará un error de sintaxis en el primer paren de apertura porque no hay un nombre de función), por lo que los corchetes se utilizan para delinear una expresión de función anónima.

(function(){
  // do stuff
})();

Pero cualquier cosa que cree una expresión (en oposición a una declaración de función) funcionará, así que de aquí a ! . Le está diciendo al intérprete que esto no es una declaración de función. Aparte de eso, la precedencia del operador dicta que la función se invoca antes de la negación.

No estaba al tanto de esta convención, pero si se vuelve común puede contribuir a la legibilidad. Lo que quiero decir es que cualquiera que lea la !function En la parte superior de un gran bloque de código esperará una auto-invocación, de la manera en que estamos condicionados a esperar lo mismo cuando veamos (function . Excepto que perderemos esos paréntesis molestos Espero que esa sea la razón, a diferencia de cualquier ahorro en velocidad o en el número de personajes.

Answer 5

Lo ideal sería poder hacer todo esto simplemente como:

function(){
  // do stuff
}(); 

Eso significa declarar función anónima y ejecutarla. Pero eso no funcionará debido a los aspectos específicos de la gramática JS.

La forma más corta de lograr esto es usar alguna expresión, por ejemplo, UnaryExpression (y por lo tanto CallExpression):

!function(){
  // do stuff
}(); 

O por la diversión:

-function(){
  // do stuff
}(); 

O:

+function(){
  // do stuff
}(); 

O incluso:

~function(){
  // do stuff
  return 0;
}( );

Answer 6

Por un lado, jsPerf muestra que usando ! (UnaryExpression) son generalmente más rápidos. A veces resultan ser iguales, pero cuando no lo son, aún no he visto al triunfador triunfar demasiado sobre los demás: jsperf.com/bang-function

Esto se probó en el último Ubuntu con el Chrome más antiguo (por ejemplo), versión 8. Por lo tanto, los resultados pueden diferir, por supuesto.

Edit: ¿Qué tal algo loco como delete ?

delete function() {
   alert("Hi!"); 
}();

o void ?

void function() {
   alert("Hi!"); 
}();