Selbst rufenden anonymouse Funktionen mit Dokument Parameter

Question

Ich versuche, den Unterschied zwischen zu verstehen:

(function(document) { 
    //do stuff with document 
})(document); 

und

(function() { 
    //do stuff with document 
})(); 

Ich bin mir nicht sicher, warum die Konvention zu sein scheint document und manchmal passieren window auch auf die Funktion? Hat das mit dem Umfang zu tun?

Answer 1

Es gibt einige Gründe dafür:

1. Mit weniger globale Variablen Durch die Funktion mit der globalen Variablen Injizieren es nur auf dem Argument und nicht um eine globale Variable abhängen, die mehrfach verwendet werden könnten .

2. Erstellen eines lokalen Bereichs Ein IIFE ist eine Möglichkeit, einen neuen Bereich zu erstellen, indem eine Funktion deklariert und sofort aufgerufen wird. Weitere Informationen finden Sie unter this question.

3. Bessere minify

Zum Beispiel, wenn Sie Ihr Beispiel wird minify wird es aus dieser Änderung:

(function(document) { 
    //do stuff with document 
})(document); 

Um dies:

(function(a) { 
    //do stuff with a 
})(document); 

Beachten Sie die a, die ist kürzer als Ihre document.

Edit: Feste Tippfehler

Answer 2

Dies wird besonders praktisch, wenn Sie einen Kompressor/Uglifier wie UglifyJS verwenden. Es ersetzt dann document mit sagen a, so dass Ihr Code kürzer.

So etwas wie

(function(document, window){ 
    var body = document.body; 
    var foo = document.querySelector('foo'); 
    var bar = document.querySelector('bar'); 
})(document, window); 

wird

(function(a, b){ 
    var c = a.body; 
    var d = a.querySelector('foo'); 
    var e = a.querySelector('bar'); 
})(document, window); 

Wenn Sie nicht Dokument und Fenster in der Funktion platziert haben werden es nur halten Dokument zu sagen;

(function(){ 
    var c = document.body; 
    var d = document.querySelector('foo'); 
    var e = document.querySelector('bar'); 
})(); 

Answer 3

Ein sofort aufrufender Funktionsausdruck (IIFE) erstellt einen neuen lokalen Bereich. Wie bei jeder Funktion können Sie Argumente übergeben, wenn Sie sie aufrufen. document und window sind Globals in JavaScript Web API und werden zur Verfügung gestellt, wenn Sie js im Browser ausführen. Indem Sie sie in ein IIFE übertragen, können Sie auf sie zugreifen, was immer Sie wollen, aufgrund des Umfangs. Zum Beispiel:

(function(w, d) { 
    console.log(w); // window 
    console.log(d); // document 
})(window, document); 

console.log(w); // Uncaught ReferenceError: w is not defined 
console.log(a); // Uncaught ReferenceError: a is not defined 

Der Grund w und a sind nicht in dem zweiten Satz von console.log s definiert ist, weil sie lokal an den IIFE scoped.