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

Question

menudo he ver las expresiones tales como:

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

¿Cómo interpretarlo? sintácticamente, esto solo es una definición de función anónima.

function() { 
... 
} 

¿qué() después de eso? y por qué ponerlo en el adjunto()?

Gracias

Answer 1

exactamente el mismo, excepto que está siendo invocado inmediatamente después de ser convertida en una expresión de función.

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

Igual que si lo hizo:

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

o (similar) esto:

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

deshacerse de los nombres, mover los paréntesis alrededor, y se puede ver que' no es tan diferente.

Answer 2

El área donde más a menudo me resulta útil es en las funciones de devolución de llamada. Esta notación también se puede usar en casos donde necesite incluir una variable en una función de devolución de llamada, pero necesita que el estado de la variable no se vea afectado por lo que sucede fuera de la función.

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. 

En este contexto, setTimeout toma una función que no toma argumentos. Entonces la pregunta de cómo pasar un valor a esa función se responde creando una función que toma un argumento que devuelve una función que toma 0 argumentos.

Sugiero a cualquiera que quiera aprender más sobre el poder de esta notación para jugar con ella en la consola Firebug JavaScript. Una vez que te hayas acostumbrado a este concepto, comenzarás a ver las áreas en las que se puede utilizar este poderoso concepto.