2013-06-12 1 views
21

In molti luoghi che vedo gli script come questo:Perché utilizzare la funzione di autoesecuzione?

(function() { 
    var hello = 'Hello World'; 
    alert(hello); 
})(); 

Perché non basta scrivere in questo modo, senza alcuna funzione:

var hello = 'Hello World'; 
alert(hello); 
+1

Mantenere il namespace globale pulita è una precisa ragione - riducendo così le possibilità di conflitto. – techfoobar

risposta

26

Usiamo sé la funzione di esecuzione, per gestire Mirino variabile.

L'ambito di una variabile è la regione del programma in cui è definita. Una variabile globale ha portata globale; è definito ovunque nel tuo codice JavaScript. (Anche nelle vostre funzioni). D'altro canto, le variabili dichiarate all'interno di una funzione sono definite solo all'interno del corpo della funzione. Sono variabili locali e hanno un ambito locale. I parametri di funzione contano anche come variabili locali e sono definiti solo all'interno del corpo della funzione.

var scope = "global"; 
function checkscope() { 
    alert(scope); 
} 

checkscope(); // global 

Come si vede, è possibile accedere alla variabile scope all'interno della vostra funzione, ma, all'interno del corpo di una funzione, una variabile locale ha la precedenza su una variabile globale con lo stesso nome. Se si dichiara una variabile locale o un parametro di funzione con lo stesso nome di una variabile globale, si nasconde effettivamente la variabile globale.

var scope = "global"; 
function checkscope() { 
    var scope = "local"; 
    alert(scope); 
} 

checkscope(); // local 
alert(scope); // global 

Come si vede, la variabile all'interno della funzione non sovrascriverà le variabili globali. A causa di questa funzione, inseriamo il codice all'interno della funzione autoeseguibile, per evitare di sovrascrivere le altre variabili, quando il nostro codice diventa grande e grande.

// thousand line of codes 
// written a year ago 

// now you want to add some peice of code 
// and you don't know what you have done in the past 
// just put the new code in the self executing function 
// and don't worry about your variable names 

(function() { 
    var i = 'I'; 
    var can = 'CAN'; 
    var define = 'DEFINE'; 
    var variables = 'VARIABLES'; 
    var without = 'WITHOUT'; 
    var worries = 'WORRIES'; 

    var statement = [i, can, define, variables, without, worries]; 

    alert(statement.join(' ')); 
    // I CAN DEFINE VARIABLES WITHOUT WORRIES 
}()); 
12

Il IIFE (espressione di una funzione immediatamente invocato) evita di creare una variabile globale hello.

Ci sono anche altri usi, ma per il codice di esempio che hai postato, questo sarebbe il motivo.

+0

Per estendere questo. IIFE è anche ottimo per creare spazi dei nomi personalizzati che costituiranno una "estensione" della funzionalità menzionata. –

5

oltre alla custodia del namespace globale pulita, ma sono anche utili per stabilire i metodi privati ​​per le funzioni accessibili, pur esponendo alcune proprietà per un uso successivo -

var counter = (function(){ 
    var i = 0; 

    return { 
    get: function(){ 
     return i; 
    }, 
    set: function(val){ 
     i = val; 
    }, 
    increment: function() { 
     return ++i; 
    } 
    }; 
}()); 

// 'counter' is an object with properties, which in this case happen to be 
// methods. 

counter.get(); // 0 
counter.set(3); 
counter.increment(); // 4 
counter.increment(); // 5 
2

Ci possono essere un paio di motivi.

Il primo protegge l'ambito, poiché la funzione crea un nuovo ambito.

Un altro può essere variabili vincolanti, ad esempio

for (var i = 0; i < n; i++) { 
    element.onclick = (function(i){ 
     return function(){ 
     // do something with i 
    } 
    })(i); 
} 
+0

Sarebbe possibile incapsulare l'avvio di un'intera applicazione web usando questo?Se è così, sarebbe un ottimo mezzo per declassare lo spazio dei nomi globale. Ma la domanda che ho a questo punto, è come si fa a rendere persistenti le entità desiderate * usando questo? Dovrò ricorrere a una chiusura per raggiungere questo obiettivo? –