Was ist das Konstrukt (function() { } )() in JavaScript?

Früher wusste ich, was das bedeutet, aber ich kämpfe jetzt …

Ist das im Grunde gesagt document.onload?

(function () {

})();

Es ist ein Sofort aufgerufener Funktionsausdruckoder IIFE kurz. Es wird sofort nach seiner Erstellung ausgeführt.

Es hat nichts mit einem Event-Handler für irgendwelche Events (wie z document.onload).
Betrachten Sie den Teil innerhalb des ersten Klammerpaars: (function(){})();….es ist ein regulärer Funktionsausdruck. Dann schauen Sie sich das letzte Paar an (function(){})();, dies wird normalerweise zu einem Ausdruck hinzugefügt, um eine Funktion aufzurufen; in diesem Fall unser vorheriger Ausdruck.

Dieses Muster wird häufig verwendet, wenn versucht wird, eine Verschmutzung des globalen Namensraums zu vermeiden, da alle Variablen, die innerhalb des IIFE (wie in jedem anderen normal Funktion) sind außerhalb ihres Bereichs nicht sichtbar.
Aus diesem Grund haben Sie diese Konstruktion möglicherweise mit einem Event-Handler für verwechselt window.onloadweil es oft so verwendet wird:

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

Von Guffa vorgeschlagene Korrektur:

Die Funktion wird direkt nach ihrer Erstellung ausgeführt, nicht nachdem sie geparst wurde. Der gesamte Skriptblock wird analysiert, bevor darin enthaltener Code ausgeführt wird. Außerdem bedeutet das Analysieren von Code nicht automatisch, dass er ausgeführt wird. Wenn sich beispielsweise das IIFE in einer Funktion befindet, wird es nicht ausgeführt, bis die Funktion aufgerufen wird.

Aktualisieren
Da dies ein ziemlich beliebtes Thema ist, ist es erwähnenswert, dass auch IIFEs geschrieben werden können Die Pfeilfunktion von ES6 (wie Gajus in einem Kommentar darauf hingewiesen hat):

((foo) => {
 // do something with foo here foo
})('foo value')

Es ist nur eine anonyme Funktion, die direkt nach ihrer Erstellung ausgeführt wird.

Es ist so, als ob Sie es einer Variablen zuweisen und es direkt danach verwenden würden, nur ohne die Variable:

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

In jQuery gibt es ein ähnliches Konstrukt, an das Sie vielleicht denken:

$(function(){
});

Das ist die Kurzform der Bindung ready Veranstaltung:

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

Aber die beiden obigen Konstrukte sind es nicht IIFES.

Ein sofort aufgerufener Funktionsausdruck (IIFE) ruft sofort eine Funktion auf. Das bedeutet einfach, dass die Funktion unmittelbar nach Abschluss der Definition ausgeführt wird.

Drei weitere gebräuchliche Formulierungen:

// 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.');
}();

Wenn es keine besonderen Anforderungen an den Rückgabewert gibt, können wir schreiben:

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

Alternativ kann es sein:

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

Du kannst sogar schreiben:

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

Dieses Konstrukt heißt an Sofort aufgerufener Funktionsausdruck (IIFE) was bedeutet, dass es sofort ausgeführt wird. Stellen Sie sich das als eine Funktion vor, die automatisch aufgerufen wird, wenn der Interpreter diese Funktion erreicht.

Häufigster Anwendungsfall:

Einer der häufigsten Anwendungsfälle besteht darin, den Gültigkeitsbereich einer Variablen einzuschränken, die über erstellt wurde var. Variablen erstellt über var haben einen auf eine Funktion beschränkten Gültigkeitsbereich, sodass dieses Konstrukt (das ein Funktionswrapper um bestimmten Code ist) sicherstellt, dass Ihr Variablenbereich nicht aus dieser Funktion herausleckt.

Im folgenden Beispiel count wird nicht außerhalb der sofort aufgerufenen Funktion verfügbar sein, dh im Geltungsbereich von count wird nicht aus der Funktion lecken. Sie sollten eine bekommen ReferenceErrorsollten Sie trotzdem versuchen, außerhalb der sofort aufgerufenen Funktion darauf zuzugreifen.

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

ES6-Alternative (empfohlen)

In ES6 können wir jetzt Variablen über erstellen lassen let und const. Beide sind blockbezogen (im Gegensatz zu var die funktionsbezogen ist).

Anstatt dieses komplexe Konstrukt von IIFE für den oben erwähnten Anwendungsfall zu verwenden, können Sie daher jetzt viel einfacheren Code schreiben, um sicherzustellen, dass der Gültigkeitsbereich einer Variablen nicht aus Ihrem gewünschten Block austritt.

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

In diesem Beispiel haben wir verwendet let definieren count Variable, die macht count beschränkt auf den Codeblock, den wir mit den geschweiften Klammern erstellt haben {...}.

Ich nenne es ein „lockiges Gefängnis“.

Es deklariert eine anonyme Funktion und ruft sie dann auf:

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

Das heißt sofort ausführen.

also wenn ich das mache:

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

Geige: http://jsfiddle.net/maniator/LqvpQ/

Zweites Beispiel:

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

alert(val); //18

(function () {
})();

Dies wird IIFE (Immediately Invoked Function Expression) genannt. Es ist eines der berühmten JavaScript-Designmuster und das Herz und die Seele des modernen Modulmusters. Wie der Name schon sagt, wird es sofort nach seiner Erstellung ausgeführt. Dieses Muster schafft einen isolierten oder privaten Ausführungsbereich.

JavaScript vor ECMAScript 6 verwendete lexikalisches Scoping, daher wurde IIFE zum Simulieren von Block Scoping verwendet. (Mit ECMAScript 6 ist Block Scoping mit der Einführung des let und const Schlüsselwörter.)
Referenz für Probleme mit lexikalischem Scoping

Simulieren Sie das Block-Scoping mit IIFE

Der Leistungsvorteil der Verwendung von IIFEs ist die Fähigkeit, häufig verwendete globale Objekte wie z window, document, usw. als Argument, indem Sie die Bereichssuche reduzieren. (Denken Sie daran, dass JavaScript nach Eigenschaften im lokalen Geltungsbereich und weit oben in der Kette bis zum globalen Geltungsbereich sucht). Der Zugriff auf globale Objekte im lokalen Bereich reduziert also die Suchzeit wie unten.

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