Häufig müssen wir an vielen Stellen des Skripts eine ähnliche Aktion ausführen.
Zum Beispiel müssen wir eine gut aussehende Nachricht anzeigen, wenn sich ein Besucher anmeldet, sich abmeldet und möglicherweise woanders.
Funktionen sind die wichtigsten „Bausteine“ des Programms. Sie ermöglichen es, den Code viele Male ohne Wiederholung aufzurufen.
Wir haben bereits Beispiele für integrierte Funktionen gesehen, wie alert(message), prompt(message, default) und confirm(question). Aber wir können auch eigene Funktionen erstellen.,
Funktionsdeklaration
Um eine Funktion zu erstellen, können wir eine Funktionsdeklaration verwenden.
Es sieht so aus:
function showMessage() { alert( 'Hello everyone!' );}Das function Schlüsselwort geht zuerst, dann geht der Name der Funktion, dann eine Liste von Parametern zwischen den Klammern (kommagetrennt, leer im obigen Beispiel) und schließlich der Code der Funktion, auch „der Funktionskörper“ genannt, zwischen lockige Klammern.,
function name(parameters) { ...body...}Unsere neue Funktion kann mit ihrem Namen aufgerufen werden: showMessage().
Zum Beispiel:
function showMessage() { alert( 'Hello everyone!' );}showMessage();showMessage();Der Aufruf showMessage() führt den Code der Funktion aus. Hier sehen wir die Nachricht zweimal.
Dieses Beispiel zeigt deutlich einen der Hauptzwecke von Funktionen: um Code-Duplizierung zu vermeiden.,
Wenn wir jemals die Nachricht oder die Art und Weise ändern müssen, wie sie angezeigt wird, reicht es aus, den Code an einer Stelle zu ändern: der Funktion, die ihn ausgibt.
Lokale Variablen
Eine innerhalb einer Funktion deklarierte Variable ist nur innerhalb dieser Funktion sichtbar.
Zum Beispiel:
Äußere Variablen
Eine Funktion kann auch auf eine äußere Variable zugreifen, zum Beispiel:
let userName = 'John';function showMessage() { let message = 'Hello, ' + userName; alert(message);}showMessage(); // Hello, JohnDie Funktion hat vollen Zugriff auf die äußere Variable. Es kann es auch ändern.,
Zum Beispiel:
Die äußere Variable wird nur verwendet, wenn es keine lokale gibt.
Wenn innerhalb der Funktion eine gleichnamige Variable deklariert wird, schattiert sie die äußere. Im folgenden Code verwendet die Funktion beispielsweise die lokale userName. Die äußere wird ignoriert:
Variablen, die außerhalb einer Funktion deklariert sind, wie die äußere userName im obigen Code werden als global bezeichnet.
Globale Variablen sind von jeder Funktion aus sichtbar (es sei denn, sie werden von Einheimischen beschattet).,
Es empfiehlt sich, die Verwendung globaler Variablen zu minimieren. Moderner Code hat wenige oder keine Globals. Die meisten Variablen befinden sich in ihren Funktionen. Manchmal können sie jedoch nützlich sein, um Daten auf Projektebene zu speichern.
Parameter
Wir können beliebige Daten mit Parametern (auch als Funktionsargumente bezeichnet) an Funktionen übergeben .
Im folgenden Beispiel hat die Funktion zwei Parameter: from und text.,
Wenn die Funktion in den Zeilen (*) und aufgerufen wird, werden die angegebenen Werte in lokale Variablen kopiert from und text. Dann verwendet die Funktion sie.
Hier ist ein weiteres Beispiel: Wir haben eine Variable from und übergeben sie an die Funktion., Bitte beachten Sie: Die Funktion ändert from, aber die Änderung wird außerhalb nicht angezeigt, da eine Funktion immer eine Kopie des Werts erhält:
Standardwerte
Wenn kein Parameter angegeben wird, wird sein Wert undefined.
Zum Beispiel kann die oben erwähnte Funktion showMessage(from, text) mit einem einzigen Argument aufgerufen werden:
showMessage("Ann");Das ist kein Fehler. Ein solcher Aufruf würde "*Ann*: undefined"ausgeben., Es gibt keine text, daher wird angenommen, dass .,
Wenn wir in diesem Fall eine „default“ text verwenden möchten, können wir diese nach =:
function showMessage(from, text = "no text given") { alert( from + ": " + text );}showMessage("Ann"); // Ann: no text given Wenn nun der Parameter textnicht übergeben wird, erhält er den Wert"no text given"
Hier "no text given" ist eine Zeichenfolge, kann aber ein komplexerer Ausdruck sein, der nur ausgewertet und zugewiesen wird, wenn der Parameter fehlt., Dies ist also auch möglich:
In JavaScript wird bei jedem Aufruf der Funktion ohne den jeweiligen Parameter ein Standardparameter ausgewertet.
Im obigen Beispiel wird anotherFunction() jedes Mal aufgerufen, wenn showMessage() ohne den Parameter text aufgerufen wird.
Alternative Standardparameter
Manchmal ist es sinnvoll, Standardwerte für Parameter nicht in der Funktionsdeklaration, sondern zu einem späteren Zeitpunkt während der Ausführung festzulegen.,parameter, wir können vergleichen es mit undefined:
function showMessage(text) { if (text === undefined) { text = 'empty message'; } alert(text);}showMessage(); // empty message…Oder wir könnten verwenden die|| operator:
// if text parameter is omitted or "" is passed, set it to 'empty'function showMessage(text) { text = text || 'empty'; ...} Moderne JavaScript-Engines unterstützen den Null-koaleszierenden Operator ??, es ist besser, wenn falsche Werte wie0als regulär betrachtet werden:
Rückgabe eines Werts
Eine Funktion kann einen Wert zurückgeben zurück in den aufrufenden Code als das Ergebnis.,
Das einfachste Beispiel wäre eine Funktion, die zwei Werte summiert:
function sum(a, b) { return a + b;}let result = sum(1, 2);alert( result ); // 3Die Direktive return kann sich an jeder Stelle der Funktion befinden. Wenn die Ausführung sie erreicht, stoppt die Funktion und der Wert wird an den aufrufenden Code zurückgegeben (zugewiesen an result oben).
Es kann viele Vorkommen von return in einer einzigen Funktion geben. Zum Beispiel:
Es ist möglich, return ohne Wert zu verwenden., That causes the function to exit immediately.
For example:
function showMovie(age) { if ( !checkAge(age) ) { return; } alert( "Showing you the movie" ); // (*) // ...}In the code above, if checkAge(age) returns false, then showMovie won’t proceed to the alert.,
return und dem WertFür einen langen Ausdruck in return könnte es verlockend sein, ihn in eine separate Zeile zu setzen:
return (some + long + expression + or + whatever * f(a) + f(b))Das funktioniert nicht, da JavaScript nach return ein Semikolon annimmt. Das funktioniert genauso wie:
return; (some + long + expression + or + whatever * f(a) + f(b))Es wird also effektiv eine leere Rückgabe.,
Wenn der zurückgegebene Ausdruck über mehrere Zeilen gewickelt werden soll, sollten wir ihn in derselben Zeile wie return. Oder setzen Sie zumindest die öffnenden Klammern wie folgt ein:
return ( some + long + expression + or + whatever * f(a) + f(b) )Und es wird genauso funktionieren, wie wir es erwarten.
Benennen einer Funktion
Funktionen sind Aktionen. Ihr Name ist also normalerweise ein Verb. Es sollte kurz und so genau wie möglich sein und beschreiben, was die Funktion tut, damit jemand, der den Code liest, einen Hinweis darauf erhält, was die Funktion tut.,
Es ist eine weit verbreitete Praxis, eine Funktion mit einem verbalen Präfix zu starten, das die Aktion vage beschreibt. Es muss eine Vereinbarung innerhalb des Teams über die Bedeutung der Präfixe geben.
Zum Beispiel zeigen Funktionen, die mit "show" beginnen, normalerweise etwas.
Funktion beginnend mit…
Beispiele für solche Namen:
Mit Präfixen, ein Blick auf einen Funktionsnamen gibt ein Verständnis, welche Art von Arbeit es tut und welche Art von Wert es zurückgibt.,
Eine Funktion sollte genau das tun, was unter ihrem Namen vorgeschlagen wird, nicht mehr.
Zwei unabhängige Aktionen verdienen normalerweise zwei Funktionen, auch wenn sie normalerweise zusammen aufgerufen werden (in diesem Fall können wir eine dritte Funktion erstellen, die diese beiden aufruft).
Einige Beispiele für das Brechen dieser Regel:
-
getAge– wäre schlecht, wenn es einealertmit dem Alter zeigt (sollte nur erhalten)., -
createForm– wäre schlecht, wenn es das Dokument ändert und ein Formular hinzufügt (sollte es nur erstellen und zurückgeben). - – wäre schlecht, wenn es die
access granted/deniedNachricht anzeigt (sollte nur die Überprüfung durchführen und das Ergebnis zurückgeben).
Diese Beispiele nehmen gemeinsame Bedeutungen von Präfixen an. Sie und Ihr Team können sich auf andere Bedeutungen einigen, aber normalerweise sind sie nicht viel anders. In jedem Fall sollten Sie genau verstehen, was ein Präfix bedeutet, was eine vorangestellte Funktion kann und was nicht., Alle Gleich Präfix-Funktionen sollten den Regeln gehorchen. Und das Team sollte das Wissen teilen.
Funktionen, die sehr oft verwendet werden, haben manchmal ultrakurze Namen.
Das jQuery-Framework definiert beispielsweise eine Funktion mit $. Die Lodash-Bibliothek hat ihre Kernfunktion mit dem Namen _.
Dies sind Ausnahmen. Im Allgemeinen sollten Funktionsnamen prägnant und beschreibend sein.
Funktionen == Kommentare
Funktionen sollten kurz sein und genau das zu tun eine Sache., Wenn das Ding groß ist, lohnt es sich vielleicht, die Funktion in ein paar kleinere Funktionen aufzuteilen. Manchmal ist es vielleicht nicht so einfach, dieser Regel zu folgen, aber es ist definitiv eine gute Sache.
Eine separate Funktion ist nicht nur einfacher zu testen und zu debuggen – ihre Existenz ist ein großartiger Kommentar!Vergleichen Sie beispielsweise die beiden Funktionen showPrimes(n) unten. Jeder gibt Primzahlen bis zu naus.,
Die erste Variante verwendet eine Beschriftung:
function showPrimes(n) { nextPrime: for (let i = 2; i < n; i++) { for (let j = 2; j < i; j++) { if (i % j == 0) continue nextPrime; } alert( i ); // a prime }}Die zweite Variante verwendet eine zusätzliche Funktion isPrime(n) um auf Primalität zu testen:
Die zweite Variante ist einfacher zu verstehen, nicht wahr? Anstelle des Codeteils sehen wir einen Namen der Aktion (isPrime). Manchmal beziehen sich die Leute auf einen solchen Code als selbstbeschreibend.
So können Funktionen erstellt werden, auch wenn wir sie nicht wiederverwenden möchten. Sie strukturieren den Code und machen ihn lesbar.,
Zusammenfassung
Eine Funktionsdeklaration sieht folgendermaßen aus:
function name(parameters, delimited, by, comma) { /* code */}- Werte, die als Parameter an eine Funktion übergeben werden, werden in ihre lokalen Variablen kopiert.
- Eine Funktion kann auf äußere Variablen zugreifen. Aber es funktioniert nur von innen nach außen. Der Code außerhalb der Funktion sieht seine lokalen Variablen nicht.
- Eine Funktion kann einen Wert zurückgeben. Wenn dies nicht der Fall ist, ist das Ergebnis
undefined.,
Um den Code sauber und leicht verständlich zu machen, wird empfohlen, hauptsächlich lokale Variablen und Parameter in der Funktion zu verwenden, keine äußeren Variablen.
Es ist immer einfacher, eine Funktion zu verstehen, die Parameter erhält, mit ihnen arbeitet und ein Ergebnis zurückgibt als eine Funktion, die keine Parameter erhält, aber äußere Variablen als Nebeneffekt ändert.
Funktionsnamen:
- Ein Name sollte klar beschreiben, was die Funktion tut. Wenn wir einen Funktionsaufruf im Code sehen, gibt uns ein guter Name sofort ein Verständnis dafür, was er tut und zurückgibt.,
- Eine Funktion ist eine Aktion, daher sind Funktionsnamen normalerweise verbal.
- Es existieren viele bekannte Funktion Präfixe wie
create…,show…,get…,check…und so weiter. Verwenden Sie sie, um anzuzeigen, was eine Funktion tut.
Funktionen sind die Hauptbausteine von Skripten. Jetzt haben wir die Grundlagen behandelt, damit wir sie tatsächlich erstellen und verwenden können. Aber das ist nur der Anfang des Weges. Wir werden viele Male zu ihnen zurückkehren und uns eingehender mit ihren erweiterten Funktionen befassen.
Schreibe einen Kommentar