¿Qué significa un bloque de código entre paréntesis en JavaScript/jQuery?

Question

Duplicar posible:
What does (function($) {})(jQuery); mean?

he visto un montón de código jQuery con el siguiente tipo de sintaxis, pero no entiendo realmente lo que significa. Se muestra en this answer y this answer en una pregunta sobre la organización del código. Ambos hablan sobre el espacio de nombres, así que supongo que eso es lo que logra.

var foo = (function() { 
    var someVar; 

    function someFunc() { 
     return true; 
    } 
})(); 

¿Esto es para el espacio de nombres, y cómo funciona? A veces hay un nombre (el espacio de nombres?) En el conjunto final de paréntesis, a veces no. ¿Cuál es la diferencia entre los dos?

Answer 1

El () que ajusta la función convierte la declaración de función anónima en una expresión de función que luego puede invocarse inmediatamente con el () que sigue a la expresión.

En este caso, el () externo realmente no es necesario ya que el var foo = lo convertiría en una expresión. Además, el valor de foo será undefined ya que la invocación de función no devuelve nada.

Se puede utilizar para crear un nuevo ámbito variable, ya que una función es la única forma de lograrlo en javascript. (Javascript no tiene ámbito de bloque.)

Por lo tanto, la variable someVar no es accesible para el alcance externo. Puede haber momentos en los que sea deseable hacerlo accesible de forma controlada. Para hacer esto, puede pasar una función fuera de ese alcance que hace referencia al someVar. Luego, una vez que finaliza la invocación de la función, su contexto de ejecución permanecerá intacto y someVar estará disponible de la manera que proporcione la función que usted entregó.

Esto se llama crear un closure.

Digamos que ha pasado un valor a la invocación y lo ha asignado al someVar. A continuación, puede return una función fuera de la invocación a la variable foo. Si esa función devuelve referencias someVar, entonces podría usar esa función para obtener su valor.

var foo = (function (str) { 
    var someVar = str; 
/* 
    function someFunc() { 
     return true; 
    } 
*/ 
    return function() { 
     alert(someVar); 
    }; 
})('somevalue'); 

foo(); // alerts 'somevalue' 

Como se puede ver, la función ahora referenciado por foo todavía puede acceder someVar.

Digamos que lo ha cambiado para que la función devuelta a foo pueda aceptar un argumento, lo que actualizará el valor de myVar.

var foo = (function (str) { 
    var someVar = str; 
/* 
    function someFunc() { 
     return true; 
    } 
*/ 
    return function(n) { 
     if(n) { 
      someVar = n; 
     } else { 
      alert(someVar); 
     } 
    }; 
})('somevalue'); 

foo(); // alerts 'somevalue' 

foo('newvalue'); // give it a new value 

foo(); // alerts 'newvalue' 

ahora se puede ver, que la función de foo realmente acceder a esa variable, ya que es capaz de cambiar su valor, y hacer referencia al nuevo valor que se haya establecido previamente.

Answer 2

Los paréntesis envuelven una función anónima, para convertirla en una variable a la que se puede llamar directamente agregando los parámetros posteriores.

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

El bit al final no es un espacio de nombres, solo un parámetro. Es probable que haya visto este utiliza para jQuery como:

(function($) { 
    $('.something').addClass('.other'); 
})(jQuery); 

Lo que esto hace es pasar el objeto jQuery para la función, por lo que la variable $ el objeto jQuery en dentro del ámbito de la función anónima. A la gente le gusta usar la abreviatura $, pero puede provocar conflictos con otras bibliotecas. Esta técnica elimina la posibilidad de un conflicto pasando el objeto totalmente calificado jQuery y sobrescribiendo la variable $ dentro del alcance de esa función, por lo que se puede usar el acceso directo.