Funktionen

Beschreibung

Funktionswerte sind typischerweise Instanzen von Function. Siehe Function fr Informationen zu Eigenschaften und Methoden von Function-Objekten. Aufrufbare Werte veranlassen typeof, "function" anstelle von "object" zurckzugeben.

Rckgabewert

Standardmig ist der Rckgabewert undefined, wenn die Ausfhrung einer Funktion nicht mit einer return-Anweisung endet oder wenn das return-Schlsselwort keinen Ausdruck danach hat. Die return-Anweisung ermglicht es Ihnen, einen beliebigen Wert aus der Funktion zurckzugeben. Ein Funktionsaufruf kann nur einen Wert zurckgeben, aber man kann den Effekt des Zurckgebens mehrerer Werte simulieren, indem man ein Objekt oder Array zurckgibt und das Ergebnis destrukturiert.

bergabe von Argumenten

Parameter und Argumente haben leicht unterschiedliche Bedeutungen, aber in den MDN-Web-Dokumentationen verwenden wir sie oft austauschbar. Fr einen schnellen berblick:

function formatNumber(num) {
  return num.toFixed(2);
}

formatNumber(2);

In diesem Beispiel wird die Variable num als Parameter der Funktion bezeichnet: Sie wird in der durch Klammern eingeschlossenen Liste der Funktionsdefinition deklariert. Die Funktion erwartet, dass der num-Parameter eine Zahl ist obwohl dies in JavaScript nicht ohne Laufzeitberprfung erzwungen werden kann. Im formatNumber(2)-Aufruf ist die Zahl 2 das Argument der Funktion: Es ist der Wert, der bei dem Funktionsaufruf tatschlich an die Funktion bergeben wird. Der Argumentwert kann im Funktionskrper ber den entsprechenden Parameternamen oder das arguments-Objekt zugegriffen werden.

Argumente werden immer per Wert und nie per Referenz bergeben. Das bedeutet, dass, wenn eine Funktion einen Parameter neu zuweist, sich der Wert auerhalb der Funktion nicht ndert. Genauer gesagt werden Objektargumente per Sharing bergeben, was bedeutet, dass, wenn die Eigenschaften des Objekts mutiert werden, die nderung sich auerhalb der Funktion auswirkt. Zum Beispiel:

function updateBrand(obj) {
  // Mutating the object is visible outside the function
  obj.brand = "Toyota";
  // Try to reassign the parameter, but this won't affect
  // the variable's value outside the function
  obj = null;
}

const car = {
  brand: "Honda",
  model: "Accord",
  year: 1998,
};

console.log(car.brand); // Honda

// Pass object reference to the function
updateBrand(car);

// updateBrand mutates car
console.log(car.brand); // Toyota

Das this-Schlsselwort bezieht sich auf das Objekt, auf dem die Funktion aufgerufen wird es bezieht sich nicht auf die aktuell ausgefhrte Funktion, daher mssen Sie innerhalb des Funktionskrpers den Funktionswert mit seinem Namen referenzieren.

Definition von Funktionen

Im Groen und Ganzen hat JavaScript vier Arten von Funktionen:

• Regulre Funktion: kann alles zurckgeben; wird nach dem Aufruf immer bis zum Ende ausgefhrt
• Generatorfunktion: gibt ein Generator-Objekt zurck; kann mit dem yield-Operator pausiert und fortgesetzt werden
• Async-Funktion: gibt ein Promise zurck; kann mit dem await-Operator pausiert und fortgesetzt werden
• Async-Generatorfunktion: gibt ein AsyncGenerator-Objekt zurck; es knnen sowohl die await- als auch die yield-Operatoren verwendet werden

Fr jede Art von Funktion gibt es mehrere Mglichkeiten, sie zu definieren:

Deklaration

function, function*, async function, async function*

Ausdruck

function, function*, async function, async function*

Konstruktor

Function(), GeneratorFunction(), AsyncFunction(), AsyncGeneratorFunction()

Zustzlich gibt es spezielle Syntaxen zur Definition von Pfeilfunktionen und Methoden, die przisere Semantiken fr ihre Nutzung bieten. Klassen sind konzeptuell keine Funktionen (da sie einen Fehler werfen, wenn sie ohne new aufgerufen werden), erben aber auch von Function.prototype und haben typeof MyClass === "function".

// Constructor
const multiply = new Function("x", "y", "return x * y");

// Declaration
function multiply(x, y) {
  return x * y;
} // No need for semicolon here

// Expression; the function is anonymous but assigned to a variable
const multiply = function (x, y) {
  return x * y;
};
// Expression; the function has its own name
const multiply = function funcName(x, y) {
  return x * y;
};

// Arrow function
const multiply = (x, y) => x * y;

// Method
const obj = {
  multiply(x, y) {
    return x * y;
  },
};

Alle Syntaxen tun ungefhr dasselbe, aber es gibt einige subtile Verhaltensunterschiede.

• Der Function()-Konstruktor, der function-Ausdruck und die function-Deklaration erstellen vollwertige Funktionsobjekte, die mit new konstruiert werden knnen. Allerdings knnen Pfeilfunktionen und Methoden nicht konstruiert werden. Asynchrone Funktionen, Generatorfunktionen und asynchrone Generatorfunktionen sind unabhngig von der Syntax nicht konstruierbar.
• Die function-Deklaration erstellt Funktionen, die gehoistet werden. Andere Syntaxen hoisten die Funktion nicht und der Funktionswert ist erst nach der Definition sichtbar.
• Die Pfeilfunktion und der Function()-Konstruktor erstellen immer anonyme Funktionen, was bedeutet, dass sie sich nicht leicht selbst rekursiv aufrufen knnen. Eine Mglichkeit, eine Pfeilfunktion rekursiv aufzurufen, besteht darin, sie einer Variablen zuzuweisen.
• Die Pfeilfunktion-Syntax hat keinen Zugriff auf arguments oder this.
• Der Function()-Konstruktor kann auf keine lokalen Variablen zugreifen er hat nur Zugriff auf den globalen Bereich.
• Der Function()-Konstruktor fhrt zur Laufzeitkompilierung und ist oft langsamer als andere Syntaxen.

Fr function-Ausdrcke gibt es einen Unterschied zwischen dem Funktionsnamen und der Variablen, der die Funktion zugewiesen wird. Der Funktionsname kann nicht gendert werden, whrend die Variable, der die Funktion zugewiesen ist, neu zugewiesen werden kann. Der Funktionsname kann sich von der Variablen unterscheiden, der die Funktion zugewiesen ist sie haben keine Beziehung zueinander. Der Funktionsname kann nur innerhalb des Funktionskrpers verwendet werden. Ein Versuch, ihn auerhalb des Funktionskrpers zu verwenden, fhrt zu einem Fehler (oder gibt einen anderen Wert zurck, wenn derselbe Name an anderer Stelle deklariert ist). Zum Beispiel:

const y = function x() {};
console.log(x); // ReferenceError: x is not defined

Auf der anderen Seite ist die Variable, der die Funktion zugewiesen wird, nur durch ihren Bereich begrenzt, der garantiert den Bereich umfasst, in dem die Funktion deklariert wurde.

Eine Funktionsdeklaration erstellt auch eine Variable mit demselben Namen wie der Funktionsname. Daher knnen, im Gegensatz zu denen durch Funktionsausdrcke definierten, Funktionen, die durch Funktionsdeklarationen definiert sind, sowohl in dem Bereich, in dem sie definiert wurden, als auch in ihrem eigenen Krper ber ihren Namen zugegriffen werden.

Eine Funktion, die durch new Function definiert wird, wird dynamisch zusammengestellt, was sichtbar ist, wenn man sie serialisiert. Zum Beispiel gibt console.log(new Function().toString()):

function anonymous(
) {

}

Dies ist der tatschliche Quelltext, der zur Kompilierung der Funktion verwendet wird. Obwohl der Function()-Konstruktor die Funktion mit dem Namen anonymous erstellt, wird dieser Name nicht in den Umfang des Krpers hinzugefgt. Der Krper hat nur Zugriff auf globale Variablen. Zum Beispiel wrde Folgendes zu einem Fehler fhren:

new Function("alert(anonymous);")();

Eine Funktion, die durch einen Funktionsausdruck oder eine Funktionsdeklaration definiert ist, erbt den aktuellen Umfang. Das heit, die Funktion bildet einen Abschluss. Andererseits erbt eine durch einen Function-Konstruktor definierte Funktion keinen anderen Bereich als den globalen Bereich (den alle Funktionen erben).

// p is a global variable
globalThis.p = 5;
function myFunc() {
  // p is a local variable
  const p = 9;

  function decl() {
    console.log(p);
  }
  const expr = function () {
    console.log(p);
  };
  const cons = new Function("\tconsole.log(p);");

  decl();
  expr();
  cons();
}
myFunc();

// Logs:
// 9 (for 'decl' by function declaration (current scope))
// 9 (for 'expr' by function expression (current scope))
// 5 (for 'cons' by Function constructor (global scope))

Funktionen, die durch Funktionsausdrcke und Funktionsdeklarationen definiert sind, werden nur einmal analysiert, whrend eine durch den Function-Konstruktor definierte Funktion den bergebenen String jedes Mal neu analysiert, wenn der Konstruktor aufgerufen wird. Obwohl ein Funktionsausdruck jedes Mal einen Abschluss erstellt, wird der Funktionskrper nicht erneut analysiert, sodass Funktionsausdrcke immer noch schneller sind als new Function(...). Daher sollte der Function-Konstruktor generell vermieden werden, wann immer dies mglich ist.

Eine Funktionsdeklaration kann unbeabsichtigt in einen Funktionsausdruck umgewandelt werden, wenn sie in einem Ausdruckskontext erscheint.

// A function declaration
function foo() {
  console.log("FOO!");
}

doSomething(
  // A function expression passed as an argument
  function foo() {
    console.log("FOO!");
  },
);

Auf der anderen Seite kann ein Funktionsausdruck auch in eine Funktionsdeklaration verwandelt werden. Eine Ausdrucksanweisung kann nicht mit den Schlsselwrtern function oder async function beginnen, was ein hufiger Fehler ist, wenn IIFEs (Immediately Invoked Function Expressions) implementiert werden.

function () { // SyntaxError: Function statements require a function name
  console.log("FOO!");
}();

function foo() {
  console.log("FOO!");
}(); // SyntaxError: Unexpected token ')'

Stattdessen beginnen Sie die Ausdrucksanweisung mit etwas anderem, sodass das function-Schlsselwort eindeutig einen Funktionsausdruck startet. Hufige Optionen sind Gruppierung und die Verwendung von void.

(function () {
  console.log("FOO!");
})();

void function () {
  console.log("FOO!");
}();

Funktionsparameter

Jeder Funktionsparameter ist ein einfacher Bezeichner, auf den Sie im lokalen Bereich zugreifen knnen.

function myFunc(a, b, c) {
  // You can access the values of a, b, and c here
}

Es gibt drei spezielle Parametersyntaxen:

• Standardparameter ermglichen es, formale Parameter mit Standardwerten zu initialisieren, wenn kein Wert oder undefined bergeben wird.
• Der Rest-Parameter ermglicht es, eine unbestimmte Anzahl von Argumenten als Array darzustellen.
• Destrukturierung ermglicht das Entpacken von Elementen aus Arrays oder Eigenschaften aus Objekten in separate Variablen.

function myFunc({ a, b }, c = 1, ...rest) {
  // You can access the values of a, b, c, and rest here
}

Es gibt einige Folgen, wenn eine der oben genannten nicht einfachen Parametersyntaxen verwendet wird:

• Sie knnen "use strict" nicht auf den Funktionskrper anwenden dies fhrt zu einem Syntaxfehler.
• Auch wenn die Funktion nicht im strikte Modus ist, gelten bestimmte Funktionen im strikten Modus, einschlielich, dass das arguments-Objekt nicht mehr mit den benannten Parametern synchronisiert wird, arguments.callee beim Zugriff einen Fehler auslst und doppelte Parameternamen nicht erlaubt sind.

Das arguments-Objekt

Sie knnen auf die Argumente einer Funktion innerhalb der Funktion ber das arguments-Objekt referenzieren.

arguments

Ein array-hnliches Objekt, das die an die aktuell ausgefhrte Funktion bergebenen Argumente enthlt.

arguments.callee

Die aktuell ausgefhrte Funktion.

arguments.length

Die Anzahl der an die Funktion bergebenen Argumente.

Getter- und Setter-Funktionen

Sie knnen Zugriffs-Eigenschaften auf jedem standardmig eingebauten Objekt oder benutzerdefinierten Objekt definieren, das die Hinzufgung neuer Eigenschaften untersttzt. Innerhalb von Objektliteralen und Klassen, knnen Sie spezielle Syntaxen verwenden, um den Getter und Setter einer Zugriffs-Eigenschaft zu definieren.

get

Bindet eine Objekteigenschaft an eine Funktion, die aufgerufen wird, wenn diese Eigenschaft nachgeschlagen wird.

set

Bindet eine Objekteigenschaft an eine Funktion, die aufgerufen wird, wenn versucht wird, diese Eigenschaft zu setzen.

Beachten Sie, dass diese Syntaxen eine Objekteigenschaft und keine Methode erstellen. Die Getter- und Setterfunktionen selbst knnen nur mit reflektierenden APIs wie Object.getOwnPropertyDescriptor() aufgerufen werden.

Block-level Funktionen

Im strikte Modus sind Funktionen innerhalb von Blcken auf diesen Block begrenzt. Vor ES2015 waren block-level Funktionen im strikten Modus verboten.

"use strict";

function f() {
  return 1;
}

{
  function f() {
    return 2;
  }
}

f() === 1; // true

// f() === 2 in non-strict mode

Block-level Funktionen in nicht-striktem Code

In einem Wort: Nicht tun.

In nicht-striktem Code verhalten sich Funktionsdeklarationen innerhalb von Blcken seltsam. Zum Beispiel:

if (shouldDefineZero) {
  function zero() {
    // DANGER: compatibility risk
    console.log("This is zero.");
  }
}

Die Semantik hiervon im strikten Modus ist gut spezifiziert zero existiert nur innerhalb des Scopes des if-Blocks. Wenn shouldDefineZero falsch ist, sollte zero niemals definiert werden, da der Block nie ausgefhrt wird. Historisch gesehen war dies jedoch nicht spezifiziert, sodass verschiedene Browser es in nicht-striktem Modus unterschiedlich implementierten. Fr weitere Informationen siehe die Referenz zu Funktion-Deklaration.

Eine sicherere Methode, Funktionen bedingt zu definieren, besteht darin, einen Funktionsausdruck einer Variablen zuzuweisen:

// Using a var makes it available as a global variable,
// with closer behavior to a top-level function declaration
var zero;
if (shouldDefineZero) {
  zero = function () {
    console.log("This is zero.");
  };
}

Beispiele

Rckgabe einer formatierten Zahl

Die folgende Funktion gibt eine Zeichenkette zurck, die die formatierte Darstellung einer Zahl mit fhrenden Nullen enthlt.

// This function returns a string padded with leading zeros
function padZeros(num, totalLen) {
  let numStr = num.toString(); // Initialize return value as string
  const numZeros = totalLen - numStr.length; // Calculate no. of zeros
  for (let i = 1; i <= numZeros; i++) {
    numStr = `0${numStr}`;
  }
  return numStr;
}

Die folgenden Anweisungen rufen die Funktion padZeros auf.

let result;
result = padZeros(42, 4); // returns "0042"
result = padZeros(42, 2); // returns "42"
result = padZeros(5, 4); // returns "0005"

Bestimmen, ob eine Funktion existiert

Sie knnen bestimmen, ob eine Funktion existiert, indem Sie den typeof-Operator verwenden. Im folgenden Beispiel wird ein Test durchgefhrt, um festzustellen, ob das window-Objekt eine Eigenschaft namens noFunc hat, die eine Funktion ist. Wenn ja, wird sie verwendet; andernfalls wird eine andere Aktion ausgefhrt.

if (typeof window.noFunc === "function") {
  // use noFunc()
} else {
  // do something else
}

Beachten Sie, dass im if-Test eine Referenz auf noFunc verwendet wird es gibt keine Klammern () nach dem Funktionsnamen, damit die eigentliche Funktion nicht aufgerufen wird.

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Funktionen Leitfaden
• Klassen
• function
• Function Ausdruck
• Function