Funktionsausdrücke

Funktionsausdrücke sind Funktionen wo ein Ausdruck erwartet wird. Sie werden häufig auf Funktionen Ausdrücke als Werte, die einer Variablen zugewiesen sind. Für eine Funktionsdeklaration ist zwar immer ein Name erforderlich, aber Sie können Funktionsausdrücke verwenden, um anonyme Funktionen zu erstellen. Dazu lassen Sie die Kennzeichnung einfach weg und setzen nach dem Keyword function ein Paar Klammern mit optionalen Parametern:

const myVariable = function() { };

Sie können diese dann anrufen. Funktionsausdrücke mit der ID der Variablen:

const myVariable = function() {
    console.log( "This is my function." );
};

myVariable();
> "This is my function."

Sie können Funktionsausdrücke auch verwenden, um benannte Funktionen mit einer Syntax zu erstellen. ähnlich wie Funktionsdeklarationen:

const myVariable = function myFunction() {
    console.log( "This is my function." );
};

myVariable();
> "This is my function."

Im Gegensatz zu Funktionsdeklarationen kann ein benannter Funktionsausdruck jedoch Zugriff über Funktionsnamen nur in der Funktion selbst:

const myVariable = function myFunction() {
  console.log( `I'm a ${ typeof myFunction }.`);
};

typeof myFunction;
> "undefined"

typeof myVariable;
> "function"

myVariable();
> "I'm a function."

Namen, die Funktionsausdrücken zugeordnet sind, sind vor allem für die Fehlerbehebung hilfreich. Ein benannter Funktionsausdruck kann sich auch rekursiv aufrufen, was in der modernen Entwicklung jedoch nicht sehr häufig vorkommt:

const myVariable = function myFunction() {
    console.log( "One second elapsed." );
    setTimeout( myFunction, 1000 );
};

setTimeout( myVariable, 1000 );
> "One second elapsed."
> "One second elapsed."
> "One second elapsed."
…

Ausdrücke für Pfeilfunktionen

Pfeilfunktionsausdrücke (oft als „Pfeilfunktionen“ oder selten als „Lambda“ bezeichnet) -Funktionen") wurden in ES6 eingeführt, um eine prägnante Syntax zum Erstellen anonyme Funktionsausdrücke mit spezifischen Verhaltensweisen.

Sie können eine Pfeilfunktion überall dort erstellen, wo ein Ausdruck erwartet wird, z. B. als Wert, der einer Variablen zugewiesen ist. In ihrer gebräuchlichsten Form besteht eine Pfeilfunktion aus einem Paar übereinstimmender Klammern, die null oder mehr Parameter enthalten, einem Pfeil, der aus einem einzigen Gleichheitszeichen und einem größeren-als-Zeichen (=>) besteht, und einem Paar übereinstimmender geschweifter Klammern, die den Funktionskörper enthalten:

const myFunction = () => {};

Unter bestimmten Bedingungen können Sie die Syntax noch kompakter gestalten. Wenn Sie nur einen Parameter verwenden, können Sie die Anfangsklammern weglassen:

const myFunction = myParameter => {};

Wenn der Funktionskörper den Wert eines einzelnen Ausdrucks zurückgeben soll, sind weder geschweifte Klammern noch das Keyword return erforderlich:

const myFunction = () => 2 + 2

myFunction()
> 4

Pfeilfunktionen sind einzigartig, da sie keinen eigenen Kontext für arguments oder this-Werte. Stattdessen übernehmen sie beide aus der Pfeilfunktion lexisch einschließende Umgebung, die nächstgelegene einschließende Funktion, die diese Kontexte bereitstellt.

function myParentFunction() {
    this.myProperty = true;
    let myFunction = () => {
            console.log( this );
    }
    myFunction();
};

let myInstance = new myParentFunction();
> Object { myProperty: true }

Pfeilfunktionen aufrufen

Bei Pfeilfunktionen werden Argumente nicht auf die gleiche Weise wie bei anderen Funktionstypen gebunden. Ein arguments-Objekt im Text einer Pfeilfunktion übernimmt seinen Wert von der Pfeilfunktion am nächsten, lexisch einschließende Umgebung:

function myFunction() {
    let myArrowFunction = () => {
            console.log( arguments[ 0 ] );
    }
    myArrowFunction( true );
};

myFunction( false );
> false

In diesem Beispiel ruft eine äußere Funktion, die mit dem Argument false aufgerufen wird, ein innere Pfeilfunktion mit dem Argument true. Da das arguments-Objekt innerhalb der Pfeilfunktion auf die Bindung in der äußeren Funktion verweist, wird in der inneren Funktion der false der äußeren Funktion protokolliert.

Wenn kein arguments-Objekt vom übergeordneten Kontext übernommen werden kann, zeigt der Pfeil arguments-Objekt der Funktion nicht definiert ist. Der Versuch, darauf zuzugreifen, führt zu einer Fehler:

let myArrowFunction = () => {
    console.log(arguments);
};
myArrowFunction( true );
> Uncaught ReferenceError: arguments is not defined

Sofort aufgerufene Funktionsausdrücke (IIFE)

Ein sofort aufgerufener Funktionsausdruck (IIFE), manchmal auch als „selbstausführende anonyme Funktion“, ist ein Funktionsausdruck, der sofort nach der Definition. Ein IIFE verwendet einen Funktionsausdruck, der von Funktion in einem Gruppierungsoperator einschließen Ein zweites übereinstimmendes Klammernpaar ruft dann die Funktion entweder sofort auf nach der Funktionsdefinition selbst oder unmittelbar nach der Gruppierung . Wenn Sie eine Standardfunktion verwenden, gibt es keinen praktischen Unterschied. zwischen den beiden Ansätzen:

(function() {
    console.log( "IIFE.")
    }
)();
> "IIFE."

(function() {
    console.log( "IIFE.")
    }
());
> "IIFE."

Im ersten Beispiel wird der gruppierte Funktionsausdruck aufgerufen. Das zweite Beispiel eine Funktionsdeklaration innerhalb der Gruppierungsoperatoren aufruft, und das Endergebnis als gruppierter Ausdruck ausgewertet. Das Ergebnis ist in beiden Fällen dasselbe.

Es gibt jedoch einen Unterschied, wenn Ihre IIFE eine Pfeilfunktion ist. In dieser müssen sich die zum Aufrufen der Funktion verwendeten Klammern außerhalb der Gruppierung da eine Pfeilfunktion allein kein Ausdruck ist, in einem Kontext erstellt werden, in dem ein Ausdruck erwartet wird. Der Versuch, die innerhalb des Bereichs der Gruppierungsoperatoren zum Aufrufen einer Pfeilfunktion, die noch nicht im Kontext einer Ausdruck:

( () => {
    console.log( "IIFE." );
}() );
> Uncaught SyntaxError: missing ) in parenthetical

Da die Gruppierungsoperatoren einen Ausdruck erwarten, kann die Pfeilfunktion innerhalb definiert, sodass die darauffolgenden Klammern die gruppierte Ausdruck:

( () => {
    console.log( "IIFE." );
} )();
> "IIFE."

In Legacy-Anwendungen wurden häufig IIFEs verwendet, um den Gültigkeitsbereich zu verwalten, insbesondere um zu vermeiden, dass der globale Gültigkeitsbereich mit Variablen im Funktionsumfang und Funktionsdeklarationen überladen wird. Vor der Einführung des Block-Bereichs In ES6 war es üblich, ein ganzes Skript in eine IIFE-Datei zu kapseln, um zu verhindern, versehentlicher Verschmutzung des globalen Geltungsbereichs.

Wissen testen