JavaScript-Funktionen

JavaScript-Funktionen können mehr als nur ein paar Codes einschließen, während auf die Ausführung des Aufrufs gewartet wird. Funktionen haben sich im Laufe der Zeit weiterentwickelt und zu neuen Definitionen, Ausführungsmethoden und Syntaxen geführt. In diesem Beitrag werden einige der derzeitigen Rollen behandelt, die JavaScript-Funktionen bisher gespielt haben.

Das Wissen um die verschiedenen Möglichkeiten, Funktionen auszudrücken und zu definieren, eröffnet die Möglichkeit von eine Logik optimaler implementieren in JavaScript. Möglicherweise können Sie die Interviewfragen auch einfacher beantworten.

Funktionsausdrücke

Wenn Sie einfach eine Funktion mit angeben Funktion Schlüsselwort, optionale Parameter und Code, es ist a Funktion Erklärung.

Wenn Sie diese Deklaration in einen JavaScript-Ausdruck einfügen (wie in einem Zuweisungs- oder Arithmetikausdruck), wird sie zu einem Funktion Ausdruck.

// Funktionsdeklaration function Funktionsname () ; // Funktionsausdruck var function_name = function () ;

Alle JavaScript-Deklarationen werden während der Auswertung angehoben (im Bereich nach oben verschoben). Daher ist das Schreiben eines Funktionsaufrufs vor der Funktionsdeklaration in Ordnung (da die Deklaration trotzdem nach oben verschoben wird)..

Funktionsname (); // Funktionsaufruf [WORKS] Funktion Funktionsname () ;

Funktionsausdrücke werden jedoch nicht gehisst, da die Funktionen Teil der Ausdrücke werden und keine eigenständigen Deklarationen sind.

Funktionsname (); // Funktionsaufruf [WON'T WORK] var Funktionsname = function () ;

Sofort aufgerufener Funktionsausdruck (IIFE)

Es ist ein Funktionsausdruck, dessen Code sofort ausgeführt wird (nur einmal, wenn er ausgewertet wird). Sie können einen erstellen, indem Sie einfach hinzufügen () (Syntax für den Aufruf einer Funktion) direkt nach einem Funktionsausdruck. Sie können anonym sein (kein Name zum Anrufen).

Im Folgenden sind die zwei häufigsten Syntaxarten zum Erstellen von IIFE aufgeführt:

(function optional_funktionsname () // body ());

und

(function optional_function_name () // body) ();

Die Klammer um die Funktionsdeklaration konvertiert sie in einen Ausdruck und fügt sie dann hinzu () nachdem es die Funktion aufruft. Sie können auf andere Weise IIFE erstellen, solange Sie hinzugefügt haben () nach einem Funktionsausdruck (wie unten), aber die bevorzugten Methoden sind die beiden oben genannten.

// Einige Möglichkeiten, IIFEs zu erstellen! Function () / *… * / (); + function () / *… * / (); neue Funktion()  /*… */ ;

IIFE ist ideal für das Schreiben von Code, der nur einmal ausgeführt werden muss, für den Namensraum, das Erstellen von Schließungen, das Erstellen privater Variablen und mehr. Unten ist ein Beispiel für die Verwendung von IIFE.

var page_language = (function () var lang; // Code zum Abrufen der Sprache der Seite return lang;) ();

Der Code zum Abrufen der Sprache der Seite wird nur einmal ausgeführt (vorzugsweise nach dem Laden der Seite). Das Ergebnis wird in gespeichert page_language zur späteren Verwendung.

Methoden

Wenn eine Funktion die Eigenschaft eines Objekts ist, wird sie als Methode bezeichnet. Da eine Funktion auch ein Objekt ist, ist eine Funktion in einer anderen Funktion auch eine Methode. Nachfolgend finden Sie ein Beispiel für eine Methode innerhalb eines Objekts.

var calc = add: function (a, b) return a + b, sub: function (a, b) return a-b console.log (calc.add (1,2)); // 3 console.log (calc.sub (80,2)); // 78

Das hinzufügen und Sub Funktionen sind Methoden von calc Objekt.

Nun zu einer Funktion innerhalb eines Funktionsbeispiels:

function add (a) return Funktion (b) return a + b; console.log (add (1) (2)); // Ausgabe ist 3

Die zurückgegebene anonyme Funktion ist eine Funktionsmethode hinzufügen.

Anmerkung: Seit dem Parameter (ein) der Funktion hinzufügen Im obigen Beispiel steht für den folgenden Funktionsaufruf diese Art von Prozess zur Verfügung Currying.

Konstruktoren

Wenn Sie hinzufügen Neu Schlüsselwort vor einer Funktion und rufen sie auf, wird sie zu einem Konstruktor, der Instanzen erstellt. Nachfolgend ein Beispiel, in dem Konstruktoren zum Erstellen von Instanzen verwendet werden Obst und Werte werden zu jedem hinzugefügt ObstEigenschaften.

Funktion Fruit () var Name, Familie; // Wissenschaftlicher Name und Familie this.getName = function () return name;; this.setName = Funktion (Wert) Name = Wert; this.getFamily = function () return family;; this.setFamily = Funktion (Wert) Familie = Wert;  var Apfel = neue Frucht (); apple.setName ("Malus domestica"); apple.setFamily ("Rosaceae"); var orange = neue Frucht (); orange.setName ("Citrus? ?? ?? ??¢?? ?? sinensis "); orange.setFamily (" Rutaceae "); console.log (orange.getName ()); //" Citrus ?? ?? ??¢?? ?? sinensis "console.log (apple.getName ()); //" Malus domestica "console.log (orange.getFamily ()); //" Rutaceae "

Pfeilfunktionen (ES6-Standard) [Nur in Firefox]

Eine neue Funktionsdefinition aus ES6 Standard bietet eine kürzere Syntax für Funktionsausdrücke. Die Syntax lautet

() => / * body * /

Diese Beispielfunktion:

var sing = function () console.log ('singing…');

ist das gleiche wie:

var sing = () => console.log ('singing…');

Pfeilfunktionen sind anonym und haben keine eigenen diese Wert, diese innen wird es genauso sein wie diese im beiliegenden Code. Sie können ihn auch nicht mit einem Konstruktor ändern Neu Stichwort.

Sie sind nützlich, wenn Sie möchten diese innerhalb einer Funktion, die dieselbe wie außerhalb ist, und ihre kürzere Syntax macht Code zum Schreiben von Funktionen innerhalb der Funktion prägnant (wie unten)

setInterval (function () console.log ('message'), 1000);

setInterval (() => console.log ('message'), 1000);

Generatorfunktionen (ES6-Standard) [Nur in Firefox]

Eine weitere neue Funktionsdefinition aus ES6 Standard ist die Generatorfunktion. Generatorfunktionen können die Ausführung stoppen und fortsetzen. Ihre Syntax lautet:

Funktion * Funktionsname ()

oder

Funktion * Funktionsname ()

Generatorfunktionen erzeugen Iteratoren. Der Iterator Nächster Diese Methode wird dann verwendet, um den Code innerhalb der Generatorfunktion auszuführen, bis die Ausbeute Keyword ist erreicht. Danach wird der iterierte Wert durch den Ausbeute Das Schlüsselwort wird von der Generatorfunktion zurückgegeben und die Ausführung wird angehalten.

Die Generatorfunktion wird erneut ausgeführt, wenn die Nächster Methode wird bis zur nächsten aufgerufen Ausbeute Keyword ist erreicht. Einmal alle Ausbeute Ausdrücke werden ausgeführt, der erhaltene Wert wird zurückgegeben nicht definiert.

Unten ist ein einfaches Beispiel:

function * generator_func (count) for (var i = 0; i Hier ist ein anderes Beispiel:
 Funktion * randomIncrement (i) Ausbeute i + 3; Ausbeute i + 5; Ausbeute i + 10; Ausbeute i + 6;  var itr = randomIncrement (4); console.log (itr.next (). value); // 7 console.log (itr.next (). Value); // 9 console.log (itr.next (). Value); // 14 
 Es gibt auch ein Ausbeute* Ausdruck, der den Wert an eine andere Generatorfunktion übergibt
 Funktion * Früchte (Obst) Ertrag * Gemüse (Obst); Ertrag "Trauben";  function * veggies (fruit) Frucht ausgeben + "und Spinat"; Frucht ergeben + "und Broccoli"; Frucht ergeben + "und Gurke";  var itr = Früchte ("Apfel"); console.log (itr.next (). value); // "Apple and Spinach" console.log (itr.next (). Value); // "Apple and Broccoli" console.log (itr.next (). Value); // "Apple and Cucumber" console.log (itr.next (). Value); // "Trauben" console.log (itr.next (). Value); //nicht definiert 
 Generatorfunktionen sind nützlich, wenn Sie die Werte nacheinander an Ihrem bevorzugten Punkt im Code durchgehen möchten, indem Sie sie anhalten und nicht in einem Durchgang wie in einem Array.
 Fazit
 Im Folgenden finden Sie eine Liste mit Verweisen, in denen Sie Links zu Verweisen und Artikeln finden, die zu verschiedenen Themen gesondert eingehen. Die beiden ES6-Standardfunktionen funktionieren derzeit nur in Firefox.
 Verweise
 ECMAScript-Sprache: Funktionen und Klassen
 Sofort aufgerufene Funktionsausdruck (IIFE)
 Die Grundlagen der ES6-Generatoren
 Pfeilfunktionen
 Funktion - Mozilla Developer Network