From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../functions/arguments/@@iterator/index.html | 78 +++ .../functions/arguments/callee/index.html | 157 ++++++ .../reference/functions/arguments/index.html | 223 ++++++++ .../functions/arguments/length/index.html | 87 +++ .../functions/default_parameters/index.html | 223 ++++++++ .../javascript/reference/functions/get/index.html | 174 ++++++ .../web/javascript/reference/functions/index.html | 594 +++++++++++++++++++++ .../functions/methoden_definitionen/index.html | 230 ++++++++ .../reference/functions/pfeilfunktionen/index.html | 360 +++++++++++++ .../reference/functions/rest_parameter/index.html | 167 ++++++ .../javascript/reference/functions/set/index.html | 149 ++++++ 11 files changed, 2442 insertions(+) create mode 100644 files/de/web/javascript/reference/functions/arguments/@@iterator/index.html create mode 100644 files/de/web/javascript/reference/functions/arguments/callee/index.html create mode 100644 files/de/web/javascript/reference/functions/arguments/index.html create mode 100644 files/de/web/javascript/reference/functions/arguments/length/index.html create mode 100644 files/de/web/javascript/reference/functions/default_parameters/index.html create mode 100644 files/de/web/javascript/reference/functions/get/index.html create mode 100644 files/de/web/javascript/reference/functions/index.html create mode 100644 files/de/web/javascript/reference/functions/methoden_definitionen/index.html create mode 100644 files/de/web/javascript/reference/functions/pfeilfunktionen/index.html create mode 100644 files/de/web/javascript/reference/functions/rest_parameter/index.html create mode 100644 files/de/web/javascript/reference/functions/set/index.html (limited to 'files/de/web/javascript/reference/functions') diff --git a/files/de/web/javascript/reference/functions/arguments/@@iterator/index.html b/files/de/web/javascript/reference/functions/arguments/@@iterator/index.html new file mode 100644 index 0000000000..5625ee01df --- /dev/null +++ b/files/de/web/javascript/reference/functions/arguments/@@iterator/index.html @@ -0,0 +1,78 @@ +--- +title: 'arguments[@@iterator]()' +slug: Web/JavaScript/Reference/Functions/arguments/@@iterator +tags: + - Deprecated + - Functions + - JavaScript + - Property + - arguments +translation_of: Web/JavaScript/Reference/Functions/arguments/@@iterator +--- +
{{jsSidebar("Functions")}}
+ +

Der Initialwert der @@iterator Eigenschaft ist das selbe Funktionsobjekt wie der Initialwert der {{jsxref("Array.prototype.values")}} Eigenschaft.

+ +

Syntax

+ +
arguments[Symbol.iterator]()
+ +

Beispiele

+ +

Iterieren mit einer for...of Schleife

+ +
function f() {
+  // der Browser muss for..of Schleifen und
+  // let-Variablen in for Schleifen unterstützen
+  for (let letter of arguments) {
+    console.log(letter);
+  }
+}
+f('w', 'y', 'k', 'o', 'p');
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES6', '#sec-createunmappedargumentsobject', ' CreateUnmappedArgumentsObject')}}{{Spec2('ES6')}}Initiale Definition.
{{SpecName('ES6', '#sec-createmappedargumentsobject', ' CreateMappedArgumentsObject')}}{{Spec2('ES6')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-createunmappedargumentsobject', 'CreateUnmappedArgumentsObject')}}{{Spec2('ESDraft')}} 
{{SpecName('ESDraft', '#sec-createmappedargumentsobject', 'CreateMappedArgumentsObject')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("javascript.functions.arguments.@@iterator")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/functions/arguments/callee/index.html b/files/de/web/javascript/reference/functions/arguments/callee/index.html new file mode 100644 index 0000000000..704813b7a6 --- /dev/null +++ b/files/de/web/javascript/reference/functions/arguments/callee/index.html @@ -0,0 +1,157 @@ +--- +title: arguments.callee +slug: Web/JavaScript/Reference/Functions/arguments/callee +tags: + - Deprecated + - Functions + - JavaScript + - Property + - arguments +translation_of: Web/JavaScript/Reference/Functions/arguments/callee +--- +
{{jsSidebar("Functions")}}
+ +

Die arguments.callee-Eigenschaft enthält die Referenz der aktuell ausgeführten Funktion.

+ +

Beschreibung

+ +

callee ist eine Eigenschaft des arguments-Objektes. Sie kann eingesetzt werden, um aus dem Körper einer Funktion auf die aktuell ausgeführte Funktion zu referenzieren. Dieses ist sinnvoll, wenn der Name der Funktion unbekannt ist. Auch in einer anonymen Funktion (ohne Namen) funktioniert dieses.

+ +
Warnung: Die Version 5 von ECMAScript (ES5) verbietet die nutzung von arguments.callee() im {{jsxref("Strict_mode", "strict mode")}}. Der Einsatz von arguments.callee() soll vermieden werden, wenn function-Ausdrücke einen Namen haben oder Funktionen deklariert werden, die sich selbst aufrufen müssen.
+ +

Warum wurde arguments.callee vom ES5 strict mode entfernt?

+ +

(angepasst von einer Stack Overflow-Antwort von olliej)

+ +

Frühe Versionen von JavaScript erlauben keine benamten Funktions-Anweisungen. Aus diesem Grund ist es nicht möglich rekursive Funktions-Anweisungen zu schreiben.

+ +

Diese Syntax funktioniert, zum Beispiel:

+ +
function factorial (n) {
+    return !(n > 1) ? 1 : factorial(n - 1) * n;
+}
+
+[1, 2, 3, 4, 5].map(factorial);
+ +

aber:

+ +
[1, 2, 3, 4, 5].map(function (n) {
+    return !(n > 1) ? 1 : /* what goes here? */ (n - 1) * n;
+});
+ +

funktioniert nicht. Um dieses problem zu lösen wurde arguments.callee hinzugefügt.

+ +
[1, 2, 3, 4, 5].map(function (n) {
+    return !(n > 1) ? 1 : arguments.callee(n - 1) * n;
+});
+ +

Allerdings ist dieses eine schlechte Lösung , weil diese (in Verbindung mit anderen arguments, callee, and caller-Problemen) inlining und Endrekursion unmöglich macht (man kann es benutzen um Tracing zu realisieren, jedoch ist der beste Code immer suboptimal). Ein weiteres Problem liegt darin, dass rekursive Aufrufe ein unterschiedliches this bekommen können (siehe folgendes Beispiel):

+ +
var global = this;
+
+var sillyFunction = function(recursed) {
+    if (!recursed) { return arguments.callee(true); }
+    if (this !== global) {
+        alert('This is: ' + this);
+    } else {
+        alert('This is the global');
+    }
+}
+
+sillyFunction();
+ +

ECMAScript 3 löste das Problem indem benamte Funktions-Ausdrücke erlaubt wurden:

+ +
[1, 2, 3, 4, 5].map(function factorial (n) {
+    return !(n > 1) ? 1 : factorial(n - 1)*n;
+});
+ +

Dieses hat zahlreiche Vorteile:

+ + + +

Eine andere Funktion die verboten wurde ist arguments.callee.caller oder spezifischer Function.caller. Warum ist das so? Zu jedem Zeitpunkt ist es möglich, den tiefsten Aufrufer von jeder Funktion auf dem Stack herauszufinden und weil das herausfinden des Aufrufer-Stacks hat einen hauptsächlichen Effekt: Es macht das Optimieren unmöglich oder sehr viel schwerer. Zum Beispiel ist es nicht Möglich f zu inlinen, wenn nicht sichergestellt ist, dass eine Funktion f nicht eine unbekannte Funktion aufruft. Das bedeutet, dass jeder Aufruf eine große Anzahl an Sicherheitsabfragen durchführen müsste um inlinen zu können.

+ +
function f(a, b, c, d, e) { return a ? b * c : d * e; }
+ +

Wenn der JavaScript-Interpreter nicht garantieren kann, dass alle der unterstützten Argumente Nummern beim Aufruf sind, muss dieser Prüfungen für alle Argumente einfügen bevor der Code geinlinet werden kann oder die Funktion kann nicht geinlinet werden. In dieser Situation sollte ein guter Interpreter die Prüfungen neu anordnen, damit diese Optimal abgefragt werden und nur die Werte, die benutzt werden geprüft werden. Weil dieses in vielen Fällen nicht möglich ist, wird es in diesen unmöglich zu inlinen.

+ +

Beispiele

+ +

Einsatz von arguments.callee in einer anonymen rekursiven Funktion

+ +

Eine rekursive Funktion muss sich selber aufrufen können. Normalerweise referenziert eine Funktion sich selbst mit dem Namen. Weil eine anonyme Funktion (welche von einem Funktionsausdruck oder dem Function Konstruktor erstellt werden kann) hat keinen Namen. Wenn also keine Variable diese Funktion referenziert, ist der einzige Weg die Funktion über arguments.callee aufzurufen.

+ +

Das folgende Beispiel definiert eine Funktion, welche wiederum eine Fakultätsfunktion Definiert und sie zurückgibt. Dieses Beispiel ist nicht sehr praktisch und es gibt fast keine Fälle, in denen dasselbe Ergebnis nicht mit Funktionsausdrücken mit Namen erreicht werden kann.

+ +
function create() {
+   return function(n) {
+      if (n <= 1)
+         return 1;
+      return n * arguments.callee(n - 1);
+   };
+}
+
+var result = create()(5); // returns 120 (5 * 4 * 3 * 2 * 1)
+ +

Der einsatz von arguments.callee mit keinen guten Alternativen

+ +

In einem Fall wie dem Folgenden gibt es jedoch keine Alternativen zu arguments.callee, so dass seine Veraltung ein Fehler sein könnte (siehe {{Bug("725398")}}):

+ +
function createPerson(sIdentity) {
+    var oPerson = new Function('alert(arguments.callee.identity);');
+    oPerson.identity = sIdentity;
+    return oPerson;
+}
+
+var john = createPerson('John Smith');
+
+john();
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.2
{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.functions.arguments.callee")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/functions/arguments/index.html b/files/de/web/javascript/reference/functions/arguments/index.html new file mode 100644 index 0000000000..180a53dc5f --- /dev/null +++ b/files/de/web/javascript/reference/functions/arguments/index.html @@ -0,0 +1,223 @@ +--- +title: Arguments object +slug: Web/JavaScript/Reference/Functions/arguments +tags: + - Functions + - JavaScript + - Reference + - arguments +translation_of: Web/JavaScript/Reference/Functions/arguments +--- +
+
+
{{jsSidebar("Functions")}}
+
+
+ +

Das arguments-Objekt ist ein Array-ähnliches Objekt, das auf die übergebenen Parameter einer Funktion verweist.

+ +
{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}
+ + + +

Syntax

+ +
arguments
+ +

Beschreibung

+ +

Das arguments-Objekt ist eine lokal verfügbare Variable in allen (Nicht-Pfeil-) Funktionen. Man kann auf die Parameter einer Funktion referenzieren, wenn man in einer Funktion das arguments-Objekt benutzt. Dieses Objekt enthält einen Eintrag für jeden übergebenen Parameter der Funktion. Der erste Eintrag beginnt beim Index 0. Wenn einer Funktion drei Parameter übergeben werden, kann wie folgt auf diese zugegriffen werden;

+ +
arguments[0]
+arguments[1]
+arguments[2]
+
+ +

Die Parameter können auch überschrieben werden:

+ +
arguments[1] = 'new value';
+ +

Das arguments-Objekt ist kein {{jsxref("Array")}}. Es ist ähnlich wie ein Array, hat aber keine Eigenschaften eines Arrays mit Ausnahme von {{jsxref("Functions/arguments/length", "length")}}. Zum Beispiel ist die {{jsxref("Global_Objects/Array/pop", "pop")}}-Methode nicht vorhanden. Jedoch kann arguments zu einem echten Array konvertiert werden:

+ +
var args = Array.prototype.slice.call(arguments);
+var args = [].slice.call(arguments);
+
+// ES2015
+const args = Array.from(arguments);
+ +
+

Der Einsatz von slice auf arguments kann Optimierungen bei einigen JavaScript-Engines (z. B. bei V8 — mehr Informationen) verhindern. Wenn man sich darum kümmert, sollte ein neues Array erstellt werden, indem über das arguments-Objekt iteriert wird. Eine Alternative ist der Einsatz von Array.apply wie folgt:

+ +
var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));)
+
+ +

Man kann das arguments-Objekt nutzen, um eine Funktion mit mehr übergebenen Parametern, als die der formalen Definition, zu verarbeiten. Diese Technik ist hilfreich für Funktionen mit variabler Parameteranzahl. Man kann {{jsxref("Functions/arguments/length", "arguments.length")}} nutzen, um die Anzahl der übergebenen Parameter festzustellen und dann jeden Parameter über das arguments-Objekt zu verarbeiten. (Um die Anzahl der deklarierten Parameter festzustellen, kann die {{jsxref("Functions/length", "Funktion.length")}} Eigenschaft genutzt werden.)

+ +

Einsatz von typeof bei arguments

+ +

Der Typ von arguments ist 'object'

+ +
console.log(typeof arguments); // 'object'
+ +

Der Typ von individuellen Argumenten kann über den Index ermittelt werden.

+ +
console.log(typeof arguments[0]); // Gibt den Typ des individuellen Arguments zurück
+ +

Einsatz der Spread Syntax mit arguments

+ +

Man kann die {{jsxref("Array.from()")}} Methode oder den spread operator nutzen, um arguments zu einem echten Array zu konvertieren:

+ +
var args = Array.from(arguments);
+var args = [...arguments];
+ +

Eigenschaften

+ +
+
{{jsxref("Functions/arguments/callee", "arguments.callee")}}
+
Referenz zur aktuell ausgeführten Funktion.
+
{{jsxref("Functions/arguments/caller", "arguments.caller")}} {{ Obsolete_inline() }}
+
Referenz zur Funktion, die die aktuelle Funktion ausführt hat.
+
{{jsxref("Functions/arguments/length", "arguments.length")}}
+
Anzahl der übergebenen Funktionsparameter.
+
{{jsxref("Functions/arguments/@@iterator", "arguments[@@iterator]")}}
+
Gibt ein Array-Iterator-Objekt zurück, welches die Werte an allen Indizes von arguments enthält.
+
+ +

Beispiele

+ +

Definition einer Funktion, die mehrere Strings konkateniert

+ +

Dieses Beispiel definiert eine Funktion, die mehrere Strings konkateniert. Der einzige formale Parameter der Funktion ist ein String, der die Zeichen enthält, die die einzelnen Elemente trennt. Die Funktion ist wie folgt definiert:

+ +
function myConcat(separator) {
+  var args = Array.prototype.slice.call(arguments, 1);
+  return args.join(separator);
+}
+ +

Man kann eine beliebige Anzahl von Parametern der Funktion übergeben und es wird jedes Argument für den String eingesetzt.

+ +
// returns "red, orange, blue"
+myConcat(", ", "red", "orange", "blue");
+
+// returns "elephant; giraffe; lion; cheetah"
+myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
+
+// returns "sage. basil. oregano. pepper. parsley"
+myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
+ +

Definition einer Funktion, die HTML-Listen erstellt

+ +

Im Beispiel wird eine Funktion definiert, die einen String mit HTML für eine Liste zurückgibt. Der einzige formale Parameter der Funktion ist ein String, der "u" für eine ungeordnete Liste oder "o" für eine geordnete Liste enthält. Die Funktion ist wie folgt definiert:

+ +
function list(type) {
+  var result = "<" + type + "l><li>";
+  var args = Array.prototype.slice.call(arguments, 1);
+  result += args.join("</li><li>");
+  result += "</li></" + type + "l>"; // end list
+
+  return result;
+}
+ +

Der Funktion kann eine variable Anzahl an Parametern übergeben werden und es wird jeder Parameter als Listeneintrag einer Liste hinzugefügt. Zum Beispiel:

+ +
var listHTML = list("u", "One", "Two", "Three");
+
+/* listHTML is:
+
+"<ul><li>One</li><li>Two</li><li>Three</li></ul>"
+
+*/
+ +

Rest, default und Destrukturierende Parameter

+ +

Das arguments-Objekt kann in Verbindung mit rest, default, und destrukturierenden Parametern eingesetzt werden.

+ +
function foo (...args) {
+  return args;
+}
+foo(1, 2, 3); // [1,2,3]
+ +

Wenn der Einsatz von rest, default, und destrukturierenden Parametern nicht die die Eigenschaften des arguments Objekts verändert, gibt es eine Unterschied zwischen dem strict mode und dem nicht strict mode.

+ +

Wenn eine nicht-strikte (non-strict) Funktion nicht  rest, default, oder destrukturierende Parameter enthält, referenzieren die Werte des arguments Objektes direkt auf die deklarierten Parameter und umgekehrt. Siehe dazu folgenden Quelltext:

+ +
function func (a) {
+  arguments[0] = 99; // Aktualisert auch arguments[0] und a
+  console.log(a);
+}
+func(10); // 99
+ +

und

+ +
function func (a) {
+  a = 99; // Aktualisert auch arguments[0] und a
+  console.log(arguments[0]);
+}
+func(10); // 99
+ +

Wenn eine nicht-strikte (non-strict) Funktion rest, default, oder destrukturierende Parameter enthält, referenzieren die Werte des arguments Objektes nicht direkt auf die deklarierten Parameter und umgekehrt. Die Werte in arguments sind die Werte, die der Funktion beim Aufruf übergeben werden:

+ +
function func(a = 55) {
+  arguments[0] = 99; // aktualisert arguments[0] aber nicht a
+  console.log(a);
+}
+func(10); // 10
+ +

und

+ +
function func(a = 55) {
+  a = 99; // aktualisert a aber nicht arguments[0]
+  console.log(arguments[0]);
+}
+func(10); // 10;
+ +

und

+ +
function func(a = 55) {
+  console.log(arguments[0]);
+}
+func(); // undefined;
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.1
{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}{{Spec2('ES5.1')}}
{{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ES2015')}}
{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ESDraft')}}
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.functions.arguments")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/functions/arguments/length/index.html b/files/de/web/javascript/reference/functions/arguments/length/index.html new file mode 100644 index 0000000000..a2da4718b4 --- /dev/null +++ b/files/de/web/javascript/reference/functions/arguments/length/index.html @@ -0,0 +1,87 @@ +--- +title: arguments.length +slug: Web/JavaScript/Reference/Functions/arguments/length +tags: + - Functions + - JavaScript + - Property + - arguments +translation_of: Web/JavaScript/Reference/Functions/arguments/length +--- +
+
{{jsSidebar("Functions")}}
+
+ +

Die arguments.length-Eigenschaft enthält die Anzahl der übergebenen Parameter einer Funktion.

+ +

Syntax

+ +
arguments.length
+ +

Beschreibung

+ +

Die arguments.length-Eigenschaft enthält die Anzahl der Parameter, die der aktuellen Funktion übergeben wurden. Diese Anzahl kann größer oder kleiner der Anzahl der definierten Parameter sein (siehe {{jsxref("Function.length")}}).

+ +

Beispiele

+ +

Beispiel: arguments.length nutzen

+ +

In diesem Beispiel wird eine Funktion definiert, die zwei oder mehr Nummern addieren kann.

+ +
function adder(base /*, n2, ... */) {
+  base = Number(base);
+  for (var i = 1; i < arguments.length; i++) {
+    base += Number(arguments[i]);
+  }
+  return base;
+}
+
+ +
+

Zu beachten ist der Unterschied zwischen {{jsxref("Function.length")}} und arguments.length

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definietion. Implementiert in JavaScript 1.1
{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.functions.arguments.length")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/functions/default_parameters/index.html b/files/de/web/javascript/reference/functions/default_parameters/index.html new file mode 100644 index 0000000000..6e88aaa134 --- /dev/null +++ b/files/de/web/javascript/reference/functions/default_parameters/index.html @@ -0,0 +1,223 @@ +--- +title: Default parameters +slug: Web/JavaScript/Reference/Functions/Default_parameters +tags: + - ECMAScript 2015 + - Functions + - JavaScript +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +
{{jsSidebar("Functions")}}
+ +

Standard Funktionsparameter erlaubt es formale Parameter mit vorgegebenen Werten zu initialisieren, wenn beim Funktionsaufruf kein Wert oder undefined übergeben wird.

+ +
{{EmbedInteractiveExample("pages/js/functions-default.html")}}
+ + + +

Syntax

+ +
function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) {
+   statements
+}
+
+ +

Beschreibung

+ +

In JavaScript haben Funktionsparameter standardmäßig den Default-Wert {{jsxref("undefined")}}. Manchmal ist es jedoch sinnvoll einen anderen Default-Wert zu setzen. Hier helfen Default-Parameter weiter.

+ +

In der Vergangenheit war die allgemeine Strategie für das Setzen von Default-Werten das Testen von Parameterwerten im Body der Funktion und dem Zuordnen eines Default-Wertes, wenn dieser undefined ist. Wenn in dem folgenden Beispiel bei dem Aufruf kein Wert für b mitgegeben wird, würde der Wert undefined sein. Bei der Auswertung von a*b und dem Aufruf von multiply wird als Rückgabewert NaN zurückgegeben. Im Beispiel wird deshalb dieser Rückgabewert in der zweiten Zeile der Funktion aufgefangen:

+ +
function multiply(a, b) {
+  b = (typeof b !== 'undefined') ?  b : 1;
+  return a * b;
+}
+
+multiply(5, 2); // 10
+multiply(5, 1); // 5
+multiply(5);    // 5
+
+ +

Mit dem Default-Parameter in ES2015 ist die Prüfung im Funktionskörper nicht mehr nötig. Jetzt kann man einfach 1 als den Standardwert für b in dem Funktionskopf definieren: 

+ +
function multiply(a, b = 1) {
+  return a * b;
+}
+
+multiply(5, 2); // 10
+multiply(5, 1); // 5
+multiply(5);    // 5
+
+ +

Beispiele

+ +

Übergeben von undefined und anderen falsy Werten

+ +

In dem zweiten Aufruf, auch wenn das erste Argument explizit auf undefined gesetzt ist (jedoch nicht null oder andere {{Glossary("Falsy", "Falsy-Werte")}}, ist der Wert des Arguments num beim Aufruf der Default-Wert.

+ +
function test(num = 1) {
+  console.log(typeof num);
+}
+
+test();          // 'number' (num wird auf 1 gesetzt)
+test(undefined); // 'number' (num wird auf 1 gesetzt)
+
+// test with other falsy values:
+test('');        // 'string' (num wird auf '' gesetzt)
+test(null);      // 'object' (num wird auf null gesetzt)
+
+ +

Auswerten beim Aufruf

+ +

Das Standard-Argument wird zum Zeitpunkt des Aufrufs ausgewertet. Somit wird - anders als z.B. in Python - ein neues Objekt bei jedem Funktionsaufruf erzeugt.

+ +
function append(value, array = []) {
+  array.push(value);
+  return array;
+}
+
+append(1); //[1]
+append(2); //[2], nicht [1, 2]
+
+ +

Das Gleiche gilt für Funktionen und Variablen:

+ +
function callSomething(thing = something()) {
+ return thing;
+}
+
+function something(){
+  return "sth";
+}
+
+callSomething();  //sth
+ +

Default-Parameter stehen nachfolgenden Default-Parametern zur Verfügung

+ +

Die bereits angetroffenen Parameter stehen den späteren Standardparametern zur Verfügung:

+ +
function singularAutoPlural(singular, plural = singular+"s",
+                            rallyingCry = plural + " ATTACK!!!") {
+  return [singular, plural, rallyingCry ];
+}
+
+//["Gecko","Geckos", "Geckos ATTACK!!!"]
+singularAutoPlural("Gecko");
+
+//["Fox","Foxes", "Foxes ATTACK!!!"]
+singularAutoPlural("Fox","Foxes");
+
+//["Deer", "Deer", "Deer ... change."]
+singularAutoPlural("Deer", "Deer", "Deer peaceably and respectfully
+   petition the government for positive change.")
+
+ +

Diese Funktionalität wird in einer geradlinigen Weise angenähert und zeigt, wie viele Randfälle behandelt werden:

+ +
function go() {
+  return ":P"
+}
+
+function withDefaults(a, b = 5, c = b, d = go(), e = this,
+                      f = arguments, g = this.value) {
+  return [a,b,c,d,e,f,g];
+}
+
+function withoutDefaults(a, b, c, d, e, f, g){
+  switch(arguments.length){
+    case 0:
+      a
+    case 1:
+      b = 5
+    case 2:
+      c = b
+    case 3:
+      d = go();
+    case 4:
+      e = this
+    case 5:
+      f = arguments
+    case 6:
+      g = this.value;
+    default:
+  }
+  return [a,b,c,d,e,f,g];
+}
+
+withDefaults.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+
+
+withoutDefaults.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+
+ +

Funktionen definiert innerhalb des Funktionskörpers

+ +

Eingeführt in Gecko 33 {{geckoRelease(33)}}. Funktionen die innerhalb eines Funktionskörper deklariert werden, können nicht von Default-Parametern referenziert werden und führen zu einem {{jsxref("ReferenceError")}} (aktuell wird ein {{jsxref("TypeError")}} erzeugt, siehe {{bug(1022967)}}). Default-Parameter werden stets zuerst ausgewertet, Funktionsdeklarationen innerhalb von Funktionskörpern erst hinterher.

+ +
// Funktioniert nicht! Wirft einen ReferenceError.
+function f(a = go()) {
+  function go(){return ":P"}
+}
+
+ +

Paramater ohne Default nach Default-Parameter

+ +

Vor Gecko 26 {{geckoRelease(26)}} erzeugte der folgende Code einen {{jsxref("SyntaxError")}}. Dieses wurde in {{bug(777060)}} behoben und funktioniert wie erwartet in späteren Versionen. Bei Aufruf werden Parameter noch immer von links nach rechts angegeben. Default-Parameter werden überschrieben, auch wenn spätere Parameter keinen Default haben:

+ +
function f(x=1, y) {
+  return [x, y];
+}
+
+f(); // [1, undefined]
+f(2); // [2, undefined]
+
+ +

Zerstörter Parameter mit Standardwertzuordnung

+ +

Sie können die Standardwertzuordnung mit der destrukturierende Zuordnung Schreibweise verwenden:

+ +
function f([x, y] = [1, 2], {z: z} = {z: 3}) {
+  return x + y + z;
+}
+
+f(); // 6
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + +

{{Compat("javascript.functions.default_parameters")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/functions/get/index.html b/files/de/web/javascript/reference/functions/get/index.html new file mode 100644 index 0000000000..b36b0f50e8 --- /dev/null +++ b/files/de/web/javascript/reference/functions/get/index.html @@ -0,0 +1,174 @@ +--- +title: Getter +slug: Web/JavaScript/Reference/Functions/get +tags: + - ECMAScript 2015 + - ECMAScript 5 + - Functions + - JavaScript + - Language feature +translation_of: Web/JavaScript/Reference/Functions/get +--- +
{{jsSidebar("Functions")}}
+ +

Die get Syntax bindet eine Objekteigenschaft an eine Funktion welche aufgerufen wird, wenn die Eigenschaft abgefragt wird.

+ +
{{EmbedInteractiveExample("pages/js/functions-getter.html")}}
+ + + +

Syntax

+ +
{get prop() { ... } }
+{get [expression]() { ... } }
+ +

Parameter

+ +
+
prop
+
Der Name der Eigenschaft, die an die gegebene Funktion gebunden wird.
+
expression
+
Beginnend mit ECMAScript 2015, kann auch ein Ausdruck für einen berechneten Eigenschaftsnamen genutzt werden, der an die Funktion gebunden wird.
+
+ +

Beschreibung

+ +

Manchmal ist es wünschenswert, den Zugriff auf eine Eigenschaft zuzulassen, die einen dynamisch berechneten Wert zurückgibt oder man möchten den Status einer internen Variablen widerspiegeln, ohne dass explizite Methodenaufrufe erforderlich sind. In JavaScript kann dieses mit einem getter erreicht werden.

+ +

Es ist nicht möglich, dass ein Getter gleichzeitig an eine Eigenschaft gebunden ist und diese Eigenschaft tatsächlich einen Wert enthält, obwohl es möglich ist, einen Getter und einen Setter in Verbindung zu verwenden, um einen Pseudoeigenschaftstyp zu erstellen.

+ +

Folgendes ist zu beachten, wenn die get Syntax verwendet wird:

+ + + +

Beispiele

+ +

Definition eines Getters in einem neuen Objekt in der Objektinitialisierung

+ +

Folgendes erstellt eine Pseudoeigenschaft latest für das Objekt obj, welche dan letzte Arrayeintrag von log zurückgibt.

+ +
const obj = {
+  log: ['example','test'],
+  get latest() {
+    if (this.log.length === 0) return undefined;
+    return this.log[this.log.length - 1];
+  }
+}
+console.log(obj.latest); // "test".
+
+ +

Zu beachten ist, dass die Zuweisung eines Wertes auf latest keine Änderung bewirkt.

+ +

Löschen eines Getters mit dem delete Operator

+ +

Wenn ein Getter gelöscht werden soll, kann einfach {{jsxref("Operators/delete", "delete")}} benutzt werden:

+ +
delete obj.latest;
+
+ +

Definition eines Getter auf einem existierenden Objektes mit defineProperty

+ +

Um einem Getter später zu einem existierenden Objekt hinzuzufügen, kann jederzeit {{jsxref("Object.defineProperty()")}} benutzt werden.

+ +
const o = {a: 0};
+
+Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } });
+
+console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)
+ +

Einen berechneten Eigenschaftnamen benutzen

+ +
const expr = 'foo';
+
+const obj = {
+  get [expr]() { return 'bar'; }
+};
+
+console.log(obj.foo); // "bar"
+ +

Intelligente / Selbstüberschreibende / Lazy Getter

+ +

Mit Gettern kann eine Eigenschaft eines Objekts definiert werden, wobei der Wert der Eigenschaft nicht berechnen wird, bis auf die Eigenschaft zugegriffen wird. Ein Getter verschiebt die Kosten für die Berechnung des Werts auf den Zeitpunkt des Zugriffs. Wenn der der Getter nie benötigt wird, fallen nie Kosten an.

+ +

Eine weitere Optimierungstechnik, um die Berechnung eines Eigenschaftswerts zu verzögern und ihn für einen späteren Zugriff zwischenzuspeichern, sind intelligente (oder "memoisierte") Getter. Der Wert wird berechnet, wenn der Getter das erste Mal aufgerufen wird und wird dann zwischengespeichert, damit nachfolgende Zugriffe den zwischengespeicherten Wert zurückgeben, ohne ihn neu zu berechnen. Dies ist in den folgenden Situationen nützlich:

+ + + +
+

Das bedeutet, dass keine verzögerten Getter für eine Eigenschaft verwenden werden sollten, deren Wert sich voraussichtlich ändern wird, weil der Getter den Wert nicht neu berechnet.

+
+ +

Im folgenden Beispiel hat das Objekt einen Getter als eigene Eigenschaft. Beim Abrufen der Eigenschaft wird die Eigenschaft aus dem Objekt entfernt und erneut hinzugefügt, diesmal jedoch implizit als Dateneigenschaft. Abschließend wird der Wert zurückgegeben.

+ +
get notifier() {
+  delete this.notifier;
+  return this.notifier = document.getElementById('bookmarked-notification-anchor');
+},
+ +

Für Firefox Code sollte zusätzlich das XPCOMUtils.jsm Code Modul angeschaut werden, welches die defineLazyGetter() Funktion definiert.

+ +

get vs. defineProperty

+ +

Das get Schlüsselwort und {{jsxref("Object.defineProperty()")}} haben ähnliche Ergebnisse. Es gibt einen kleinen Unterschied zwischen beiden, wenn {{jsxref("classes")}} eingesetzt werden.

+ +

Wenn get eingesetzt wird, wird die Eigenschaft im Instnaz-Prototyp definiert, während beim Einsatz von {{jsxref("Object.defineProperty()")}} die Eigenschaft auf der Instanz definiert wird.

+ +
class Example {
+  get hello() {
+    return 'world';
+  }
+}
+
+const obj = new Example();
+console.log(obj.hello);
+// "world"
+
+console.log(Object.getOwnPropertyDescriptor(obj, 'hello'));
+// undefined
+
+console.log(
+  Object.getOwnPropertyDescriptor(
+    Object.getPrototypeOf(obj), 'hello'
+  )
+);
+// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }
+ +

Spezifikationen

+ + + + + + + + + + + + +
Spezifikation
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.functions.get")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/functions/index.html b/files/de/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..278d3e997d --- /dev/null +++ b/files/de/web/javascript/reference/functions/index.html @@ -0,0 +1,594 @@ +--- +title: Funktionen +slug: Web/JavaScript/Reference/Functions +tags: + - Constructor + - Function + - Functions + - JavaScript + - Parameter + - parameters +translation_of: Web/JavaScript/Reference/Functions +--- +
{{jsSidebar("Functions")}}
+ +

Allgemein gesagt, ist eine Funktion ein "Unterprogramm", welches von Code außerhalb der Funktion (oder innerhalb der Funktion, im Fall von Rekursion) aufgerufen wird. Wie Programme selbst auch, ist eine Funktion eine Sequenz von ausgewählten Statements, die als Funktionskörper bezeichnet wird. Der Funktion können der Werte übergeben werden und die Funktion wird einen Wert zurückgeben.

+ +

In JavaScript sind Funktionen First-Class Objekte, weil sie Eigenschaften und Methoden genau wie jedes andere Objekt haben können. Was sie von anderen Objekten unterscheidet ist, dass sie aufgerufen werden können. Kurz gesagt sind es Function Objekte.

+ +

Für mehr Beispiele und Erklärungen, siehe auch im JavaScript Guide über Funktionen.

+ +

Beschreibung

+ +

Jede Funktion in JavaScript ist ein Function Objekt. Siehe {{jsxref("Function")}} für mehr Informationen zu Eigenschaften und Methoden von Function Objekten.

+ +

Um einen Wert abweichend vom Standard zurückzugeben, muss eine Funktion ein return Statement haben, welches den Rückgabewert spezifiziert. Eine Funktion ohne ein return Statement wird den Standardwert zurückgeben. Im Fall eines Konstruktoraufrufes mit dem Schlüsselwort new, wird der als Standardwert der Wert vom this Parameter zurückgegeben. Für alle anderen Funktionen wird als Standardwert {{jsxref("undefined")}} zurückgegeben.

+ +

Die Parameter eines Funktionsaufrufes sind die Argumente der Funktion. Argumente werden als Werte der Funktion übergeben. Wenn die Funktion den Wert eines Argumentes ändert, wirkt sich die Änderung nicht global oder in der aufrufenden Funktion aus. Jedoch sind auch Objektreferenzen Werte, welche speziell sind: Wenn die Funktion die Eigenschaften eines referenzierte Objekts ändern, ist die Änderung außerhalb der Funktion sichtbar, wie im folgenden Beispiel gezeigt wird:

+ +
/* Deklariert die Funktion 'myFunc' */
+function myFunc(theObject) {
+  theObject.brand = "Toyota";
+}
+
+/*
+ * Deklariert die Variable 'mycar';
+ * Erstellt und initialisiert ein neues Objekt;
+ * Weist Referenz 'mycar' zu
+ */
+var mycar = {
+  brand: "Honda",
+  model: "Accord",
+  year: 1998
+};
+
+/* gibt 'Honda' aus */
+console.log(mycar.brand);
+
+/* Übergibt Objektreferenz der Funktion */
+myFunc(mycar);
+
+/*
+ * gibt 'Toyota' als Wert der 'brand' Eigenschaft
+ * des Objektes aus, so wie er von der Funktion geändert wurde.
+ */
+console.log(mycar.brand);
+
+ +

Das this Schlüsselwort referenziert nicht zum aktuell ausgeführten Funktion, so, dass man das Function Objekt über den Namen referenzierten muss, auch im Funktionskörper.

+ +

Funktionen definieren

+ +

Es gibt verschiedenen Möglichkeiten Funktionen zu definieren:

+ +

Die Funktionsdeklaration (function Statement)

+ +

Es gibt eine spezielle Syntax für das Deklarieren von Funktionen (siehe Funktionsstatement für mehr Details):

+ +
function name([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
Der Funktionsname.
+
+ +
+
param
+
Der Name eines Arguments, welches der Funktion übergeben wird. Eine Funktion kann bis zu 255 Argumente haben.
+
+ +
+
statements
+
Die Statements, welche den Funktionskörper der Funktion bilden.
+
+ +

Der Funktionsausdruck (function Ausdruck)

+ +

Ein Funktionsausdruck ist ähnlich wie eine Funktionsdeklaration und hat die selbe Syntax (siehe Funktionsausdruck für Details). Ein Funktionsausdruck ist manchmal ein Teil eines größeren Ausdrucks. Man kann benannte Funktionsausdrücke (in denen der Name des Ausdrucks zum Beispiel im Aufrufstack benutzt wird) oder anonyme Funktionsausdrücke definieren. Funktionsausdrücke werden nicht an den Anfang des Gültigkeitsbereiches verschoben (hoisted), was bedeutet, dass sie nicht vor der Definition im Code benutzt werden können.

+ +
function [name]([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
Der Funktionsname. Kann weggelassen werden, wodurch die Funktion eine sogenannte anonyme Funktion ist.
+
+ +
+
param
+
Der Name eines Arguments, welches der Funktion übergeben wird. Eine Funktion kann bis zu 255 Argumente haben.
+
statements
+
Die Statements, welche den Funktionskörper der Funktion bilden.
+
+ +

Hier ist ein Beispiel für einen anonymen Funktionsausdruck (name wird nicht benutzt):

+ +
var myFunction = function() {
+    statements
+}
+ +

Es ist auch möglich den Namen in der Funktionsdefinition erreichbar zu machen, indem eine benannter Funktionsausdruck erstellt wird:

+ +
var myFunction = function namedFunction(){
+    statements
+}
+
+ +

Ein Vorteil beim Erstellen eines benannten Funktionsausdrucks ist, dass im Fall eines auftretenden Fehlers, der Name der Funktion im Stack Trace enthalten ist, was es einfacher macht den Ursprung des Fehlers zu finden.

+ +

Wie gezeigt, beginnen beide Beispiele nicht mit dem function Schlüsselwort. Statements die Funktionen enthalten aber nicht mit function beginnen, sind Funktionsausdrücke.

+ +

Wenn eine Funktion nur einmal benutzt wird, wird ein Pattern namens IIFE (Immediately Invokable Function Expression) genutzt.

+ +
(function() {
+    statements
+})();
+ +

IIFE sind Funktionsausdrücke, die direkt nach dem Definieren ausgeführt werden.

+ +

Die Generatorfunktionendeklaration (function* Statement)

+ +

Es gibt eine spezielle Syntax für die Deklaration von Generatorfunktionen (siehe {{jsxref('Statements/function*', 'function* Statement')}} für Details):

+ +
function* name([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
Der Funktionsname.
+
+ +
+
param
+
Der Name eines Arguments, welches der Funktion übergeben wird. Eine Funktion kann bis zu 255 Argumente haben.
+
+ +
+
statements
+
Die Statements, welche den Funktionskörper der Funktion bilden.
+
+ +

Der Generatorfunktionsausdruck (function* Ausdruck)

+ +

Ein Generatorfunktionsausdruck ist ähnlich wie eine Generatorfunktionsdeklaration und hat die selbe Syntax (siehe {{jsxref('Operators/function*', 'function* expression')}} für Details):

+ +
function* [name]([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
Der Funktionsname. Kann weggelassen werden, wodurch die Funktion eine sogenannte anonyme Funktion ist.
+
+ +
+
param
+
Der Name eines Arguments, welches der Funktion übergeben wird. Eine Funktion kann bis zu 255 Argumente haben.
+
statements
+
Die Statements, welche den Funktionskörper der Funktion bilden.
+
+ +

Der Pfeilfunktionsausdruck (=>)

+ +

Eine Pfeilfunktionsausdruck hat eine kürzere Syntax und der this Wert ist lexikalisch gebunden (siehe Pfeilfunktionen für Details):

+ +
([param[, param]]) => {
+   statements
+}
+
+param => expression
+
+ +
+
param
+
Der Name eines Arguments. Keine Argumente müssen mit () angegeben werden. Für nur ein Argument sind die Klammern nicht notwendig (z. B. foo => 1).
+
statements or expression
+
Mehrere Statements müssen in Klammern geschrieben werden. Ein einziger Ausdruck benötigt keine Klammern. Dieser Ausdruck ist implizit der Rückgabewert der Funktion.
+
+ +

Der Function Konstruktor

+ +
+

Hinweis: Der Einsatz des Function Konstruktors, um eine Funktion zu erstellen wird nicht empfohlen, weil der Funktionskörper als String übergeben wird, welcher von einigen JS Engines nicht optimiert werden kann und zu Problemen führen kann.

+
+ +

Wie alle anderen Objekte, können {{jsxref("Function")}} Objekte mit dem new Operator erstellt werden:

+ +
new Function (arg1, arg2, ... argN, functionBody)
+
+ +
+
arg1, arg2, ... argN
+
Null oder mehr Namen, welche von der Funktion als formale Parameter benutzt werden. Jeder muss ein valider JavaScript Bezeichner sein.
+
+ +
+
functionBody
+
Ein String, der die JavaScript Statements enthält, die den Funktionskörper formen.
+
+ +

Das Ausführen des Function Konstruktors als Funktion (ohne den Einsatz des new Operators) hat den selben Effekt wie das Aufrufen als Konstruktor.

+ +

Der GeneratorFunction Konstruktor

+ +
+

Hinweis: GeneratorFunction ist kein globales Objekt, kann aber von Generatorfunktionsinstanzen erhalten werden (siehe {{jsxref("GeneratorFunction")}} für mehr Details).

+
+ +
+

Hinweis: Der Einsatz des GeneratorFunction Konstruktors, um eine Funktion zu erstellen wird nicht empfohlen, weil der Funktionskörper als String übergeben wird, welcher von einigen JS Engines nicht optimiert werden kann und zu Problemen führen kann.

+
+ +

Wie alle anderen Objekte, können {{jsxref("GeneratorFunction")}} Objekte mit dem new Operator erstellt werden:

+ +
new GeneratorFunction (arg1, arg2, ... argN, functionBody)
+
+ +
+
arg1, arg2, ... argN
+
Null oder mehr Namen, welche von der Funktion als formale Parameter benutzt werden. Jeder muss ein valider JavaScript Bezeichner sein oder eine Liste solcher Strings mit Komma getrennt. Zum Beispiel "x", "theValue", or "a,b".
+
+ +
+
functionBody
+
Ein String, der die JavaScript Statements enthält, die den Funktionskörper formen.
+
+ +

Das Ausführen des GeneratorFunction Konstruktors als Funktion (ohne den Einsatz des new Operators) hat den selben Effekt wie das Aufrufen als Konstruktor.

+ +

Funktionsparameter

+ +

Standardparameter

+ +

Standard Funktionsparameter erlauben es formale Parameter mit einem Standardwert zu initialisieren, wenn kein Wert oder undefined übergeben wird. Für mehr Details siehe Standardparameter.

+ +

Rest Parameter

+ +

Die Rest Parameter Syntax erlaubt die Repräsentation von beliebig fielen Argumenten als ein Array. Für mehr Details siehe Rest Parameter.

+ +

Das arguments Objekt

+ +

Man kann die Funktionsargumente in einer Funktion referenzieren, indem das arguments Objekt benutzt wird. Siehe arguments.

+ + + +

Methodenfunktionen definieren

+ +

Getter und Setter Funktionen

+ +

Man kann Getter (Zugriffsmethoden) und Setter (Änderungsmethoden) bei jedem Standardobjekt oder benutzerdefinierten Objekt, welches das Hinzufügen von neuen Eigenschaften unterstützt. Die Syntax für das Definieren von Gettern und Settern beim Einsatz der Objektliteralsyntax.

+ +
+
get
+
+

Bindet eine Objekteigenschaft an eine Funktion, welche aufgerufen wird, wenn der Wert der Eigenschaft abgefragt wird.

+
+
set
+
Bindet eine Objekteigenschaft an eine Funktion, welche aufgerufen wird, wenn der Wert der Eigenschaft geändert wird.
+
+ +

Methodendefinitionssyntax

+ +

Angefangen mit ECMAScript 2015 kann man eigene Methoden in einer kürzeren Syntax, ähnlich wie Getter und Setter, definieren. Siehe Methodendefinition für mehr Details.

+ +
var obj = {
+  foo() {},
+  bar() {}
+};
+ +

Konstruktor vs. Deklaration vs. Ausdruck

+ +

Das folgende wird verglichen:

+ +

Eine Funktion, die mit dem Function Konstruktor definiert wird und der Variablen multiply zugewiesen wird:

+ +
var multiply = new Function('x', 'y', 'return x * y');
+ +

Eine Funktionsdeklaration mit dem Namen multiply:

+ +
function multiply(x, y) {
+   return x * y;
+} // there is no semicolon here
+
+ +

Ein Funktionsausdruck einer anonymen Funktion, die der Variablen multiply zugewiesen wird:

+ +
var multiply = function(x, y) {
+   return x * y;
+};
+
+ +

Ein Funktionsausdruck der Funktion func_name, die der Variablen multiply zugewiesen wird:

+ +
var multiply = function func_name(x, y) {
+   return x * y;
+};
+
+ +

Unterschiede

+ +

Alle machen annähernd die selben Dinge, jedoch mit kleinen subtilen Unterschieden:

+ +

Es gibt einen Unterschied zwischen dem Funktionsnamen und der Variable, der die Funktion zugewiesen wird. Der Funktionsnamen kann nicht geändert werden, während die Variable, die mit der Funktion zugewiesen ist, überschrieben werden kann. Der Funktionsname kann nur innerhalb des Funktionskörpers benutzt werden. Der Versuch diesen außerhalb des Funktionskörpers zu benutzen resultiert in einem Fehler (oder undefined, wenn der Funktionsname vorher mit einem var Statement deklariert wurde). Zum Beispiel:

+ +
var y = function x() {};
+alert(x); // Führt zu einem Error
+
+ +

Der Funktionsname taucht auch auf, wenn die Funktion mit der toString Methode serialisiert wird.

+ +

Auf der anderen Seite ist die Variable, der die Funktion zugewiesen ist, nur durch ihren Gültigkeitsbereich begrenzt, der garantiert den Geltungsbereich einschließt, in dem die Funktion deklariert ist.

+ +

Wie das 4. Beispiel zeigt, kann sich der Funktionsname von dem Namen der Variablen, der die Funktion zugewiesen ist, unterscheiden. Diese sind nicht voneinander abhängig. Eine Funktionsdeklaration erstellt ebenfalls eine Variable mit dem selben Namen wie die Funktion. Im Gegensatz zu den durch Funktionsausdrücke definierten Funktionen können Funktionen, die durch Funktionsdeklarationen definiert sind, über ihren Namen in dem Bereich aufgerufen werden, in dem sie definiert wurden:

+ +

Eine Funktionsdefinition mit 'new Function' hat keinen Funktionsnamen. In der SpiderMonkey JavaScript Engine haben solche Funktionen in serialisierter Form immer den Namen "anonymous". Zum Beispiel gibt alert(new Function()) folgendes aus:

+ +
function anonymous() {
+}
+
+ +

Weil die Funktion aktuell keinen Namen hat, ist anonymous keine Variable, die in der Funktion erreicht werden kann. Zum Beispiel führt folgendes zu einem Fehler:

+ +
var foo = new Function("alert(anonymous);");
+foo();
+
+ +

Anders als Funktionsdefinitionen mit Funktionsausdrücken oder dem Function Konstruktor, kann eine Funktionsdefinition mit Funktionsdeklaration genutzt werden, bevor bevor sie deklariert wird. Zum Beispiel:

+ +
foo(); // alerts FOO!
+function foo() {
+   alert('FOO!');
+}
+
+ +

Eine Funktionsdefinition mit einem Funktionsausdruck oder einer Funktionsdeklaration erbt den aktuellen Gültigkeitsbereich. Das bedeutet, die Funktion bildet eine Closure. Auf der anderen Seite erbt eine Funktion, die mit dem Function Konstruktor definiert wird, keinen anderen Gültigkeitsbereich außer dem globalen (welchen alle Funktionen erben).

+ +
/*
+ * Declare and initialize a variable 'p' (global)
+ * and a function 'myFunc' (to change the scope) inside which
+ * declare a varible with same name 'p' (current) and
+ * define three functions using three different ways:-
+ *     1. function declaration
+ *     2. function expression
+ *     3. function constructor
+ * each of which will log 'p'
+ */
+var p = 5;
+function myFunc() {
+    var p = 9;
+
+    function decl() {
+        console.log(p);
+    }
+    var expr = function() {
+        console.log(p);
+    };
+    var 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)
+ */
+
+ +

Funktionsdefinitionen als Funktionsausdrücke und Funktionsdeklarationen werden nur einmal übersetzt, während das bei Function Konstruktoren nicht so ist. Das bedeutet, dass der Funktionskörper, der dem Function Konstruktor übergeben wird, mit jedem Aufruf des Konstruktors erneut übersetzt wird. Weil ein Funktionsausdruck jedes mal eine Closure erstellt und der Funktionskörper aber nicht erneut übersetzt wird, sind Funktionsausdrücke um einiges schneller als "new Function(...)". Deshalb sollte der Function Konstruktor überall vermieden werden, wo es geht.

+ +

Es sollte bemerkt werden, dass immer wenn Funktionsausdrücke und Funktionsdeklarationen verschachtelt in einer Funktion generiert vom Function Konstruktor erstellt werden, sie nicht mehrfach übersetzt werden. Zum Beispiel:

+ +
var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))();
+foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.
+ +

Eine Funktionsdeklaration wird sehr einfach (und oft unabsichtlich) in einen Funktionsausdruck geändert. Eine Funktionsdeklaration hört auf eine zu sein, wenn:

+ + + +
var x = 0;               // source element
+if (x === 0) {           // source element
+   x = 10;               // not a source element
+   function boo() {}     // not a source element
+}
+function foo() {         // source element
+   var y = 20;           // source element
+   function bar() {}     // source element
+   while (y === 10) {    // source element
+      function blah() {} // not a source element
+      y++;               // not a source element
+   }
+}
+
+ +

Beispiele

+ +
// Funktionsdeklaration
+function foo() {}
+
+// Funktionsausdruck
+(function bar() {})
+
+// Funktionsausdruck
+x = function hello() {}
+
+
+if (x) {
+   // Funktionsausdruck
+   function world() {}
+}
+
+
+// Funktionsdeklaration
+function a() {
+   // Funktionsdeklaration
+   function b() {}
+   if (0) {
+      // Funktionsausdruck
+      function c() {}
+   }
+}
+
+ +

Funktionen als Block-Level-Element

+ +

Beginnend mit ES2015 sind Funktionen im strict Modus an den Block gebunden. Vor ES2015 waren Funktionen auf Blockebene im strikten Modus verboten.

+ +
'use strict';
+
+function f() {
+  return 1;
+}
+
+{
+  function f() {
+    return 2;
+  }
+}
+
+f() === 1; // true
+
+// f() === 2 nicht im strict Modus
+
+ +

Block-level Funktionen im nicht-strict Code

+ +

Kurz gesagt: nicht machen.

+ +

Im nicht strict Code verhalten sich Funktionsdeklarationen innerhalb von Blöcken merkwürdig. Zum Beispiel:

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

ES2015 besagt, dass wenn shouldDefineZero false ist, zero niemals definiert wird, weil der Block nie ausgeführt wird. Jedoch ist das ein neuer Teil des Standards. Historisch war dieser Teil unspezifiziert und einigen Browser definierten zero egal, ob der Block ausgeführt wurde oder nicht.

+ +

Im strict Modus verhalten sich alle Browser, die ES2015 unterstützen, gleich. zero wird nur Definiert wenn shouldDefineZero true ist und nur in dem Gültigkeitsbereich des if-Blocks.

+ +

Ein sicherer Weg eine Funktion bedingt zu definieren ist es einen Funktionsausdruck einer Variablen zuzuweisen:

+ +
var zero;
+if (shouldDefineZero) {
+   zero = function() {
+      console.log("This is zero.");
+   };
+}
+
+ +

Beispiele

+ +

Zurückgeben einer formatierten Zahl

+ +

Die folgende Funktion gibt einen String zurück, der eine formatierte Zahlenrepräsentation mit führenden Nullen enthält.

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

Die folgende Statements rufen die padZeros Funktion auf.

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

Prüfen, ob eine Funktoin vorhanden ist

+ +

Man kann prüfen, ob eine Funktion existiert, indem man den typeof Operator benutzt wird. Im folgenden Beispiel wird getestet, ob das Objekt window eine Eigenschaft mit dem Namen noFunc hat, die eine Funktion ist. Wenn das so ist, wird sie benutzt, andernfalls wird etwas anderes gemacht.

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

Zu beachten ist, dass im if Test eine Referenz zu noFunc benutzt wird — es stehen keine Klammern () nach dem Funktionsnamen, so dass die Funktion nicht aufgerufen wird.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.0
{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}}Neu: Pfeilfunktionen, Generatorfunktionen, Standardparameter, Rest Parameter.
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}}
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.functions")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/functions/methoden_definitionen/index.html b/files/de/web/javascript/reference/functions/methoden_definitionen/index.html new file mode 100644 index 0000000000..bf4d432627 --- /dev/null +++ b/files/de/web/javascript/reference/functions/methoden_definitionen/index.html @@ -0,0 +1,230 @@ +--- +title: Methoden Definitionen +slug: Web/JavaScript/Reference/Functions/Methoden_Definitionen +tags: + - ECMAScript 2015 + - Funktionen + - JavaScript + - Objekte + - Syntax +translation_of: Web/JavaScript/Reference/Functions/Method_definitions +--- +
{{JsSidebar("Functions")}}
+ +

Beginnend mit ECMAScript 2015 wurde eine kürzere Syntax für Methodendefinitionen in Objekt Initialisierungen eingeführt. Es ist eine Abkürzung für die Zuweisung einer Funktion an einen Methodennamen.

+ +

Syntax

+ +
var obj = {
+  property( parameters… ) {},
+  *generator( parameters… ) {},
+// also with computed keys:
+  [property]( parameters… ) {},
+  *[generator]( parameters… ) {},
+// compare ES5 getter/setter syntax:
+  get property() {},
+  set property(value) {}
+};
+
+ +

Beschreibung

+ +

Die Syntax der Kurzschreibweise ähnelt der in ECMAScript 2015 eingeführten Syntax der getter und setter.

+ +

Gegeben sei der folgende Quellcode:

+ +
var obj = {
+  foo: function() {},
+  bar: function() {}
+};
+ +

Jetzt können Sie das abkürzen zu:

+ +
var obj = {
+  foo() {},
+  bar() {}
+};
+ +
+

Hinweis: Die kurze Syntax benutzt benamte Funktionen statt anonymen Funktionen (wie in ...foo: function() {}...). Benamte Funktionen können sich vom Funktionskörper aus aufrufen (für anonyme Funktionen ist das unmöglich, weil sie keinen Bezeichner haben). Für mehr Details, siehe {{jsxref("Operators/function","function","#Beispiele")}}.

+
+ +

Kurze Generatormethoden

+ +

Generatormethoden können mit der kurzen Syntax ebenfalls definiert werden. Zu beachten ist, dass der Stern (*) in der kurzen Syntax nur vor dem Namen der Generatoreigenschaft geschrieben werden kann. * g(){} funktioniert, g *(){} funktioniert nicht.

+ +
// Using a named property (pre-ES2015)
+var obj2 = {
+  g: function*() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+// The same object using shorthand syntax
+var obj2 = {
+  * g() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+var it = obj2.g();
+console.log(it.next().value); // 0
+console.log(it.next().value); // 1
+ +

Methodendefinitionen die nicht konstruiert werden können

+ +

Alle Methodendefinitionen die keine Konstruktoren sind werden einen {{jsxref("TypeError")}} erzeugen,  wenn man versucht sie zu instantieren.

+ +
var obj = {
+  method() {},
+};
+new obj.method; // TypeError: obj.method is not a constructor
+
+var obj = {
+  * g() {}
+};
+new obj.g; // TypeError: obj.g is not a constructor (changed in ES2016)
+
+ +

Beispiele

+ +

Ein einfacher Testfall

+ +
var obj = {
+  a : "foo",
+  b(){ return this.a; }
+};
+console.log(obj.b()); // "foo"
+
+ +

Berechnete Eigenschaftsnamen

+ +

Die Kurzschreib-Syntax unterstützt auch berechnete Eigenschaftsnamen.

+ +
var bar = {
+  foo0 : function (){return 0;},
+  foo1(){return 1;},
+  ["foo" + 2](){return 2;},
+};
+
+console.log(bar.foo0()); // 0
+console.log(bar.foo1()); // 1
+console.log(bar.foo2()); // 2
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ES7', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES7')}}Geändert, dass Generatormethoden ebenfalls nicht initialisierbar sind und einen Fehler schmeißen, wenn sie mit new eingesetzt werden.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Method definition shorthand{{CompatChrome("39")}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatOpera("26")}}{{CompatNo}}
Generator methods are not constructable (ES2016){{CompatUnknown}}{{CompatGeckoDesktop("43")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Method definition shorthand{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Generator methods are not constructable (ES2016){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("43")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

SpiderMonkey spezifische Hinweise

+ + + +

See also

+ + diff --git a/files/de/web/javascript/reference/functions/pfeilfunktionen/index.html b/files/de/web/javascript/reference/functions/pfeilfunktionen/index.html new file mode 100644 index 0000000000..a29b5ea3cf --- /dev/null +++ b/files/de/web/javascript/reference/functions/pfeilfunktionen/index.html @@ -0,0 +1,360 @@ +--- +title: Pfeilfunktionen +slug: Web/JavaScript/Reference/Functions/Pfeilfunktionen +tags: + - ECMAScript 2015 + - Functions + - Intermediate + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +--- +
{{jsSidebar("Functions")}}
+ +

Der Ausdruck einer Pfeilfunktion hat eine kürzere Syntax als ein Funktionsausdruck und hat kein eigenes this, arguments, super, oder new.target. Solche Funktionsausdrücke sind am besten für Funktionen, die nicht als Methode genutzt werden, geeignet und können nicht als Konstruktoren verwendet werden.

+ +
{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}
+ +

Syntax

+ +

Basis Syntax

+ +
(param1, param2, …, paramN) => { statements }
+(param1, param2, …, paramN) => expression
+// gleich zu: => { return expression; }
+
+// Klammern sind optional, wenn nur ein Parametername vorhanden ist:
+(singleParam) => { statements }
+singleParam => { statements }
+
+// Die Parameterliste für eine parameterlose Funktion muss mit einem Klammernpaar geschrieben werden
+() => { statements }
+
+ +

Fortgeschrittene Syntax

+ +
// Der Body kann eingeklammert werden, um ein Objektliteral Ausdruck zurück zu geben:
+params => ({foo: bar})
+
+// Rest Parameter und Default Parameter werden unterstützt
+(param1, param2, ...rest) => { statements }
+(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
+statements }
+
+// Destrukturierung in der Parameterliste ist ebenfalls unterstützt
+var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
+f(); // 6
+
+ +

Beschreibung

+ +

Siehe auch "ES6 In Depth: Arrow functions" on hacks.mozilla.org.

+ +

Zwei Faktoren haben die Einführung von Pfeilfunktionen beeinflusst: kürzere Funktionen und dass this nicht gebunden ist.

+ +

Kürzere Funktionen

+ +
var elements = [
+  "Hydrogen",
+  "Helium",
+  "Lithium",
+  "Beryllium"
+];
+
+elements.map(function(element) {
+  return element.length
+}); // [8, 6, 7, 9]
+
+elements.map(element => {
+  return element.length
+}); // [8, 6, 7, 9]
+
+elements.map(({length}) => length); // [8, 6, 7, 9]
+ +

Keine Bindung von this

+ +

Vor (der Einführung von) Pfeilfunktionen definierte jede Funktion ihren eigenen this-Wert (d.h. ein neues Objekt im Falle eines Konstruktors; in strict mode Funktionsaufrufen nicht definiert; bzw. das kontextuelle Objekt, wenn die Funktion als eine "Objekt-Methode" aufgerufen wurde, usw.). Dies stellte sich innerhalb eines objektorientierten Programmierstils als lästig heraus.

+ +
function Person() {
+  // Der Person() Konstruktor definiert `this` als Instanz von sich selbst.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // Im nicht Strict Modus, definiert die growUp() Funktion `this`
+    // als das globale Objekt (weil das der Ort ist, an dem growUp() ausgeführt wird),
+    // das sich von dem `this`, welches vom Person() Konstruktor definiert wurde unterscheidet.
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();
+ +

In ECMAScript 3/5 konnte dies durch Zuweisung des Wertes von this an eine Variable, welche umschlossen werden konnte, behoben werden.

+ +
function Person() {
+  var that = this;
+  that.age = 0;
+
+  setInterval(function growUp() {
+    // Der Rückruf bezieht sich auf jene `that`-Variable,
+    // deren Wert das zu erwartende Objekt ist.
+    that.age++;
+  }, 1000);
+}
+ +

Alternativ könnte eine gebundene Funktion erstellt werden, sodass der passende this-Wert an die growUp()-Funktion übergeben würde.

+ +

Eine Pfeilfunktion erstellt keinen eigenen this Kontext, wodurch this die ursprüngliche Bedeutung des umschließenden Kontextes trägt. Somit funktioniert der folgende Code wie erwartet.

+ +
function Person(){
+  this.age = 0;
+
+  setInterval(() => {
+    this.age++; // |this| bezieht sich entsprechend auf das Person-Objekt
+  }, 1000);
+}
+
+var p = new Person();
+ +

Zusammenhang mit dem Strict Mode

+ +

Vorausgesetzt, dass this aus dem umschließenden lexikalischen Kontext kommt, werden Strict Mode Regeln bezüglich this einfach ignoriert.

+ +
var f = () => {'use strict'; return this};
+f() === window; // oder das globale Objekt
+ +

Die restlichen strict mode Regeln verhalten sich normal.

+ +

Aufruf durch call oder apply

+ +

Da this in Pfeilfunktionen nicht gebunden ist, können call() oder apply() Methoden nur Argumente übergeben; this wird ignoriert:

+ +
var adder = {
+  base : 1,
+
+  add : function(a) {
+    var f = v => v + this.base;
+    return f(a);
+  },
+
+  addThruCall: function(a) {
+    var f = v => v + this.base;
+    var b = {
+      base : 2
+    };
+
+    return f.call(b, a);
+  }
+};
+
+console.log(adder.add(1));         // Dies würde 2 ausgeben
+console.log(adder.addThruCall(1)); // Dies würde nach wie vor 2 ausgeben
+ +

Keine Bindung von Argumenten

+ +

Pfeilfunktionen haben kein eigenes arguments Objekt. Somit ist arguments einfach eine Referenz auf den Namen innerhalb des umschließenden Geltungsbereichs (scope).

+ +
var arguments = [1, 2, 3];
+var arr = () => arguments[0];
+
+arr(); // 1
+
+function foo(n) {
+  var f = () => arguments[0] + n; // implizite Argumenten-Bindung von foo
+  return f();
+}
+
+foo(1); // 2
+ +

In den meisten Fällen sind Rest Parameters eine gute Alternative zum Einsatz des arguments Objektes:

+ +
function foo(n) {
+  var f = (...args) => args[0] + n;
+  return f(10);
+}
+
+foo(1); // 11
+ +

Pfeilfunktionen als Methoden

+ +

Wie angegeben, sind Ausdrücke von Pfeilfunktionen am besten geeignet für nicht-methodische Funktionen. Man sehe, was geschieht, wenn versucht wird, sie als Methoden zu verwenden.

+ +
'use strict';
+
+var obj = {
+  i: 10,
+  b: () => console.log(this.i, this),
+  c: function() {
+    console.log( this.i, this)
+  }
+}
+obj.b(); // gibt undefined, Window {...} aus (oder das globale Objekt)
+obj.c(); // gibt 10, Object {...} aus
+ +

Pfeilfunktionen definieren (binden sozusagen) kein eigenes this. Ein anderes Beispiel, das {{jsxref("Object.defineProperty()")}} betrifft:

+ +
'use strict';
+
+var obj = {
+  a: 10
+};
+
+Object.defineProperty(obj, "b", {
+  get: () => {
+    console.log(this.a, typeof this.a, this);
+    return this.a+10; // stellt das globale Objekt 'Window' dar, 'this.a' gibt daher 'undefined' zurück
+  }
+});
+
+ +

Verwendung des new Operators

+ +

Pfeilfunktionen können nicht als Konstruktoren verwendet werden. Sie führen zu einem Fehler, wenn auf ihnen ein new angewendet wird.

+ +
var Foo = () => {};
+var foo = new Foo(); // TypeError: Foo is not a constructor
+
+ +

Einsatz der prototype Eigenschaft

+ +

Pfeilfunktionen haben keine prototype Eigenschaft.

+ +
var Foo = () => {};
+console.log(Foo.prototype); // undefined
+
+ +

Verwendung des Schlüsselwortes yield

+ +

Das yield-Schlüsselwort sollte im Körper einer Pfeilfunktion nicht verwendet werden (außer wenn dies innerhalb von darin weiter verschachtelten Funktionen erlaubt ist). Als Folge können Pfeilfunktionen nicht als Generatoren verwendet werden.

+ +

Funktionskörper

+ +

Pfeilfunktionen können entweder einen "knappen" oder einen gewöhnlichen "Blockkörper" haben.

+ +

In einem knappen Körper ist lediglich ein Ausdruck nötig und eine implizite Rückgabe wird angehängt. In einem Blockkörper muss eine explizite Rückgabe-Anweisung verwendet werden.

+ +
var func = x => x * x;
+// knappe Syntax, implizierte Rückgabe
+
+var func = (x, y) => { return x + y; };
+// mit Blockkörper, explizite Rückgabe wird benötigt
+
+ +

Rückgabe von Objekt-Literalen

+ +

Man bedenke, dass die Rückgabe von Objekt-Literalen unter Verwendung der knappen Syntax params => {object:literal} nicht so ausgeführt wird, wie man es erwarten würde:

+ +
var func = () => {  foo: 1  };
+// Der Aufruf von func() gibt undefined zurück!
+
+var func = () => {  foo: function() {}  };
+// SyntaxError: function-Anweisung erfordert einen Namen
+ +

Der Grund dafür ist, dass der Code in geschweiften Klammern ({}) als eine Sequenz von Anweisungen übersetzt wird (d.h. foo wird als Bezeichner behandelt und nicht als Schlüssel eines Objekt-Literals).

+ +

Man bedenke, das Objekt-Literal in Klammern zu setzen:

+ +
var func = () => ({ foo: 1 });
+ +

Zeilenumbruch

+ +

Pfeilfunktionen können keinen Zeilenumbruch zwischen Parametern und dem Pfeil haben.

+ +
var func = ()
+           => 1;
+// SyntaxError: Ausdruck erwartet, '=>' erhalten
+ +

Übersetzungsreihenfolge

+ +

Der Pfeil innerhalb einer Pfeilfunktion ist kein Operator. Allerdings haben Pfeilfunktionen im Vergleich zu gewöhnlichen Funktionen besondere Übersetzungsregeln, welche mit der Priorität von Operatoren (operator precedence) anders interagieren.

+ +
let callback;
+
+callback = callback || function() {}; // ok
+
+callback = callback || () => {};
+// SyntaxError: invalid arrow-function arguments
+
+callback = callback || (() => {});    // ok
+
+ +

Weitere Beispiele

+ +
// Eine leere Pfeilfunktion gibt undefined zurück
+let empty = () => {};
+
+(() => "foobar")()
+// Gibt "foobar" zurück
+// (Das ist eine Immediately Invoked Function Expression
+// siehe IIFE im Glossar
+
+var simple = a => a > 15 ? 15 : a;
+simple(16); // 15
+simple(10); // 10
+
+let max = (a, b) => a > b ? a : b;
+
+// Einfaches filtering, mapping, ... von Arrays
+
+var arr = [5, 6, 13, 0, 1, 18, 23];
+
+var sum = arr.reduce((a, b) => a + b);
+// 66
+
+var even = arr.filter(v => v % 2 == 0);
+// [6, 0, 18]
+
+var double = arr.map(v => v * 2);
+// [10, 12, 26, 0, 2, 36, 46]
+
+// Weitere knappe Zusicherungsketten (promise chains)
+promise.then(a => {
+  // ...
+}).then(b => {
+   // ...
+});
+
+// Parameterlose Pfeilfunktionen, welche visuell einfacher zu verstehen sind
+setTimeout( _ => {
+  console.log("I happen sooner");
+  setTimeout( _ => {
+    // deeper code
+    console.log("I happen later");
+  }, 1);
+}, 1);
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("javascript.functions.arrow_functions")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/functions/rest_parameter/index.html b/files/de/web/javascript/reference/functions/rest_parameter/index.html new file mode 100644 index 0000000000..a529c7b1d6 --- /dev/null +++ b/files/de/web/javascript/reference/functions/rest_parameter/index.html @@ -0,0 +1,167 @@ +--- +title: Rest Parameter +slug: Web/JavaScript/Reference/Functions/rest_parameter +tags: + - Functions + - JavaScript + - Rest + - Rest Parameter +translation_of: Web/JavaScript/Reference/Functions/rest_parameters +--- +
{{jsSidebar("Functions")}}
+ +

Mit der Rest Parameter Syntax kann man beliebig viele Parameter als Array empfangen.

+ +
{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}
+ + + +

Syntax

+ +
function f(a, b, ...restArgs) {
+  // ...
+}
+
+ +

Beschreibung

+ +

Wenn vor dem letzten Parameter einer Funktion ... steht wird aus diesem Parameter ein Array von 0 (inklusiv) bis zu restArgs.length (exklusiv), welches weitere der Funktion übergebene Parameter enthält.

+ +

Im oberen Beispiel enthält das restArgs alle weiteren Argumente außer die ersten beiden, da diese bereits von den Variablen a und b erfasst werden.

+ +

Unterschiede zwischen Rest Parametern und dem arguments Objekt

+ +

Es gibt drei Hauptunterschiede zwischen Rest Parametern und dem arguments Objekt:

+ + + +

Von arguments zu einem Array

+ +

Rest Parameter wurden eingeführt, um Standardcode zu reduzieren, welche beim Einsatz von arguments anfällt

+ +
// Before rest parameters, the following could be found:
+function f(a, b) {
+  var args = Array.prototype.slice.call(arguments, f.length);
+
+  // …
+}
+
+// to be equivalent of
+
+function f(a, b, ...args) {
+
+}
+
+ +

Destrukturierte Rest Parameter

+ +

Rest Parameter können destrukturiert werden, was bedeutet, dass sie in einzelne Variablen entpackt werden können. Siehe destrukturierende Zuweisung.

+ +
function f(...[a, b, c]) {
+  return a + b + c;
+}
+
+f(1)          // NaN (b and c are undefined)
+f(1, 2, 3)    // 6
+f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)
+ +

Beispiele

+ +

Weil theArgs ein Array ist, ist die Anzahl der Argumente mit der length Eigenschaft gegeben:

+ +
function fun1(...theArgs) {
+  console.log(theArgs.length);
+}
+
+fun1();  // 0
+fun1(5); // 1
+fun1(5, 6, 7); // 3
+
+ +

Im nächsten Beispiel wird ein Rest Parameter eingesetzt, um alle Argumente außer dem ersten in einem Array zu sammeln. Jedes wird dann mit dem ersten Argument multipliziert und als Array zurückgegeben:

+ +
function multiply(multiplier, ...theArgs) {
+  return theArgs.map(function(element) {
+    return multiplier * element;
+  });
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+
+ +

Das folgende Beispiel zeigt, dass Array Methoden auf Rest Parameter jedoch nicht auf arguments Objekten eingesetzt werden können:

+ +
function sortRestArgs(...theArgs) {
+  var sortedArgs = theArgs.sort();
+  return sortedArgs;
+}
+
+console.log(sortRestArgs(5, 3, 7, 1)); // shows 1, 3, 5, 7
+
+function sortArguments() {
+  var sortedArgs = arguments.sort();
+  return sortedArgs; // this will never happen
+}
+
+// throws a TypeError: arguments.sort is not a function
+console.log(sortArguments(5, 3, 7, 1));
+
+ +

Um Array Methoden auf einem arguments Objekt zu benutzen, muss dieses in ein echtes Array konvertiert werden.

+ +
function sortArguments() {
+  var args = Array.from(arguments);
+  var sortedArgs = args.sort();
+  return sortedArgs;
+}
+console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES6')}}Initiale Definition
{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ +
+
+ + +

{{Compat("javascript.functions.rest_parameters")}}

+
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/functions/set/index.html b/files/de/web/javascript/reference/functions/set/index.html new file mode 100644 index 0000000000..7b0e5fcd83 --- /dev/null +++ b/files/de/web/javascript/reference/functions/set/index.html @@ -0,0 +1,149 @@ +--- +title: Setter +slug: Web/JavaScript/Reference/Functions/set +tags: + - ECMAScript 5 + - Functions + - JavaScript +translation_of: Web/JavaScript/Reference/Functions/set +--- +
{{jsSidebar("Functions")}}
+ +

Die set Syntax bindet eine Objekteigenschaft an eine Funktion welche aufgerufen wird, wenn die Eigenschaft neu beschrieben wird.

+ +
{{EmbedInteractiveExample("pages/js/functions-setter.html")}}
+ + + +

Syntax

+ +
{set prop(val) { . . . }}
+{set [expression](val) { . . . }}
+ +

Parameter

+ +
+
prop
+
Der Name der Eigenschaft, die an die gegebene Funktion gebunden wird.
+
+ +
+
val
+
Ein Alias für die Variable, die den Wert enthält, der der Eigenschaft prop zugewiesen wird.
+
expression
+
Beginnend mit ECMAScript 2015, kann auch ein Ausdruck für einen berechneten Eigenschaftsnamen genutzt werden, der an die Funktion gebunden wird.
+
+ +

Beschreibung

+ +

In JavaScript kann ein Setter benutzt werden, um eine Funktion aufzurufen, wenn eine Eigenschaft geändert werden soll. Setter werden oft in Verbindung mit Gettern als Pseudoeigenschaft benutzt. Es ist nicht möglich gleichzeitig einen Setter auf einer Eigenschaft zu haben, die eine tatsächlichen Wert hält.

+ +

Das folgende ist zu beachten, wenn mit der set Syntax gearbeitet wird:

+ +
+ +
+ +

Ein Setter kann mit dem delete Operator gelöscht werden.

+ +

Beispiele

+ +

Definieren eines Setters in einem neuen Objekt in der Objektinitialisierung

+ +

Das folgende definiert eine Pseudoeigenschaft current im Objekt language, die bei einer Zuweisung einen Wert in das log Array hinzufügt:

+ +
var language = {
+  set current(name) {
+    this.log.push(name);
+  },
+  log: []
+}
+
+language.current = 'EN';
+console.log(language.log); // ['EN']
+
+language.current = 'FA';
+console.log(language.log); // ['EN', 'FA']
+
+ +

Zu beachten ist, dass current nicht definiert ist und der Zugriff auf diese undefined als Ergebnis liefert.

+ +

Löschen eines Setter mit dem delete Operator

+ +

Wenn ein Setter gelöscht werden soll, muss man einfach delete benutzen:

+ +
delete o.current;
+
+ +

Definieren eines Setters auf einem existierenden Objekts mit defineProperty

+ +

Um einen Setter später zu einem existierenden Objekt hinzuzufügen, benutzt man {{jsxref("Object.defineProperty()")}}.

+ +
var o = {a: 0};
+
+Object.defineProperty(o, 'b', { set: function(x) { this.a = x / 2; } });
+
+o.b = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
+console.log(o.a) // 5
+ +

Einsatz eines berechneten Eigenschaftsnamen

+ +
var expr = 'foo';
+
+var obj = {
+  baz: 'bar',
+  set [expr](v) { this.baz = v; }
+};
+
+console.log(obj.baz); // "bar"
+obj.foo = 'baz';      // run the setter
+console.log(obj.baz); // "baz"
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Initiale Definition.
{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES6')}}Berechnete Eigenschaftsnamen hinzugefügt.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.functions.set")}}

+ +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf