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

Ich habe einige Posts über Schließungen gelesen und dies überall gesehen, aber es gibt keine klare Erklärung, wie es funktioniert - jedes Mal, wenn mir nur gesagt wurde, ich solle es benutzen ...:

// 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 diese 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 hier passiert? Ich dachte das, als ich schrieb:

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

dann würde eine neue unbenannte Funktion wie die Funktion "" (msg) erstellt ...

aber warum funktioniert 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?

Löschen Sie das Semikolon nach der Funktionsdefinition.

(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 die ECMA-Skriptspezifikation ansehen , gibt es drei Möglichkeiten, eine Funktion zu definieren. (Seite 98, Abschnitt 13 Funktionsdefinition)

1. Verwenden 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 vielleicht, was ist der Unterschied zwischen Deklaration und Ausdruck?

Aus der ECMA-Skriptspezifikation:

FunctionDeclaration: Funktionskennung (FormalParameterListopt) {FunctionBody}

FunctionExpression: function Identifieropt (FormalParameterListopt) {FunctionBody}

Wenn Sie bemerken, ist 'bezeichner' für den Funktionsausdruck optional . Und wenn Sie keine Kennung angeben, erstellen Sie eine anonyme Funktion. Dies bedeutet nicht, dass Sie keinen Bezeichner angeben können.

Dies bedeutet, dass Folgendes gültig ist.

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

Es ist wichtig zu beachten, 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'

Mit diesem Wissen wollen wir versuchen, Ihren Code zu analysieren.

Wenn Sie Code wie haben,

    function(msg) { alert(msg); }

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

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

Es wird eine selbst aufgerufene Funktion genannt.

Wenn Sie aufrufen, geben Sie (function(){})ein Funktionsobjekt zurück. Wenn Sie daran anhängen (), wird es aufgerufen und alles im Körper wird ausgeführt. Das ;bezeichnet das Ende der Anweisung, deshalb schlägt der 2. Aufruf fehl.

Eine Sache, die ich verwirrend fand, ist, dass die "()" Operatoren gruppieren.

Hier ist Ihre deklarierte Grundfunktion.

Ex. 1:

var message = 'SO';

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

foo(message);

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

Ex. 2:

var message = 'SO';

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

(foo)(message);     // calls foo

Anstatt dieselbe Funktion zu deklarieren und sofort aufzurufen, können wir sie jetzt durch einfache Substitution deklarieren, wie wir sie aufrufen.

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 den Namen nicht 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, lesen Sie Beispiel 2. Ihre erste Zeile deklariert eine namenlose Funktion und gruppiert sie, ruft sie jedoch nicht auf. Die zweite Zeile gruppiert eine Zeichenfolge. Beide machen 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 bei jedem anderen Wert in JavaScript muss für eine Funktion kein Name erstellt werden. Es ist jedoch weitaus nützlicher, es wie jeden anderen Wert an einen Namen zu binden.

Aber wie bei jedem anderen 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 syntatischen Zucker verwenden, um die Funktion an eine Variable zu binden:

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

Wenn die Benennung jedoch nicht erforderlich ist und zu mehr Verwirrung und geringerer Lesbarkeit führen würde, können Sie sie 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 der JavaScript-Bereichsbegrenzer die Funktion und nicht der Block ({}) ist.

Eine selbstaufrufende Funktion hat also tatsächlich die gleiche Bedeutung wie ein C ++ -, C # - oder Java-Block. Dies bedeutet, dass die im Inneren erstellte Variable außerhalb des Bereichs nicht "leckt". Dies ist in JavaScript sehr nützlich, um den globalen Bereich 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 alle mit "var" im Hauptteil von definierten Variablen make_foovon jeder von zurückgegebenen Funktion geschlossen werden make_foo. Dies ist ein Abschluss und bedeutet, dass jede Änderung, die von einer Funktion am Wert vorgenommen wird, für eine andere 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();

Es ist nur so, wie fast jede Programmiersprache außer Java funktioniert.

Der Code, den Sie anzeigen,

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

bestehen aus zwei Aussagen. Der erste ist ein Ausdruck, der ein Funktionsobjekt ergibt (das dann als Müll gesammelt wird, weil es nicht gespeichert wird). Der zweite ist ein Ausdruck, der eine Zeichenfolge ergibt. Um die Funktion auf die Zeichenfolge anzuwenden, müssen Sie die Zeichenfolge entweder 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 nach Belieben an. Wie so:

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

Beachten Sie, dass Sie durch 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 vorherigen Kommentaren:

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

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

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

Dies ist eine selbstaufrufende Funktion, dh sie wird anonym erstellt und sofort ausgeführt, da der Aufruf in derselben Zeile erfolgt, in der er deklariert wurde. Diese selbstaufrufende Funktion wird mit der bekannten Syntax zum Aufrufen einer Funktion ohne Argumente sowie zusätzlichen Klammern um den Namen der Funktion angezeigt : (myFunction)();.

Es gibt eine gute SO-Diskussion JavaScript-Funktionssyntax .

Diese Antwort ist nicht eng mit der Frage verbunden, aber Sie könnten interessiert sein herauszufinden, dass diese Art von Syntaxfunktion nicht speziell für Funktionen ist. Zum Beispiel können wir immer so etwas tun:

alert(
    {foo: "I am foo", bar: "I am bar"}.foo
); // alerts "I am foo"

Bezogen auf Funktionen. Da es sich um Objekte handelt, die von Function.prototype erben, können wir Folgendes tun:

Function.prototype.foo = function () {
    return function () {
        alert("foo");
    };
};

var bar = (function () {}).foo();

bar(); // alerts foo

Und Sie wissen, wir müssen Funktionen nicht einmal mit Klammern umgeben, um sie auszuführen. Wie auch immer, solange wir versuchen, das Ergebnis einer Variablen zuzuweisen.

var x = function () {} (); // this function is executed but does nothing

function () {} (); // syntax error

Eine andere Sache, die Sie mit Funktionen tun können, sobald Sie sie deklarieren, ist, den newOperator über sie aufzurufen und ein Objekt zu erhalten. Folgendes ist äquivalent:

var obj = new function () {
    this.foo = "bar";
};

var obj = {
    foo : "bar"
};

Es gibt noch eine weitere Eigenschaft, die die JavaScript-Funktion hat. Wenn Sie dieselbe anonyme Funktion rekursiv aufrufen möchten.

(function forInternalOnly(){

  //you can use forInternalOnly to call this anonymous function
  /// forInternalOnly can be used inside function only, like
  var result = forInternalOnly();
})();

//this will not work
forInternalOnly();// no such a method exist

Mein Verständnis der Frage des Fragestellers ist so, dass:

Wie funktioniert diese Magie:

(function(){}) ('input')   // Used in his example

Ich kann mich irren. Die übliche Praxis, mit der Menschen vertraut sind, ist jedoch:

(function(){}('input') )

Der Grund dafür ist, dass JavaScript-Klammern AKA ()keine Anweisungen enthalten können. Wenn der Parser auf das Funktionsschlüsselwort stößt, kann er es als Funktionsausdruck und nicht als Funktionsdeklaration analysieren.

Quelle: Blog-Beitrag Sofort aufgerufener Funktionsausdruck (IIFE)

Beispiele ohne Klammern:

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

(Dies ist die einzige wirkliche Verwendung von void, afaik)

oder

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

oder

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

auch arbeiten. Das voidbewirkt, dass der Ausdruck ausgewertet wird, ebenso wie die Zuordnung und der Knall. die letzte arbeitet mit ~, +, -, delete, typeof, einige der unäre Operatoren ( voideiner ist, wie gut). nicht arbeiten sind selbstverständlich ++,-- weil eine Variable erforderlich ist.

Der Zeilenumbruch ist nicht erforderlich.

Es ist eine selbstausführende anonyme Funktion. Der erste Satz von Klammern enthält die auszuführenden Ausdrücke, und der zweite Satz von Klammern führt diese Ausdrücke aus.

(function () {
    return ( 10 + 20 );
})();

Peter Michaux diskutiert den Unterschied in einem wichtigen Paar Klammern .

Dies ist ein nützliches Konstrukt, wenn Sie versuchen, Variablen aus dem übergeordneten Namespace auszublenden. Der gesamte Code innerhalb der Funktion ist im privaten Bereich der Funktion enthalten, was bedeutet, dass von außerhalb der Funktion überhaupt nicht auf sie zugegriffen werden kann, wodurch sie wirklich privat ist.

Sehen:

1. Schließung (Informatik)
2. JavaScript-Namespace
3. Wichtiges Paar Javascript-Klammern

Eine andere Sicht

Zunächst können Sie eine anonyme Funktion deklarieren:

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

Dann nennst du es:

foo ('Few');

Da foo = Funktion (msg) {alert (msg);} , können Sie foo wie folgt ersetzen :

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

Sie sollten jedoch Ihre gesamte anonyme Funktion in geschweifte Klammern setzen, um Syntaxfehler beim Deklarieren der Funktion beim Parsen zu vermeiden. Dann haben wir,

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

Auf diese Weise ist es für mich leicht zu verstehen.

Als du es getan hast:

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

Sie haben die Funktion zuvor ('SO')aufgrund des Semikolons beendet. Wenn Sie nur schreiben:

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

Es wird klappen.

Arbeitsbeispiel: http://jsfiddle.net/oliverni/dbVjg/

Der einfache Grund, warum es nicht funktioniert, liegt nicht darin, dass ;das Ende der anonymen Funktion angezeigt wird. Dies liegt daran, dass es sich ()am Ende eines Funktionsaufrufs nicht um einen Funktionsaufruf handelt. Das ist,

function help() {return true;}

Wenn Sie dies aufrufen, ist result = help();dies ein Aufruf einer Funktion und gibt true zurück.

Wenn Sie anrufen, ist result = help;dies kein Anruf. Es ist eine Aufgabe, bei der die Hilfe wie Daten behandelt wird, die dem Ergebnis zugewiesen werden sollen.

Sie haben eine anonyme Funktion durch Hinzufügen des Semikolons deklariert / instanziiert.

(function (msg) { /* Code here */ });

und dann versucht, es in einer anderen Anweisung mit nur Klammern aufzurufen ... Offensichtlich, weil die Funktion keinen Namen hat, aber dies wird nicht funktionieren:

('SO');

Der Interpreter sieht die Klammern in der zweiten Zeile als neue Anweisung / Anweisung und funktioniert daher nicht, selbst wenn Sie es so gemacht haben:

(function (msg){/*code here*/});('SO');

Es funktioniert immer noch nicht, aber es funktioniert, wenn Sie das Semikolon entfernen, da der Interpreter Leerzeichen und Wagen ignoriert und den vollständigen Code als eine Anweisung sieht.

(function (msg){/*code here*/})        // This space is ignored by the interpreter
('SO');

Schlussfolgerung: Ein Funktionsaufruf ist kein Funktionsaufruf ohne das ()am Ende, es sei denn, unter bestimmten Bedingungen, z. B. wenn er von einer anderen Funktion aufgerufen wird, dh onload = 'help', wird die Hilfefunktion ausgeführt, obwohl die Klammern nicht enthalten waren. Ich glaube, setTimeout und setInterval erlauben auch diese Art von Funktionsaufruf, und ich glaube auch, dass der Interpreter die Klammern hinter den Kulissen hinzufügt, was uns zurück zu "Ein Funktionsaufruf ist kein Funktionsaufruf ohne Klammern" bringt.

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

Dies ist eine gängige Methode zur Verwendung einer anonymen Funktion als Abschluss, die von vielen JavaScript-Frameworks verwendet wird.

Diese aufgerufene Funktion wird automatisch beim Kompilieren des Codes aufgerufen.

Beim Platzieren ;in der ersten Zeile behandelte der Compiler diese als zwei verschiedene Zeilen. Sie können also nicht die gleichen Ergebnisse wie oben erzielen.

Dies kann auch geschrieben werden als:

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

Weitere Informationen finden Sie unter JavaScript / Anonyme Funktionen .

1. Anonyme Funktionen sind Funktionen, die zur Laufzeit dynamisch deklariert werden. Sie werden als anonyme Funktionen bezeichnet, da sie nicht wie normale Funktionen benannt werden.

   Anonyme Funktionen werden mit dem Funktionsoperator anstelle der Funktionsdeklaration deklariert. Mit dem Funktionsoperator können Sie eine neue Funktion erstellen, wo immer es gültig ist, einen Ausdruck einzufügen. Sie können beispielsweise eine neue Funktion als Parameter für einen Funktionsaufruf deklarieren oder eine Eigenschaft eines anderen Objekts zuweisen.

   Hier ist ein typisches Beispiel für eine benannte Funktion:

   Funktion flyToTheMoon () {alert ("Zoom! Zoom! Zoom!"); } zum Mond fliegen(); Hier ist das gleiche Beispiel, das als anonyme Funktion erstellt wurde:

   var flyToTheMoon = function () {alert ("Zoom! Zoom! Zoom!"); } zum Mond fliegen();

   Für Details lesen Sie bitte hier:

   http://helephant.com/2008/08/23/javascript-anonymous-functions/

Das IIFE unterteilt die Funktion einfach und verbirgt die msgVariable, um den globalen Namespace nicht zu "verschmutzen". In Wirklichkeit sollten Sie es einfach halten und wie unten beschrieben vorgehen, es sei denn, Sie erstellen eine Milliarden-Dollar-Website.

var msg = "later dude";
window.onunload = function(msg){
  alert( msg );
};

Sie können Ihre msgEigenschaft mit einem Namespace versehen aufschlussreichen Modulmuster wie folgt benennen :

var myScript = (function() {
    var pub = {};
    //myscript.msg
    pub.msg = "later dude";
    window.onunload = function(msg) {
        alert(msg);
    };
    //API
    return pub;
}());

Anonyme Funktionen sind als One-Shot-Deal gedacht, bei dem Sie eine Funktion im laufenden Betrieb so definieren, dass sie aus einer von Ihnen bereitgestellten Eingabe eine Ausgabe von Ihnen generiert. Nur dass Sie die Eingabe nicht angegeben haben. Stattdessen haben Sie etwas in die zweite Zeile geschrieben ('SO'). - eine unabhängige Aussage, die nichts mit der Funktion zu tun hat. Was hast du erwartet? :) :)