javascript function vs. (function() {...}());

Question

Ho spesso vedere espressioni come:

(function() { 
    var x = 1; 
    ... 
}()); 

Come posso interpretarlo? sintatticamente, questa è solo una definizione di funzione anonima.

function() { 
... 
} 

quale() dopo? e perché metterlo in allegato()?

Grazie

Answer 1

Esattamente la stessa, eccetto che viene richiamato immediatamente dopo essere stati convertiti in un'espressione funzione.

// v-----first set of parentheses makes the function an expression 
    (function() { 
     var x = 1; 
     ... 
    }()); 
// ^-----this set is used to invoke the function 

stesso come se avete fatto:

var myfunc = function() { 
     var x = 1; 
     ... 
    }; 
    myfunc(); 

o (simile) questo:

var returnValue = function() { 
     var x = 1; 
     ... 
    }(); 

Sbarazzarsi dei nomi, spostare le parentesi intorno, e si può vedere che' non è diverso

Answer 2

L'area in cui più spesso lo trovo utile è nelle funzioni di callback. Questa notazione può essere utilizzata anche nei casi in cui è necessario includere una variabile in una funzione di callback, ma è necessario che lo stato della variabile non sia influenzato da ciò che accade al di fuori della funzione.

var someVal = 1; 

setTimeout((function(one) { 
     return function() { 
      alert(one); // alerts a 1 even 10 seconds after someVal++; 
     } 
})(someVal), 10000); 

someVal++; // the value in the setTimeout will remain the same as it is locked inside. 

In questo contesto, setTimeout accetta una funzione che non accetta argomenti. Quindi la domanda su come passare un valore a quella funzione viene risolta creando una funzione che accetta un argomento che restituisce una funzione che accetta 0 argomenti.

Suggerisco a chiunque voglia saperne di più sulla potenza di questa notazione per giocare con essa nella console JavaScript di Firebug. Una volta avvolto il concetto attorno a questo concetto, inizierai a vedere le aree in cui è possibile utilizzare questo potente concetto.