Perché usare (function() {....}());

Question

Eventuali duplicati:
How does the (function() {})() construct work and why do people use it?

Perché i moderni file JavaScript usare costrutti come:

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

Vale a dire Capisco che una funzione anonima viene creata e quindi chiamata immediatamente, senza parametri passati ... Ma perché farlo in questo modo e non solo chiamare some real code? E a cosa serve la coppia esterna di parentesi tonde?

In particolare sto fissando il file js/start.js a 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 le mie capacità JavaScript e jQuery base Capisco i singoli comandi elencati sopra, ma non ho ricevuto perché sono avvolti all'interno di diversi function s. Non possiamo semplicemente chiamare:

"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)); 

Answer 1

Questo è fatto in modo che il codice interno non interferisca con le variabili nell'ambito globale.

Ad esempio:

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

Ora, entrambi questi sono globali. Ma non lo voglio Quindi, se creo una funzione, posso creare un nuovo ambito.

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

Answer 2

Si chiama una chiusura, è stato progettato per incapsulare il codice in modo che le variabili e le funzioni non sono dichiarati in ambito globale, prevenire i conflitti.

Answer 3

Questo viene fatto per prevenire "Inquinamento globale". Circondando il codice con una funzione anonima, le variabili esistono solo nell'ambito della funzione, evitando così possibili conflitti nello spazio dei nomi globale.

Le parentesi esterne sono necessarie perché function(){} è di per sé una dichiarazione ed è necessario trasformarla in un'espressione aggiungendo (...) o ! di fronte ad essa per eseguirla.