Das Schlüsselwort function kann benutzt werden, um eine Funktion innerhalb eines Ausdrucks zu definieren.
Man kann Funktionen auch mit Hilfe des Function-Konstruktors oder als Funktionsdeklarationen definieren.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
var meineFunktion = function [name]([param1[, param2[, ..., paramN]]]) {
statements
};
Seit ES2015 können außerdem Pfeilfunktionen benutzt werden.
Parameter
name- Der Funktionsname. Kann weggelassen werden, wenn es sich um eine anonyme Funktion handelt. Der Name ist nur im Funktionskörper referenzierbar.
paramN- Der Name eines Argumentes, welches der Funktion übergeben wird.
statements- Die Befehle, aus denen der Funktionskörper besteht.
Beschreibung
Ein Funktionsausdruck ist einem Funktionsstatement sehr ähnlich und hat fast die gleiche Syntax (siehe Funktionsstatement). Der größte Unterschied zwischen einem Funktionsausdruck und einem Funktionsstatement ist der Funktionsname, der in der Funktionsausdruck weggelassen werden kann, um eine anonyme Funktion zu erstellen. Ein Funktionsausdruck kann als IIFE (Immediately Invoked Function Expression) genutzt werden, die sofort nach Definition ausgeführt wird. Im Kapitel Funktionen finden sich weitere Informationen.
Hoisting von Funktionsausdrücken
Funktionsausdrücke in Javascript werden nicht automatisch an den Beginn des Scopes gehoben (hoisted), anders als Funktionsdeklarationen. Funktionsausdrücke können nicht vor Definition im Code aufgerufen werden.
notHoisted(); // TypeError: notHoisted is not a function
var notHoisted = function() {
console.log('bar');
};
Benannte Funktionsausdrücke
Wenn man die aktuelle Funktion innerhalb des Funktionskörpers referenzieren will, muss ein Benannter Funktionsausdruck erstellt werden. Dieser Name ist nur im Funktionskörper referenzierbar. Das verhindert den Gebrauch der nicht standardisierten arguments.callee Eigenschaft.
var math = {
'fakultaet': function fakultaet(n) {
if (n <= 1)
return 1;
return n * fakultaet(n - 1);
}
};
math.fakultaet(3) //3;2;1;
Die Variable, der ein Funktionsausdruck zugewiesen wurde, hat eine name Eigenschaft. Wenn der Name der Funktion ausgelassen wird, wird dies der Variablenname sein (implizierter Name). Ist die Funktion benannt, wird in der Eigenschaft der Funktionsname zu finden sein (expliziter Name). Dies trifft auch auf Pfeilfunktionen zu (diese haben keinen Namen so dass der Variablenname nur implizit gesetzt werden kann)
var foo = function() {}
foo.name // "foo"
var foo2 = foo
foo2.name // "foo"
var bar = function baz() {}
bar.name // "baz"
console.log(foo === foo2); // true
console.log(typeof baz); // undefined
console.log(bar === baz); // false (Fehler, weil baz == undefined)
Beispiele
Das folgende Beispiel definiert eine unbenannte Funktion und weist sie x zu. Die Funktion gibt das Quadrat ihres Argumentes zurück.
var x = function(y) {
return y * y;
};
Meistens werden Funktionsausdrücke in Callbacks genutzt:
button.addEventListener('click', function(event) {
console.log('button wurde geklickt!')
})
Spezifikationen
| Spezifikation | Status | Kommentar |
|---|---|---|
| ECMAScript Latest Draft (ECMA-262) Die Definition von 'Function definitions' in dieser Spezifikation. |
Entwurf | |
| ECMAScript 2015 (6th Edition, ECMA-262) Die Definition von 'Function definitions' in dieser Spezifikation. |
Standard | |
| ECMAScript 5.1 (ECMA-262) Die Definition von 'Function definition' in dieser Spezifikation. |
Standard | |
| ECMAScript 3rd Edition (ECMA-262) Die Definition von 'Function definition' in dieser Spezifikation. |
Standard | Initiale Fefinition. Implementiert in JavaScript 1.5. |
Browserkompatibilität
| Desktop | Mobile | Server | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
function | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 3 | Opera Vollständige Unterstützung Ja | Safari Vollständige Unterstützung Ja | WebView Android Vollständige Unterstützung 1 | Chrome Android Vollständige Unterstützung 18 | Firefox Android Vollständige Unterstützung 4 | Opera Android Vollständige Unterstützung Ja | Safari iOS Vollständige Unterstützung Ja | Samsung Internet Android Vollständige Unterstützung 1.0 | nodejs Vollständige Unterstützung Ja |
| Trailing comma in parameters | Chrome Vollständige Unterstützung 58 | Edge Keine Unterstützung Nein | Firefox Vollständige Unterstützung 52 | IE Keine Unterstützung Nein | Opera Vollständige Unterstützung 45 | Safari Keine Unterstützung Nein | WebView Android Vollständige Unterstützung 58 | Chrome Android Vollständige Unterstützung 58 | Firefox Android Vollständige Unterstützung 52 | Opera Android Vollständige Unterstützung 43 | Safari iOS Keine Unterstützung Nein | Samsung Internet Android Vollständige Unterstützung 7.0 | nodejs Vollständige Unterstützung 8.0.0 |
Legende
- Vollständige Unterstützung
- Vollständige Unterstützung
- Keine Unterstützung
- Keine Unterstützung