Por qué usar (function() {....}());

Duplicar posible:
How does the (function() {})() construct work and why do people use it?Por qué usar (function() {....}());

¿Por qué los archivos de JavaScript modernos utilizan construcciones como:

(function() { 
    // some real code 
}());

es decir, Entiendo que se está creando una función anónima y luego se la llamó de inmediato, sin que se hayan pasado parámetros ... Pero ¿por qué hacerlo de esta manera y no solo llamar al some real code? ¿Y para qué sirve el par de corchetes?

En particular, estoy mirando el archivo js/start.js en Github:

(function() { 
    "use strict"; 

    wooga.castle.GRID_UNIT = 48; 
    wooga.castle.IMAGES_BASE_URL = "images/entities/"; 

    (function() { 
     var style = document.createElement('div').style, 
      prefix; 
     var candidates = { 
      webkit: 'webkitTransform', 
      moz: 'MozTransform', // 'M' is uppercased 
      ms:  'msTransform', 
      o:  'oTransform', 
      '':  'transform' 
     }; 
     for (var prefix in candidates) { 
      var candidate = candidates[prefix]; 
      if ('undefined' !== typeof style[candidate]) { 
       wooga.castle.prefix = prefix; 
       wooga.castle.prefixedTransform = candidate; 
       break; 
      } 
     } 
    }()); 

    // XXX why the 2 wrapped "function"s here? XXX 

    wooga.castle.isNativeWrapper = function() { 
     var result = !wooga.castle.capabilities.desktop && !wooga.castle.capabilities.android && (! /Safari/.test(navigator.userAgent)); 
     wooga.castle.isNativeWrapper = function() { 
      return result; 
     }; 
     return result; 
    }; 
}());

Con mis conocimientos básicos de JavaScript y jQuery entiendo los comandos individuales enumerados anteriormente, pero que no entiendo por qué están envueltos en el interior de varios function s. No podemos llamar:

"use strict"; 

    wooga.castle.GRID_UNIT = 48; 
    wooga.castle.IMAGES_BASE_URL = "images/entities/"; 
    var style = document.createElement('div').style, 
     prefix; 
    var candidates = { 
     webkit: 'webkitTransform', 
     moz: 'MozTransform', // 'M' is uppercased 
     ms:  'msTransform', 
     o:  'oTransform', 
     '':  'transform' 
    }; 
    for (var prefix in candidates) { 
     var candidate = candidates[prefix]; 
     if ('undefined' !== typeof style[candidate]) { 
      wooga.castle.prefix = prefix; 
      wooga.castle.prefixedTransform = candidate; 
      break; 
     } 
    } 

    wooga.castle.isNativeWrapper = !wooga.castle.capabilities.desktop && !wooga.castle.capabilities.android && (! /Safari/.test(navigator.userAgent));

Fuente

2012-06-26 Alexander Farber

He visto '((función() {})())' pero no '(función() {}())'. – kevin628

@ kevin628: Nunca he visto '((función() {})())'. Eso es demasiados '()' s. La otra forma es: '(function() {})()' –

@Rocket Parece que son lo mismo, al menos en Chrome. Uno solo tiene menos '()' s. Aprendí algo nuevo hoy. – kevin628

Esto se hace para que el código interno no interfiera con las variables en el ámbito global.

Por ejemplo:

var myLibrary = {}; 
var _privateVar = [];

Ahora, ambos son global. Pero, no quiero eso. Entonces, si hago una función, puedo crear un nuevo alcance.

(function(){ 
    window.myLibrary = {}; // global 
    var _privateVar = []; // private 
}());

Fuente

2012-06-26 14:48:19

Ok, gracias, ¿y por qué son necesarios los corchetes exteriores '(...);' en el código? –

@AlexanderFarber: Los corchetes exteriores se deben a que 'function() {}()' es un error de sintaxis. Los corchetes exteriores lo convierten en una expresión. –

Ok, ¿y por qué el doble envoltorio de 'isNativeWrapper' al final de mi código? –

Se llama un cierre, que está diseñado para encapsular código para que las variables y funciones no se declaran en el ámbito global, la prevención de conflictos.

Fuente

2012-06-26 14:47:05 michael

Esto se hace para evitar "Contaminación del alcance global". Al rodear el código con una función anónima, las variables existen solo en el ámbito de la función, lo que evita posibles conflictos en el espacio de nombres global.

Los corchetes exteriores son necesarios porque function(){} en sí mismo es una declaración y debe convertirlo en una expresión agregando (...) o ! delante para ejecutarlo.

Fuente

2012-06-26 14:47:15 Christoph

Por qué usar (function() {....}());

Respuesta

Cuestiones relacionadas