Pregunta ¿Cuál es la construcción (función () {}) () en JavaScript?


Solía ​​saber lo que esto significaba, pero estoy luchando ahora ...

Esto es básicamente decir document.onload?

(function () {

})();

593
2017-11-22 14:19


origen


Respuestas:


Se trata de un Expresión de función invocada inmediatamente, o IIFE para abreviar. Se ejecuta inmediatamente después de su creación.

No tiene nada que ver con ningún manejador de eventos para ningún evento (como document.onload)
Considere la parte dentro del primer par de paréntesis: (función(){})();.... es una declaración de función regular. Luego mira el último par (function(){})();, esto normalmente se agrega a una expresión para llamar a una función; en este caso, nuestra expresión previa.

Este patrón se usa a menudo cuando se trata de evitar contaminar el espacio de nombres global, porque todas las variables utilizadas dentro del IIFE (como en cualquier otro normal función) no son visibles fuera de su alcance.
Es por eso que, tal vez, confundiste esta construcción con un controlador de eventos para window.onload, porque a menudo se usa así:

(function(){
    // all your code here
    var foo = function() {};
    window.onload = foo;
    // ...
})();
// foo is unreachable here (it’s undefined)

Corrección sugerida por Guffa:

La función se ejecuta justo después de que se creó, no después de que se haya analizado. El bloque de script completo se analiza antes de que se ejecute cualquier código en él. Además, el código de análisis no significa automáticamente que se ejecuta, si, por ejemplo, el IIFE está dentro de una función, entonces no se ejecutará hasta que se llame a la función.


670
2017-11-22 14:21



Es solo una función anónima que se ejecuta justo después de que se creó.

Es como si lo hubiera asignado a una variable y la hubiera utilizado inmediatamente después, solo que sin la variable:

var f = function () {
};
f();

En jQuery hay una construcción similar en la que podrías estar pensando:

$(function(){
});

Esa es la forma corta de vincular el ready evento:

$(document).ready(function(){
});

91
2017-11-22 14:25



Una expresión de función invocada inmediatamente (IIFE) llama inmediatamente a una función. Esto simplemente significa que la función se ejecuta inmediatamente después de la finalización de la definición.

Tres formulaciones más comunes:

// Crockford's preference - parens on the inside
(function() {
  console.log('Welcome to the Internet. Please follow me.');
}());

//The OPs example, parentheses on the outside
(function() {
  console.log('Welcome to the Internet. Please follow me.');
})();

//Using the exclamation mark operator
//https://stackoverflow.com/a/5654929/1175496
!function() {
  console.log('Welcome to the Internet. Please follow me.');
}();

Si no hay requisitos especiales para su valor de retorno, entonces podemos escribir:

!function(){}();  // => true
~function(){}(); // => -1
+function(){}(); // => NaN
-function(){}();  // => NaN

Alternativamente, puede ser:

~(function(){})();
void function(){}();
true && function(){ /* code */ }();
15.0, function(){ /* code */ }();

Incluso puedes escribir:

new function(){ /* code */ }
31.new function(){ /* code */ }() //If no parameters, the last () is not required

43
2018-05-29 03:09



Declara una función anónima y luego la llama:

(function (local_arg) {
   // anonymous function
   console.log(local_arg);
})(arg);

31
2017-11-22 14:21



Eso es decir ejecutar de inmediato.

entonces si lo hago:

var val = (function(){
     var a = 0;  // in the scope of this function
     return function(x){
         a += x;
         return a;
     };
})();

alert(val(10)); //10
alert(val(11)); //21

Violín: http://jsfiddle.net/maniator/LqvpQ/


Segundo ejemplo:

var val = (function(){
     return 13 + 5;
})();

alert(val); //18

26
2017-11-22 14:21



Esa construcción se llama Expresión de función invocada inmediatamente (IIFE) lo que significa que se ejecuta de inmediato. Piense en ello como una función que se llama automáticamente cuando el intérprete alcanza esa función.

Caso de uso más común:

Uno de los casos de uso más comunes es limitar el alcance de una variable hecha a través de var. Variables creadas a través de var tener un alcance limitado a una función, por lo que este constructo (que es un contenedor de funciones alrededor de cierto código) se asegurará de que su alcance variable no se escape de esa función.

En el siguiente ejemplo, el recuento no estará disponible fuera de la función invocada inmediatamente, es decir, el alcance de countno se escapará de la función. Deberías obtener un Reference Error, si intenta acceder a él fuera de la función invocada inmediatamente de todos modos.

(function () { 
    var count = 10;
})();
console.log(count);  // Reference Error: count is not defined

Alternativa ES6 (recomendado)

En ES6, ahora podemos tener variables creadas a través de let y const. Ambos tienen un alcance de bloque (a diferencia var que tiene un alcance de función).

Por lo tanto, en lugar de utilizar esa construcción compleja de IIFE para el caso de uso que mencioné anteriormente, ahora puede escribir código mucho más simple para asegurarse de que el alcance de una variable no se escape del bloque deseado.

{ 
    let count = 10;
};
console.log(count);  // Reference Error: count is not defined

En este ejemplo, utilizamos let para definir un count variable que hace count limitado al bloque de código, creamos con los corchetes {...}.

Yo lo llamo un Curly Jail.


18
2017-10-29 21:31



(function () {
})();

Esto se llama IIFE (Expresión de función invocada inmediatamente). Uno de los patrones de diseño de javascript famosos, y es el corazón y el alma del patrón de Módulo moderno. Como su nombre indica, se ejecuta inmediatamente después de su creación. Este patrón crea un ámbito de ejecución aislado o privado.

JavaScript antes de ECMAScript 6 usando alcance léxico, IIFE se usa para simular el alcance del bloque. (Con ECMAScript 6, el alcance del bloque es posible con la introducción de la palabra clave let y const). Referencia para el problema con el alcance léxico

Simular el alcance del bloque con IIFE

El beneficio de rendimiento del uso de IIFE es la capacidad de pasar objetos globales de uso común como ventana, documento, etc. Como argumento al reducir la búsqueda de alcance. (Recuerde que Javascript busca propiedades en un ámbito local y hasta encadenamiento hasta alcance global). Para acceder a objetos globales en el ámbito local, reduzca el tiempo de búsqueda como se muestra a continuación.

(function (globalObj) {
//Access the globalObj
})(window);

13
2018-05-19 11:28