Warum müssen Sie eine anonyme Funktion in derselben Zeile aufrufen?

Ich habe einige Beiträge über Schließungen gelesen und dies überall gesehen, aber es gibt keine klare Erklärung, wie es funktioniert – jedes Mal, wenn mir einfach gesagt wurde, ich solle es verwenden …:

// Create a new anonymous function, to use as a wrapper
(function(){
    // The variable that would, normally, be global
    var msg = "Thanks for visiting!";

    // Binding a new function to a global object
    window.onunload = function(){
        // Which uses the 'hidden' variable
        alert( msg );
    };
// Close off the anonymous function and execute it
})();

Ok, ich sehe, dass wir eine neue anonyme Funktion erstellen und dann ausführen werden. Danach sollte dieser einfache Code funktionieren (und das tut er auch):

(function (msg){alert(msg)})('SO');

Meine Frage ist, welche Art von Magie passiert hier? Das dachte ich mir, als ich schrieb:

(function (msg){alert(msg)})

dann würde eine neue unbenannte Funktion wie die Funktion “” (msg) erstellt …

aber warum geht das dann nicht?

(function (msg){alert(msg)});
('SO');

Warum muss es in der gleichen Zeile sein?

Könnten Sie mir bitte einige Beiträge zeigen oder mir eine Erklärung geben?

Lassen Sie das Semikolon nach der Funktionsdefinition weg.

(function (msg){alert(msg)})
('SO');

Oben sollte funktionieren.

DEMO-Seite: https://jsfiddle.net/e7ooeq6m/

Ich habe diese Art von Muster in diesem Beitrag besprochen:

jQuery- und $-Fragen

BEARBEITEN:

Wenn Sie sich ansehen ECMA-Skriptspezifikation, gibt es drei Möglichkeiten, eine Funktion zu definieren. (Seite 98, Kapitel 13 Funktionsdefinition)

1. Verwendung des Funktionskonstruktors

var sum = new Function('a','b', 'return a + b;');
alert(sum(10, 20)); //alerts 30

2. Funktionsdeklaration verwenden.

function sum(a, b)
{
    return a + b;
}

alert(sum(10, 10)); //Alerts 20;

3. Funktionsausdruck

var sum = function(a, b) { return a + b; }

alert(sum(5, 5)); // alerts 10

Sie fragen sich also vielleicht, was der Unterschied zwischen Deklaration und Ausdruck ist?

Aus der ECMA-Skriptspezifikation:

FunctionDeclaration : Funktionsbezeichner ( FormalParameterListopt ){ FunctionBody }

FunctionExpression : function Identifieropt ( FormalParameterListopt ){ FunctionBody }

Wenn Sie bemerken, ist “Identifikator”. Optional für Funktionsausdruck. Und wenn Sie keinen Bezeichner angeben, erstellen Sie eine anonyme Funktion. Das bedeutet nicht, dass Sie keinen Bezeichner angeben können.

Das bedeutet, dass Folgendes gilt.

var sum = function mySum(a, b) { return a + b; }

Wichtig zu beachten ist, dass Sie „mySum“ nur innerhalb des mySum-Funktionskörpers verwenden können, nicht außerhalb. Siehe folgendes Beispiel:

var test1 = function test2() { alert(typeof test2); }

alert(typeof(test2)); //alerts 'undefined', surprise! 

test1(); //alerts 'function' because test2 is a function.

Live-Demo

Vergleichen Sie dies mit

 function test1() { alert(typeof test1) };

 alert(typeof test1); //alerts 'function'

 test1(); //alerts 'function'

Lassen Sie uns mit diesem Wissen bewaffnet versuchen, Ihren Code zu analysieren.

Wenn Sie Code wie

    function(msg) { alert(msg); }

Sie haben einen Funktionsausdruck erstellt. Und Sie können diesen Funktionsausdruck ausführen, indem Sie ihn in Klammern setzen.

    (function(msg) { alert(msg); })('SO'); //alerts SO.

Dies wird als selbstaufgerufene Funktion bezeichnet.

Was Sie tun, wenn Sie anrufen (function(){}) gibt ein Funktionsobjekt zurück. Beim Anhängen () dazu wird es aufgerufen und alles im Körper wird ausgeführt. Die ; bezeichnet das Ende der Anweisung, deshalb schlägt der 2. Aufruf fehl.

Eine Sache, die ich verwirrend fand, ist, dass die “()” Gruppierungsoperatoren sind.

Hier ist Ihre grundlegende deklarierte Funktion.

Ex. 1:

var message="SO";

function foo(msg) {
    alert(msg);
}

foo(message);

Funktionen sind Objekte und können gruppiert werden. Lassen Sie uns also Klammern um die Funktion werfen.

Ex. 2:

var message="SO";

function foo(msg) {  //declares foo
    alert(msg);
}

(foo)(message);     // calls foo

Anstatt die gleiche Funktion zu deklarieren und sofort aufzurufen, können wir jetzt eine einfache Substitution verwenden, um sie so zu deklarieren, wie wir sie nennen.

Ex. 3.

var message="SO";

(function foo(msg) {
    alert(msg);
})(message);          // declares & calls foo

Schließlich brauchen wir dieses zusätzliche Foo nicht, weil wir nicht den Namen verwenden, um es zu nennen! Funktionen können anonym sein.

Ex. 4.

var message="SO";

(function (msg) {   // remove unnecessary reference to foo
    alert(msg);
})(message);

Um Ihre Frage zu beantworten, beziehen Sie sich auf Beispiel 2. Ihre erste Zeile deklariert eine namenlose Funktion und gruppiert sie, ruft sie aber nicht auf. Die zweite Zeile gruppiert eine Zeichenfolge. Beides bringt nichts. (Vincents erstes Beispiel.)

(function (msg){alert(msg)});  
('SO');                       // nothing.

(foo); 
(msg); //Still nothing.

Aber

(foo)
(msg); //works

Eine anonyme Funktion ist keine Funktion mit dem Namen “”. Es ist einfach eine Funktion ohne Namen.

Wie jeder andere Wert in JavaScript muss für eine Funktion kein Name erstellt werden. Es ist jedoch weitaus nützlicher, ihn wie jeden anderen Wert tatsächlich an einen Namen zu binden.

Aber wie jeder andere Wert möchten Sie ihn manchmal verwenden, ohne ihn an einen Namen zu binden. Das ist das selbstaufrufende Muster.

Hier ist eine Funktion und eine Zahl, nicht gebunden, sie tun nichts und können niemals verwendet werden:

function(){ alert("plop"); }
2;

Wir müssen sie also in einer Variablen speichern, um sie wie jeden anderen Wert verwenden zu können:

var f = function(){ alert("plop"); }
var n = 2;

Sie können auch syntaktischen Zucker verwenden, um die Funktion an eine Variable zu binden:

function f(){ alert("plop"); }
var n = 2;

Aber wenn die Benennung nicht erforderlich ist und zu mehr Verwirrung und weniger Lesbarkeit führen würde, könnten Sie sie einfach sofort verwenden.

(function(){ alert("plop"); })(); // will display "plop"
alert(2 + 3); // will display 5

Hier sind meine Funktion und meine Zahlen nicht an eine Variable gebunden, können aber trotzdem verwendet werden.

So gesehen sieht es so aus, als hätten selbstaufrufende Funktionen keinen wirklichen Wert. Beachten Sie jedoch, dass das JavaScript-Bereichstrennzeichen die Funktion und nicht der Block ({}) ist.

Eine selbstaufrufende Funktion hat also tatsächlich die gleiche Bedeutung wie ein C++-, C#- oder Java-Block. Das bedeutet, dass die darin erstellte Variable nicht außerhalb des Gültigkeitsbereichs “leckt”. Dies ist in JavaScript sehr nützlich, um den globalen Geltungsbereich nicht zu verschmutzen.

So funktioniert JavaScript. Sie können eine benannte Funktion deklarieren:

function foo(msg){
   alert(msg);
}

Und nenne es:

foo("Hi!");

Oder Sie können eine anonyme Funktion deklarieren:

var foo = function (msg) {
    alert(msg);
}

Und nenne das:

foo("Hi!");

Oder Sie können die Funktion einfach nie an einen Namen binden:

(function(msg){
   alert(msg);
 })("Hi!");

Funktionen können auch Funktionen zurückgeben:

function make_foo() {
    return function(msg){ alert(msg) };
}

(make_foo())("Hi!");

Es ist nichts wert, dass irgendwelche Variablen mit “var” im Hauptteil von definiert sind make_foo wird von jeder Funktion geschlossen, die von zurückgegeben wird make_foo. Dies ist ein Abschluss und bedeutet, dass jede Änderung, die von einer Funktion am Wert vorgenommen wird, von einer anderen sichtbar ist.

Auf diese Weise können Sie Informationen kapseln, wenn Sie dies wünschen:

function make_greeter(msg){
    return function() { alert(msg) };
}

var hello = make_greeter("Hello!");

hello();

So funktioniert fast jede Programmiersprache außer Java.

Der Code, den Sie zeigen,

(function (msg){alert(msg)});
('SO');

besteht aus zwei Aussagen. Der erste ist ein Ausdruck, der ein Funktionsobjekt ergibt (das dann der Garbage Collection unterzogen wird, weil es nicht gespeichert wird). Der zweite ist ein Ausdruck, der eine Zeichenkette ergibt. Um die Funktion auf die Zeichenfolge anzuwenden, müssen Sie entweder die Zeichenfolge als Argument an die Funktion übergeben, wenn sie erstellt wird (was Sie auch oben zeigen), oder Sie müssen die Funktion tatsächlich in einer Variablen speichern, damit Sie dies können Wenden Sie es zu einem späteren Zeitpunkt in Ihrer Freizeit an. So:

var f = (function (msg){alert(msg)});
f('SO');

Beachten Sie, dass Sie durch das Speichern einer anonymen Funktion (einer Lambda-Funktion) in einer Variablen dieser effektiv einen Namen geben. Daher können Sie genauso gut eine reguläre Funktion definieren:

function f(msg) {alert(msg)};
f('SO');

Zusammenfassend zu den bisherigen Kommentaren:

function() {
  alert("hello");
}();

wenn sie keiner Variablen zugewiesen wird, ergibt sich ein Syntaxfehler. Der Code wird als Funktionsanweisung (oder Definition) analysiert, wodurch die schließenden Klammern syntaktisch falsch dargestellt werden. Das Hinzufügen von Klammern um den Funktionsteil teilt dem Interpreter (und Programmierer) mit, dass dies ein Funktionsausdruck (oder Aufruf) ist, wie in

(function() {
  alert("hello");
})();

Dies ist eine selbstaufrufende Funktion, d. h. sie wird anonym erstellt und sofort ausgeführt, da der Aufruf in derselben Zeile erfolgt, in der sie deklariert wurde. Diese selbstaufrufende Funktion wird mit der vertrauten Syntax zum Aufrufen einer Funktion ohne Argumente plus hinzugefügten Klammern um den Namen der Funktion angezeigt: (myFunction)();.

Es gibt eine gute SO-Diskussion JavaScript-Funktionssyntax.