Explicar a sintaxe da função anônima encapsulada

Sumário

Você pode explicar o raciocínio por trás da sintaxe para funções anônimas encapsuladas em JavaScript? Por que isso funciona: (function(){})();mas isso não function(){}();:?

O que eu sei

Em JavaScript, cria-se uma função nomeada como esta:

function twoPlusTwo(){
    alert(2 + 2);
}
twoPlusTwo();

Você também pode criar uma função anônima e atribuí-la a uma variável:

var twoPlusTwo = function(){
    alert(2 + 2);
};
twoPlusTwo();

Você pode encapsular um bloco de código criando uma função anônima, colocando-a entre colchetes e executando-a imediatamente:

(function(){
    alert(2 + 2);
})();

Isso é útil ao criar scripts modularizados, para evitar sobrecarregar o escopo atual ou global, com variáveis ​​potencialmente conflitantes - como no caso de scripts Greasemonkey, plugins jQuery, etc.

Agora entendo por que isso funciona. Os colchetes incluem o conteúdo e expõem apenas o resultado (tenho certeza de que há uma maneira melhor de descrevê-lo), como com (2 + 2) === 4.

O que eu não entendo

Mas não entendo por que isso não funciona igualmente:

function(){
    alert(2 + 2);
}();

Você pode me explicar isso?

Não funciona porque está sendo analisado como ae FunctionDeclarationo identificador de nome das declarações de função é obrigatório .

Quando você o coloca entre parênteses, ele é avaliado como FunctionExpressionae as expressões de função podem ser nomeadas ou não.

A gramática de a FunctionDeclarationé assim:

function Identifier ( FormalParameterListopt ) { FunctionBody }

E FunctionExpressions:

function Identifieropt ( FormalParameterListopt ) { FunctionBody }

Como você pode ver, o token Identifier(Identifier opt ) FunctionExpressioné opcional, portanto, podemos ter uma expressão de função sem um nome definido:

(function () {
    alert(2 + 2);
}());

Ou expressão da função nomeada :

(function foo() {
    alert(2 + 2);
}());

Os parênteses (formalmente chamado de operador de agrupamento ) podem envolver apenas expressões e uma expressão de função é avaliada.

As duas produções gramaticais podem ser ambíguas e podem parecer exatamente iguais, por exemplo:

function foo () {} // FunctionDeclaration

0,function foo () {} // FunctionExpression

O analisador sabe se é um FunctionDeclarationou um FunctionExpression, dependendo do contexto em que aparece.

No exemplo acima, o segundo é uma expressão porque o operador Vírgula também pode manipular apenas expressões.

Por outro lado, FunctionDeclarations poderia aparecer apenas no Programcódigo " ", significando código fora do escopo global e dentro FunctionBodyde outras funções.

As funções dentro dos blocos devem ser evitadas, pois podem levar a um comportamento imprevisível, por exemplo:

if (true) {
  function foo() {
    alert('true');
  }
} else {
  function foo() {
    alert('false!');
  }
}

foo(); // true? false? why?

O código acima deve realmente produzir a SyntaxError, uma vez que a Blockpode conter apenas instruções (e a especificação ECMAScript não define nenhuma instrução de função), mas a maioria das implementações é tolerante e simplesmente aceita a segunda função, a que alerta 'false!'.

As implementações do Mozilla - Rhino, SpiderMonkey, - têm um comportamento diferente. Sua gramática contém uma Declaração de Função não padrão , o que significa que a função será avaliada no tempo de execução , não no tempo de análise, como acontece com FunctionDeclarations. Nessas implementações, obteremos a primeira função definida.

As funções podem ser declaradas de diferentes maneiras; compare o seguinte :

1- Uma função definida com o construtor Function atribuído à variável multiplica :

var multiply = new Function("x", "y", "return x * y;");

2- Uma declaração de função de uma função denominada multiply :

function multiply(x, y) {
    return x * y;
}

3- Uma expressão de função atribuída à variável multiplica :

var multiply = function (x, y) {
    return x * y;
};

4- Uma expressão de função nomeada func_name , atribuída à variável multiply :

var multiply = function func_name(x, y) {
    return x * y;
};

Embora essa seja uma pergunta e resposta antigas, ele discute um tópico que até hoje gera muitos desenvolvedores em um loop. Não posso contar o número de candidatos a desenvolvedor JavaScript que entrevistei que não conseguiam me dizer a diferença entre uma declaração de função e uma expressão de função e que não tinham idéia do que é uma expressão de função imediatamente invocada.

Gostaria de mencionar, no entanto, uma coisa muito importante que é que o trecho de código de Premasagar não funcionaria, mesmo que ele tivesse dado um identificador de nome.

function someName() {
    alert(2 + 2);
}();

A razão pela qual isso não funcionou é que o mecanismo JavaScript interpreta isso como uma declaração de função seguida por um operador de agrupamento completamente não relacionado que não contém expressão, e os operadores de agrupamento devem conter uma expressão. De acordo com o JavaScript, o trecho de código acima é equivalente ao seguinte.

function someName() {
    alert(2 + 2);
}

();

Outra coisa que gostaria de salientar que pode ser útil para algumas pessoas é que qualquer identificador de nome que você forneça para uma expressão de função é praticamente inútil no contexto do código, exceto dentro da própria definição de função.

var a = function b() {
    // do something
};
a(); // works
b(); // doesn't work

var c = function d() {
    window.setTimeout(d, 1000); // works
};

Obviamente, o uso de identificadores de nome com suas definições de função é sempre útil quando se trata de código de depuração, mas isso é algo completamente diferente ... :-)

Ótimas respostas já foram postadas. Mas quero observar que as declarações de função retornam um registro de conclusão vazio:

14.1.20 - Semântica de tempo de execução: avaliação

FunctionDeclaration : function BindingIdentifier ( FormalParameters ) { FunctionBody }

1. Retorno NormalCompletion (vazio).

Esse fato não é fácil de observar, porque a maioria das maneiras de tentar obter o valor retornado converterá a declaração da função em uma expressão de função. No entanto, evalmostra:

var r = eval("function f(){}");
console.log(r); // undefined

Chamar um registro de conclusão vazio não faz sentido. É por isso function f(){}()que não pode funcionar. De fato, o mecanismo JS nem tenta chamá-lo, os parênteses são considerados parte de outra instrução.

Mas se você envolver a função entre parênteses, ela se tornará uma expressão de função:

var r = eval("(function f(){})");
console.log(r); // function f(){}

As expressões de função retornam um objeto de função. E, portanto, você pode chamá-lo: (function f(){})().

Em javascript, isso é chamado de Expressão de Função Imediatamente Invocada (IIFE) .

Para torná-lo uma expressão de função, você deve:

1. coloque-o usando ()

2. coloque um operador vazio antes de

3. atribua-o a uma variável.

Caso contrário, será tratado como definição de função e você não poderá chamá-lo / invocá-lo ao mesmo tempo da seguinte maneira:

 function (arg1) { console.log(arg1) }(); 

O texto acima dará a você erro. Porque você pode invocar apenas uma expressão de função imediatamente.

Isso pode ser alcançado de duas maneiras: Maneira 1:

(function(arg1, arg2){
//some code
})(var1, var2);

Caminho 2:

(function(arg1, arg2){
//some code
}(var1, var2));

Caminho 3:

void function(arg1, arg2){
//some code
}(var1, var2);

caminho 4:

  var ll = function (arg1, arg2) {
      console.log(arg1, arg2);
  }(var1, var2);

Tudo acima invocará imediatamente a expressão da função.

Eu tenho apenas outro pequeno comentário. Seu código funcionará com uma pequena alteração:

var x = function(){
    alert(2 + 2);
}();

Eu uso a sintaxe acima em vez da versão mais amplamente difundida:

var module = (function(){
    alert(2 + 2);
})();

porque não consegui fazer o recuo funcionar corretamente para arquivos javascript no vim. Parece que o vim não gosta das chaves nos parênteses abertos.

Talvez a resposta mais curta seja essa

function() { alert( 2 + 2 ); }

é uma literal de função que define uma função (anônima). Um par () adicional, que é interpretado como uma expressão, não é esperado no nível superior, apenas literais.

(function() { alert( 2 + 2 ); })();

está em um instrução de expressão que chama uma função anônima.

(function(){
     alert(2 + 2);
 })();

Acima é uma sintaxe válida, porque qualquer coisa passada entre parênteses é considerada como expressão de função.

function(){
    alert(2 + 2);
}();

Acima não é uma sintaxe válida. Como o analisador de sintaxe do script java procura o nome da função após a palavra-chave da função, pois não encontra nada, gera um erro.

Você também pode usá-lo como:

! function() { console.log('yeah') }()

ou

!! function() { console.log('yeah') }()

!- negation op converte a definição fn em expressão fn; portanto, você pode invocá-la imediatamente com (). O mesmo que usar 0,fn defouvoid fn def

Eles podem ser usados ​​com parâmetros-argumentos como

var x = 3; 
var y = 4;

(function(a,b){alert(a + b)})(x,y)

resultaria em 7

Esses parênteses extras criam funções anônimas extras entre o espaço para nome global e a função anônima que contém o código. E, em funções Javascript declaradas dentro de outras funções, somente é possível acessar o namespace da função pai que as contém. Como existe um objeto extra (função anônima) entre o escopo global e o escopo do código real, não é mantido.