1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: Funktionsausdruck
slug: Web/JavaScript/Reference/Operators/function
tags:
- Funktion
- JavaScript
- Operator
- Primary Expressions
translation_of: Web/JavaScript/Reference/Operators/function
---
<div>{{jsSidebar("Operators")}}</div>
<p>Das Schlüsselwort <strong><code>function</code></strong> kann benutzt werden, um eine Funktion innerhalb eines Ausdrucks zu definieren.</p>
<p>Man kann Funktionen auch mit Hilfe des <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></code>-Konstruktors oder als <a href="/de/docs/Web/JavaScript/Reference/Statements/function">Funktionsdeklarationen</a> definieren.</p>
<div>{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}}</div>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">var meineFunktion = function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
<em>statements</em>
};</pre>
<p>Seit ES2015 können außerdem <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktionen</a> benutzt werden.</p>
<h3 id="Parameter">Parameter</h3>
<dl>
<dt><code>name</code></dt>
<dd>Der Funktionsname. Kann weggelassen werden, wenn es sich um eine <em>anonyme </em>Funktion handelt. Der Name ist nur im Funktionskörper referenzierbar.</dd>
<dt><code>paramN</code></dt>
<dd>Der Name eines Argumentes, welches der Funktion übergeben wird.</dd>
<dt><code>statements</code></dt>
<dd>Die Befehle, aus denen der Funktionskörper besteht.</dd>
</dl>
<h2 id="Beschreibung">Beschreibung</h2>
<p>Ein Funktionsausdruck ist einem Funktionsstatement sehr ähnlich und hat fast die gleiche Syntax (siehe <a href="/de/docs/Web/JavaScript/Reference/Statements/function">Funktionsstatement</a>). Der größte Unterschied zwischen einem Funktionsausdruck und einem Funktionsstatement ist der <em>Funktionsname, </em>der in der Funktionsausdruck weggelassen werden kann, um eine anonyme Funktion zu erstellen. Ein Funktionsausdruck kann als <strong>IIFE </strong>(Immediately Invoked Function Expression) genutzt werden, die sofort nach Definition ausgeführt wird. Im Kapitel <a href="/de/docs/Web/JavaScript/Reference/Functions">Funktionen</a> finden sich weitere Informationen.</p>
<h3 id="Hoisting_von_Funktionsausdrücken">Hoisting von Funktionsausdrücken</h3>
<p>Funktionsausdrücke in Javascript werden nicht automatisch an den Beginn des Scopes gehoben (hoisted), anders als {{jsxref("Statements/function", "Funktionsdeklarationen", "#Hochziehen_der_Funktionsdeklaration")}}. Funktionsausdrücke können nicht vor Definition im Code aufgerufen werden.</p>
<pre class="brush: js">notHoisted(); // TypeError: notHoisted is not a function
var notHoisted = function() {
console.log('bar');
};
</pre>
<h3 id="Benannte_Funktionsausdrücke">Benannte Funktionsausdrücke</h3>
<p>Wenn man die aktuelle Funktion innerhalb des Funktionskörpers referenzieren will, muss ein Benannter Funktionsausdruck erstellt werden. <u><strong>Dieser Name ist nur im Funktionskörper referenzierbar. </strong></u>Das verhindert den Gebrauch der nicht standardisierten <code><a href="/de/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code> Eigenschaft.</p>
<pre class="brush: js">var math = {
'fakultaet': function fakultaet(n) {
if (n <= 1)
return 1;
return n * fakultaet(n - 1);
}
};
math.fakultaet(3) //3;2;1;
</pre>
<p>Die Variable, der ein Funktionsausdruck zugewiesen wurde, hat eine <code>name</code> 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 <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktionen</a> zu (diese haben keinen Namen so dass der Variablenname nur implizit gesetzt werden kann)</p>
<pre class="brush: js">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)
</pre>
<h2 id="Beispiele">Beispiele</h2>
<p>Das folgende Beispiel definiert eine unbenannte Funktion und weist sie <code>x</code> zu. Die Funktion gibt das Quadrat ihres Argumentes zurück.</p>
<pre class="brush: js">var x = function(y) {
return y * y;
};
</pre>
<p>Meistens werden Funktionsausdrücke in <a href="/de/docs/Glossary/Callback_function">Callbacks</a> genutzt:</p>
<pre class="brush: js">button.addEventListener('click', function(event) {
console.log('button wurde geklickt!')
})</pre>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
<td>{{Spec2('ES6')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td>
<td>{{Spec2('ES3')}}</td>
<td>Initiale Fefinition. Implementiert in JavaScript 1.5.</td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<p>{{Compat("javascript.operators.function")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>{{jsxref("Arrow_functions", "Arrow functions")}}</li>
<li>{{jsxref("Functions_and_function_scope", "Funktionen und Funktionsgültigkeitsbereiche")}}</li>
<li>{{jsxref("Function")}}</li>
<li>{{jsxref("Statements/function", "Funktionsstatement")}}</li>
<li>{{jsxref("Statements/function*", "function* Statement")}}</li>
<li>{{jsxref("Operators/function*", "function* Ausdruck")}}</li>
<li>{{jsxref("GeneratorFunction")}}</li>
<li>{{jsxref("Statements/async_function", "Asynchrone Funktion")}}</li>
<li>{{jsxref("Operators/async_function", "Asynchroner Funktionsausdruck")}}</li>
</ul>
|
