Erläutern Sie die gekapselte anonyme Funktionssyntax

Zusammenfassung

Können Sie die Gründe für die Syntax für gekapselte anonyme Funktionen in JavaScript erläutern? Warum funktioniert das: (function(){})();aber das nicht : function(){}();?

Was ich weiß

In JavaScript erstellt man eine benannte Funktion wie folgt:

function twoPlusTwo(){
    alert(2 + 2);
}
twoPlusTwo();

Sie können auch eine anonyme Funktion erstellen und einer Variablen zuweisen:

var twoPlusTwo = function(){
    alert(2 + 2);
};
twoPlusTwo();

Sie können einen Codeblock kapseln, indem Sie eine anonyme Funktion erstellen, diese in Klammern setzen und sofort ausführen:

(function(){
    alert(2 + 2);
})();

Dies ist nützlich, wenn Sie modularisierte Skripts erstellen, um zu vermeiden, dass der aktuelle oder globale Bereich mit möglicherweise widersprüchlichen Variablen überfüllt wird - wie im Fall von Greasemonkey-Skripten, jQuery-Plugins usw.

Jetzt verstehe ich, warum das funktioniert. Die Klammern schließen den Inhalt ein und zeigen nur das Ergebnis an (ich bin sicher, es gibt einen besseren Weg, dies zu beschreiben), z. B. mit (2 + 2) === 4.

Was ich nicht verstehe

Aber ich verstehe nicht, warum das nicht genauso gut funktioniert:

function(){
    alert(2 + 2);
}();

Kannst du mir das erklären?

Es funktioniert nicht, weil es als analysiert FunctionDeclarationwird und die Namenskennung von Funktionsdeklarationen obligatorisch ist .

Wenn Sie es mit Klammern umgeben, wird es als a ausgewertet FunctionExpression, und Funktionsausdrücke können benannt werden oder nicht.

Die Grammatik von a FunctionDeclarationsieht so aus:

function Identifier ( FormalParameterListopt ) { FunctionBody }

Und FunctionExpressions:

function Identifieropt ( FormalParameterListopt ) { FunctionBody }

Wie Sie sehen können, ist das Token Identifier(Identifier opt ) FunctionExpressionoptional, daher können wir einen Funktionsausdruck ohne definierten Namen haben:

(function () {
    alert(2 + 2);
}());

Oder benannter Funktionsausdruck:

(function foo() {
    alert(2 + 2);
}());

Die Klammern (formal als Gruppierungsoperator bezeichnet ) können nur Ausdrücke umgeben, und ein Funktionsausdruck wird ausgewertet.

Die beiden Grammatikproduktionen können mehrdeutig sein und genau gleich aussehen, zum Beispiel:

function foo () {} // FunctionDeclaration

0,function foo () {} // FunctionExpression

Der Parser weiß, ob es sich um ein FunctionDeclarationoder ein handelt FunctionExpression, je nachdem, in welchem Kontext es angezeigt wird.

Im obigen Beispiel ist der zweite ein Ausdruck, da der Komma-Operator auch nur Ausdrücke verarbeiten kann.

Andererseits FunctionDeclarationkönnte s tatsächlich nur im sogenannten " Program" Code erscheinen, dh Code außerhalb des globalen Bereichs und innerhalb FunctionBodyanderer Funktionen.

Funktionen innerhalb von Blöcken sollten vermieden werden, da sie zu einem unvorhersehbaren Verhalten führen können, z.

if (true) {
  function foo() {
    alert('true');
  }
} else {
  function foo() {
    alert('false!');
  }
}

foo(); // true? false? why?

Der obige Code sollte tatsächlich a erzeugen SyntaxError , da a Blocknur Anweisungen enthalten kann (und die ECMAScript-Spezifikation keine Funktionsanweisung definiert), die meisten Implementierungen jedoch tolerant sind und einfach die zweite Funktion übernehmen, die alarmiert 'false!'.

Die Mozilla-Implementierungen - Nashorn, SpiderMonkey - haben ein anderes Verhalten. Ihre Grammatik enthält eine nicht standardmäßige Funktionsanweisung, was bedeutet, dass die Funktion bei bewertet wird Laufzeit und nicht zur Analysezeit wird, wie dies bei FunctionDeclarations der . In diesen Implementierungen wird die erste Funktion definiert.

Funktionen können auf verschiedene Arten deklariert werden. Vergleichen Sie Folgendes :

1- Eine Funktion, die mit dem der Variablen multiplizierten Funktionskonstruktor multipliziert wurde :

var multiply = new Function("x", "y", "return x * y;");

2- Eine Funktionsdeklaration einer Funktion namens multiplizieren :

function multiply(x, y) {
    return x * y;
}

3- Ein der Variablen multiplizierter Funktionsausdruck multiplizieren :

var multiply = function (x, y) {
    return x * y;
};

4- Ein benannter Funktionsausdruck func_name , der der Variablen multiplizieren zugewiesen ist :

var multiply = function func_name(x, y) {
    return x * y;
};

Obwohl dies eine alte Frage und Antwort ist, wird ein Thema behandelt, das bis heute viele Entwickler für eine Schleife wirft. Ich kann die Anzahl der von mir befragten JavaScript-Entwicklerkandidaten nicht zählen, die mir den Unterschied zwischen einer Funktionsdeklaration und einem Funktionsausdruck nicht sagen konnten und die keine Ahnung hatten, was ein sofort aufgerufener Funktionsausdruck ist.

Ich möchte jedoch eine sehr wichtige Sache erwähnen, nämlich, dass Premasagars Code-Snippet nicht funktionieren würde, selbst wenn er ihm eine Namenskennung gegeben hätte.

function someName() {
    alert(2 + 2);
}();

Der Grund, warum dies nicht funktionieren würde, ist, dass die JavaScript-Engine dies als Funktionsdeklaration interpretiert, gefolgt von einem völlig unabhängigen Gruppierungsoperator, der keinen Ausdruck enthält, und Gruppierungsoperatoren müssen einen Ausdruck enthalten. Laut JavaScript entspricht der obige Codeausschnitt dem folgenden.

function someName() {
    alert(2 + 2);
}

();

Eine andere Sache, auf die ich hinweisen möchte, die für manche Menschen von Nutzen sein kann, ist, dass jede Namenskennung, die Sie für einen Funktionsausdruck angeben, im Kontext des Codes so gut wie nutzlos ist, außer innerhalb der Funktionsdefinition selbst.

var a = function b() {
    // do something
};
a(); // works
b(); // doesn't work

var c = function d() {
    window.setTimeout(d, 1000); // works
};

Natürlich ist die Verwendung von Namenskennungen mit Ihren Funktionsdefinitionen immer hilfreich, wenn es um das Debuggen von Code geht, aber das ist etwas ganz anderes ... :-)

Gute Antworten wurden bereits veröffentlicht. Ich möchte jedoch darauf hinweisen, dass Funktionsdeklarationen einen leeren Abschlussdatensatz zurückgeben:

14.1.20 - Laufzeitsemantik: Auswertung

FunctionDeclaration : function BindingIdentifier ( FormalParameters ) { FunctionBody }

1. Geben Sie NormalCompletion (leer) zurück.

Diese Tatsache ist nicht leicht zu beobachten, da die meisten Methoden zum Abrufen des zurückgegebenen Werts die Funktionsdeklaration in einen Funktionsausdruck konvertieren. Allerdings evalzeigt es:

var r = eval("function f(){}");
console.log(r); // undefined

Das Aufrufen eines leeren Abschlussdatensatzes macht keinen Sinn. Deshalb function f(){}()kann ich nicht arbeiten. Tatsächlich versucht die JS-Engine nicht einmal, sie aufzurufen. Die Klammern werden als Teil einer anderen Anweisung betrachtet.

Wenn Sie die Funktion jedoch in Klammern setzen, wird sie zu einem Funktionsausdruck:

var r = eval("(function f(){})");
console.log(r); // function f(){}

Funktionsausdrücke geben ein Funktionsobjekt zurück. Und deshalb können Sie es nennen : (function f(){})().

In Javascript wird dies als sofort aufgerufener Funktionsausdruck (IIFE) bezeichnet .

Um es zu einem Funktionsausdruck zu machen, müssen Sie:

1. füge es mit () bei

2. Stellen Sie einen leeren Operator davor

3. Weisen Sie es einer Variablen zu.

Andernfalls wird es als Funktionsdefinition behandelt, und Sie können es dann nicht gleichzeitig auf folgende Weise aufrufen / aufrufen:

 function (arg1) { console.log(arg1) }(); 

Das obige gibt Ihnen Fehler. Weil Sie einen Funktionsausdruck nur sofort aufrufen können.

Dies kann auf verschiedene Arten erreicht werden: Weg 1:

(function(arg1, arg2){
//some code
})(var1, var2);

Weg 2:

(function(arg1, arg2){
//some code
}(var1, var2));

Weg 3:

void function(arg1, arg2){
//some code
}(var1, var2);

Weg 4:

  var ll = function (arg1, arg2) {
      console.log(arg1, arg2);
  }(var1, var2);

Alle oben genannten Elemente rufen sofort den Funktionsausdruck auf.

Ich habe nur eine weitere kleine Bemerkung. Ihr Code funktioniert mit einer kleinen Änderung:

var x = function(){
    alert(2 + 2);
}();

Ich verwende die obige Syntax anstelle der weiter verbreiteten Version:

var module = (function(){
    alert(2 + 2);
})();

weil ich es nicht geschafft habe, dass der Einzug für Javascript-Dateien in vim richtig funktioniert. Es scheint, dass vim die geschweiften Klammern in offenen Klammern nicht mag.

Vielleicht wäre die kürzere Antwort das

function() { alert( 2 + 2 ); }

ist ein Funktionsliteral , das eine (anonyme) Funktion definiert. Ein zusätzliches () -Paar, das als Ausdruck interpretiert wird, wird auf oberster Ebene nicht erwartet, sondern nur Literale.

(function() { alert( 2 + 2 ); })();

befindet sich in einer Ausdrucksanweisung , die eine anonyme Funktion aufruft .

(function(){
     alert(2 + 2);
 })();

Oben ist eine gültige Syntax angegeben, da alles, was in Klammern übergeben wird, als Funktionsausdruck betrachtet wird.

function(){
    alert(2 + 2);
}();

Oben ist keine gültige Syntax. Da der Java-Skriptsyntax-Parser nach dem Funktionsschlüsselwort nach dem Funktionsnamen sucht, da er nichts findet, wird ein Fehler ausgegeben.

Sie können es auch wie folgt verwenden:

! function() { console.log('yeah') }()

oder

!! function() { console.log('yeah') }()

!- negation op konvertiert die fn-Definition in einen fn-Ausdruck, daher können Sie sie sofort mit aufrufen (). Gleich wie mit 0,fn defodervoid fn def

Sie können mit Parameter-Argumenten wie verwendet werden

var x = 3; 
var y = 4;

(function(a,b){alert(a + b)})(x,y)

würde als 7 ergeben

Diese zusätzliche Klammer erstellt zusätzliche anonyme Funktionen zwischen dem globalen Namespace und der anonymen Funktion, die den Code enthält. Und in Javascript-Funktionen, die in anderen Funktionen deklariert sind, kann nur auf den Namespace der übergeordneten Funktion zugegriffen werden, die sie enthält. Da zwischen dem globalen Bereich und dem tatsächlichen Code-Scoping ein zusätzliches Objekt (anonyme Funktion) besteht, wird es nicht beibehalten.