Spiegare la sintassi della funzione anonima incapsulata

Sommario

Puoi spiegare il ragionamento alla base della sintassi per le funzioni anonime incapsulate in JavaScript? Perché funziona: (function(){})();ma questo non funziona function(){}();:?

Quello che so

In JavaScript, si crea una funzione denominata come questa:

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

Puoi anche creare una funzione anonima e assegnarla a una variabile:

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

È possibile incapsulare un blocco di codice creando una funzione anonima, quindi racchiudendolo tra parentesi ed eseguendolo immediatamente:

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

Ciò è utile quando si creano script modularizzati, per evitare di ingombrare l'ambito corrente o globale, con variabili potenzialmente in conflitto, come nel caso degli script Greasemonkey, dei plugin jQuery, ecc.

Ora capisco perché funziona. Le parentesi racchiudono il contenuto ed espongono solo il risultato (sono sicuro che c'è un modo migliore per descriverlo), come con (2 + 2) === 4.

Quello che non capisco

Ma non capisco perché questo non funzioni allo stesso modo:

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

Puoi spiegarmelo?

Non funziona perché viene analizzato come a FunctionDeclaratione l'identificatore del nome delle dichiarazioni di funzione è obbligatorio .

Quando lo circondi tra parentesi, viene valutato come un FunctionExpressione le espressioni di funzione possono essere nominate o meno.

La grammatica di un FunctionDeclarationassomiglia a questo:

function Identifier ( FormalParameterListopt ) { FunctionBody }

E FunctionExpression s:

function Identifieropt ( FormalParameterListopt ) { FunctionBody }

Come puoi vedere l' opzioneIdentifier (Identificatore opt token ) in FunctionExpressionè facoltativo, quindi possiamo avere un'espressione di funzione senza un nome definito:

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

O espressione di funzione denominata :

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

Le parentesi (formalmente denominate Operatore di raggruppamento ) possono racchiudere solo espressioni e viene valutata un'espressione di funzione.

Le due produzioni grammaticali possono essere ambigue e possono apparire esattamente uguali, ad esempio:

function foo () {} // FunctionDeclaration

0,function foo () {} // FunctionExpression

Il parser sa se è a FunctionDeclarationo a FunctionExpression, a seconda del contesto in cui appare.

Nell'esempio sopra, il secondo è un'espressione perché l' operatore Comma può anche gestire solo espressioni.

D'altra parte, FunctionDeclarations potrebbe effettivamente apparire solo nel cosiddetto Programcodice " ", che significa codice all'esterno nell'ambito globale e all'interno FunctionBodydelle altre funzioni.

Le funzioni all'interno dei blocchi dovrebbero essere evitate, perché possono condurre un comportamento imprevedibile, ad esempio:

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

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

Il codice sopra dovrebbe effettivamente produrre un SyntaxError, poiché un Blockpuò contenere solo istruzioni (e la specifica ECMAScript non definisce alcuna istruzione di funzione), ma la maggior parte delle implementazioni sono tolleranti e prenderanno semplicemente la seconda funzione, quella che avvisa'false!' .

Le implementazioni di Mozilla - Rhino, SpiderMonkey - hanno un comportamento diverso. La loro grammatica contiene un'istruzione di funzione non standard , il che significa che la funzione verrà valutata in fase di esecuzione , non al momento dell'analisi, come accade con FunctionDeclarations. In queste implementazioni otterremo la prima funzione definita.

Le funzioni possono essere dichiarate in diversi modi, confrontare quanto segue :

1- Una funzione definita con il costruttore Funzione assegnata alla variabile si moltiplica :

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

2- Una dichiarazione di funzione di una funzione chiamata moltiplica :

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

3- Un'espressione di funzione assegnata alla variabile si moltiplica :

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

4- Un'espressione di funzione nominata nome_funzione , assegnata alla variabile moltiplicare :

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

Anche se questa è una vecchia domanda e risposta, discute un argomento che fino ad oggi lancia molti sviluppatori per un ciclo. Non riesco a contare il numero di candidati sviluppatori JavaScript che ho intervistato che non sono in grado di dirmi la differenza tra una dichiarazione di funzione e un'espressione di funzione e che non hanno idea di cosa sia un'espressione di funzione immediatamente invocata.

Vorrei menzionare, tuttavia, una cosa molto importante che è che lo snippet di codice di Premasagar non funzionerebbe anche se gli avesse assegnato un identificatore di nome.

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

Il motivo per cui non funzionerebbe è che il motore JavaScript lo interpreta come una dichiarazione di funzione seguita da un operatore di raggruppamento completamente non correlato che non contiene espressioni e che gli operatori di raggruppamento devono contenere un'espressione. Secondo JavaScript, lo snippet di codice sopra è equivalente al seguente.

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

();

Un'altra cosa che vorrei sottolineare che potrebbe essere di qualche utilità per alcune persone è che qualsiasi identificatore di nome fornito per un'espressione di funzione è praticamente inutile nel contesto del codice, tranne che all'interno della definizione della funzione stessa.

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

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

Ovviamente, l'uso degli identificatori di nome con le definizioni delle funzioni è sempre utile quando si tratta di debug del codice, ma è qualcos'altro del tutto ... :-)

Grandi risposte sono già state pubblicate. Ma voglio notare che le dichiarazioni di funzione restituiscono un record di completamento vuoto:

14.1.20 - Semantica di runtime: valutazione

FunctionDeclaration : function BindingIdentifier ( FormalParameters ) { FunctionBody }

1. Restituisce NormalCompletion (vuoto).

Questo fatto non è facile da osservare, poiché la maggior parte dei modi per tentare di ottenere il valore restituito convertirà la dichiarazione di funzione in un'espressione di funzione. Tuttavia, lo evalmostra:

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

Chiamare un record di completamento vuoto non ha senso. Ecco perché function f(){}()non può funzionare. In effetti il ​​motore JS non tenta nemmeno di chiamarlo, le parentesi sono considerate parte di un'altra istruzione.

Ma se avvolgi la funzione tra parentesi, diventa un'espressione di funzione:

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

Le espressioni di funzione restituiscono un oggetto funzione. E quindi si può chiamare: (function f(){})().

In javascript, questo si chiama IIFE (Immediately-Invoked Function Expression) .

Per renderlo un'espressione di funzione devi:

1. racchiuderlo usando ()

2. posizionare un operatore vuoto prima di esso

3. assegnarlo a una variabile.

Altrimenti verrà trattata come definizione di funzione e quindi non sarà possibile chiamarla / invocarla contemporaneamente nel modo seguente:

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

Quanto sopra ti darà l'errore. Perché è possibile richiamare solo un'espressione di funzione immediatamente.

Questo può essere ottenuto in due modi: Modo 1:

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

Modo 2:

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

Modo 3:

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

modo 4:

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

Tutto quanto sopra invocherà immediatamente l'espressione della funzione.

Ho solo un'altra piccola osservazione. Il codice funzionerà con una piccola modifica:

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

Uso la sintassi sopra invece della versione più diffusa:

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

perché non sono riuscito a far funzionare correttamente il rientro per i file javascript in vim. Sembra che a Vim non piacciano le parentesi graffe all'interno della parentesi aperta.

Forse la risposta più breve sarebbe quella

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

è una funzione letterale che definisce una funzione (anonima). Un ulteriore () -pair, che viene interpretato come espressione, non è previsto al livello superiore, solo letterali.

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

è in una dichiarazione di espressione che richiama una funzione anonima.

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

Sopra è sintassi valida perché tutto ciò che è passato tra parentesi è considerato come espressione di funzione.

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

Sopra non è una sintassi valida. Poiché il parser di sintassi dello script java cerca il nome della funzione dopo la parola chiave della funzione poiché non trova nulla, genera un errore.

Puoi anche usarlo come:

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

o

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

!- negation op converte la definizione di fn in espressione di fn, pertanto è possibile richiamarla immediatamente con (). Come usare 0,fn defovoid fn def

Possono essere usati con parametri-argomenti come

var x = 3; 
var y = 4;

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

risulterebbe come 7

Quelle parentesi extra creano funzioni anonime extra tra lo spazio dei nomi globale e la funzione anonima che contiene il codice. E nelle funzioni Javascript dichiarate all'interno di altre funzioni è possibile accedere solo allo spazio dei nomi della funzione padre che le contiene. Poiché non viene mantenuto l'oggetto aggiuntivo (funzione anonima) tra l'ambito globale e l'ambito del codice effettivo.