with - função de javascript levando estrondo! sintaxe

w3schools titles (4)

Eu tenho visto esta sintaxe em algumas bibliotecas agora e estou me perguntando qual é o benefício. (note que estou bem ciente dos encerramentos e do que o código está fazendo, estou preocupado apenas com as diferenças sintáticas)

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

Como alternativa ao mais comum

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

para auto invocar funções anônimas.

Estou me perguntando algumas coisas. Em primeiro lugar, o que está permitindo que o exemplo principal funcione de verdade? Por que o estrondo é necessário para tornar esta afirmação sintaticamente correta? Também me disseram que o + funciona, e tenho certeza que alguns outros, no lugar de !

Em segundo lugar, qual é o benefício? Tudo o que posso dizer é que ele salva um único caractere, mas não consigo imaginar que esse benefício seja tão grande para atrair muitos usuários. Existe algum outro benefício que eu estou perdendo?

A única outra diferença que eu posso ver seria o valor de retorno da função auto-chamada, mas em ambos os exemplos, nós realmente não nos importamos com o valor de retorno da função, uma vez que ela é usada apenas para criar um fechamento. Então alguém pode me dizer por que alguém pode usar a primeira sintaxe?

Além das coisas que já foram ditas, a sintaxe com o! é útil se você escrever javascript sem ponto e vírgula:

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

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

O primeiro exemplo gera "ham" como esperado, mas o segundo lançará um erro porque a instrução i = 2 não é terminada devido aos parênteses a seguir.

Também em arquivos javascript concatenados, você não precisa se preocupar se o código anterior não tiver ponto e vírgula. Portanto, não há necessidade do comum (function () {}) (); Para ter certeza que você não vai quebrar.

Eu sei que a minha resposta é meio tarde, mas eu acho que não foi mencionado ainda :)

Como você pode ver jsperf.com/self-invoking-function , a melhor maneira de fazer os métodos auto-invocados em javascript é usando:

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

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

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

Então, com negar "!" e todos os outros operadores unários como +, -, ~, delete, void, muito foi dito, apenas para resumir:

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

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

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

E mais alguns casos com operadores binários para diversão :)

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

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

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

Ou mesmo

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

Deixando o ternário para outra pessoa pessoal :)

Idealmente você deveria ser capaz de fazer tudo isso simplesmente como:

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

Isso significa declarar função anônima e executá-la. Mas isso não funcionará devido a especificidades da gramática JS.

Portanto, a forma mais curta de conseguir isso é usar alguma expressão, por exemplo, UnaryExpression (e, portanto, CallExpression):

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

Ou para a diversão:

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

Ou:

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

Ou até mesmo:

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