diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
commit | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch) | |
tree | d4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/de/web/javascript/reference/global_objects/function | |
parent | 33058f2b292b3a581333bdfb21b8f671898c5060 (diff) | |
download | translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2 translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip |
initial commit
Diffstat (limited to 'files/de/web/javascript/reference/global_objects/function')
14 files changed, 1936 insertions, 0 deletions
diff --git a/files/de/web/javascript/reference/global_objects/function/apply/index.html b/files/de/web/javascript/reference/global_objects/function/apply/index.html new file mode 100644 index 0000000000..784843e276 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/function/apply/index.html @@ -0,0 +1,226 @@ +--- +title: Function.prototype.apply() +slug: Web/JavaScript/Reference/Global_Objects/Function/apply +tags: + - Function + - JavaScript + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>apply()</strong></code> Methode ruft eine Funktion mit gegebenem <code>this</code> Wert und <code>arguments</code> als Array (oder einem <a href="/de/docs/Web/JavaScript/Guide/Indexed_collections#Mit_Array-ähnlichen_Objekten_arbeiten">Array ähnlichem Objekt</a>).</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Die Syntax dieser Funktion ist größtenteils identisch zu der Funktion {{jsxref("Function.call", "call()")}}. Der fundamentale Unterschied ist, dass <code>call()</code> <strong>eine Liste von Argumenten</strong> und <code>apply()</code> <strong>ein Array mit Argumenten</strong> übergeben bekommt.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/function-apply.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>function</var>.apply(<var>thisArg</var>, [<var>argsArray</var>])</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>Optional. Der Wert von <code>this</code>, der für den Aufruf der Funktion <em><code>func</code></em> genutzt wird. Zu beachten ist, dass <code>this</code> möglicherweise nicht der Wert ist, den die Methode sieht: Wenn die Methode eine Funktion im {{jsxref("Functions_and_function_scope/Strict_mode", "non-strict mode", "", 1)}} ist, werden {{jsxref("Global_Objects/null", "null")}} und {{jsxref("Global_Objects/undefined", "undefined")}} mit dem globalen Objekt ersetzt und primitive Werte werden in ein Hüllobjekt umgewandelt.</dd> + <dt><code>argsArray</code></dt> + <dd>Optional. Ein Array ähnliches Objekt, welches die Argumente spezifiziert, welche beim Aufruf von <em><code>func</code></em> benutzt werden, oder {{jsxref("null")}} oder {{jsxref("undefined")}}, wenn keine Argumente übergeben werden. Mit Einführung von ECMAScript 5 können diese Argumente mit einem generische Array ähnliches Objekt statt einem Array übergeben werden. Für mehr Informationen sollte die {{anch("Browserkompatibilität", "Browserkompatibilität")}} geprüft werden.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Das Ergebnis der aufgerufenen Funktion mit dem spezifischen <code><strong>this</strong></code> Wert und Parametern.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Man kann ein anderes <code>this</code> Objekt für den Aufruf einer existierenden Funktion zuweisen. <code>this</code> referenziert zum aktuellen Objekte, dem aufrufenden Objekt. Mit <code>apply</code> kann eine Methode geschrieben und in einem anderen Objekt vererbt werden, ohne die Methode für das neue Objekte neu zu schreiben.</p> + +<p><code>apply</code> ist sehr ähnlich zu {{jsxref("Function.call", "call()")}}, mit der Ausnahme des Typen der übergebenen Argumente. Man kann ein Array von Argumenten statt einer Menge von benannten Parametern benutzen. Mit <code>apply</code> kann man ein Arrayliteral benutzen, wie zum Beispiel <code>fun.apply(this, ['eat', 'bananas'])</code> oder ein {{jsxref("Array")}} Objekt, wie zum Beispiel <code>fun.apply(this, new Array('eat', 'bananas'))</code>.</p> + +<p>Für den <code>argsArray</code> Parameter kann auch {{jsxref("Functions/arguments", "arguments")}} eingesetzt werden. <code>arguments</code> ist eine lokale Variable einer Funktion. Sie kann für alle nicht spezifizieren Argumente bei einem Aufruf benutzt werde. Dadurch muss man die Argumente eines Aufrufers nicht kennen, wenn die <code>apply</code> Methode genutzt wird. Man kann <code>arguments</code> nutzen, um alle Argumente eines Aufrufers zu übergeben. Das aufgerufene Objekt ist dann verantwortlich für das Verarbeiten der Argument.</p> + +<p>Seit ECMAScript in der 5. Ausgabe kann jedes Objekt übergeben werden, welches Array ähnlich ist, was in der Praxis bedeutet, dass es eine <code>length</code> Eigenschaft hat und Ganzzahlige Eigenschaften im Bereich von <code>0</code> bis <code>length-1</code> besitzt. Zum Beispiel kann man {{domxref("NodeList")}} oder benutzerdefinierte Objekte wie <code>{ 'length': 2, '0': 'eat', '1': 'bananas' }</code> benutzen.</p> + +<div class="note">Viele Browser, auch Chrome 14 und Internet Explorer 9, unterstützen keine Array ähnlichen Objekte, was zu einem Fehler führt.</div> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Einsatz_von_apply_um_ein_Array_an_ein_anderes_zu_hängen">Einsatz von <code>apply</code> um ein Array an ein anderes zu hängen</h3> + +<p>Man kann <code>push</code> benutzen, um ein Element an ein Array anzufügen. Weil <code>push</code> eine variable Anzahl von Argumenten enthält, kann man auch mehrere Element mit einem Aufruf hinzufügen. Übergibt man jedoch ein Array an die <code>push</code> Methode, so wird das Array als ein Element hinzugefügt anstatt jedes Element des Arrays hinzuzufügen, was zu einem Array im Array führt. Was tun, wenn das nicht das ist, was gewollt ist? <code>concat</code> hat das gewünschte verhalten, jedoch erstellt es ein neues Array und fügt die Elemente nicht an das existierende Array. Was wenn man die Elemente unbedingt an das existierende Array hängen möchte? Eine Schleife schreiben? Sicher nicht!</p> + +<p><code>apply</code> ist die Funktion der Wahl!</p> + +<pre class="brush: js">var array = ['a', 'b']; +var elements = [0, 1, 2]; +array.push.apply(array, elements); +console.info(array); // ["a", "b", 0, 1, 2] +</pre> + +<h3 id="Einsatz_von_apply_und_eingebauten_Standardfunktionen">Einsatz von <code>apply</code> und eingebauten Standardfunktionen</h3> + +<p>Der clevere Einsatz von <code>apply</code> erlaubt es standard Functionen für Aufgaben zu benutzen, für die man sonst schleifen Schreiben müsste, um über alle Elemente eines Arrays zu iterieren. Im folgenden Beispiel wurde <code>Math.max</code>/<code>Math.min</code> benutzt, um das maximalen/minimalen Wert in einem Array zu finden.</p> + +<pre class="brush: js">// min/max number in an array +var numbers = [5, 6, 2, 3, 7]; + +// using Math.min/Math.max apply +var max = Math.max.apply(null, numbers); +// This about equal to Math.max(numbers[0], ...) +// or Math.max(5, 6, ...) + +var min = Math.min.apply(null, numbers); + +// vs. simple loop based algorithm +max = -Infinity, min = +Infinity; + +for (var i = 0; i < numbers.length; i++) { + if (numbers[i] > max) { + max = numbers[i]; + } + if (numbers[i] < min) { + min = numbers[i]; + } +} +</pre> + +<p>Jedoch muss man bei einem solchen Einsatz von <code>apply</code> vorsichtig sein, weil das Risiko da ist, dass man in das Limit der maximalen Argumente der JavaScriptumgebung überschreitet. Die Konsequenz aus dem ausführen von Funktionen mit zu vielen Argumenten (mehr als Zehntausend Argumente) ist, dass dieses Limit stark variiert (JavaScriptCore hat ein hart Codiertes <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=80797">Argumentlimit von 65536</a>), weil es in JavaScript nicht spezifiziert ist (<span id="result_box" lang="de"><span>tatsächlich sogar die Art eines übermäßig großen Stack-Verhaltens</span></span>). Einige Umgebungen erzeugen einen Fehler. Andere übergeben nicht alle Argumente der Funktion, um das Limit nicht zu überschreiten. Um diesen Fall man zu schildern: Wenn eine Umgebung ein Limit von 4 Argumenten hätte (aktuelle Limits sind natürlich signifikant höher), würde es so sein, als ob nur die Argumente <code>5, 6, 2, 3</code> über <code>apply</code> im oberen Beispiel übergeben werden, statt dem ganzen Array.</p> + +<p>Wenn das Array in einigen Fällen so groß wird, dass es zehntausend Element erreicht, sollte eine hybride Strategie genutzt werden: Man teilt das Array auf und übergibt diese Teile der Funktion:</p> + +<pre class="brush: js">function minOfArray(arr) { + var min = Infinity; + var QUANTUM = 32768; + + for (var i = 0, len = arr.length; i < len; i += QUANTUM) { + var submin = Math.min.apply(null, + arr.slice(i, Math.min(i+QUANTUM, len))); + min = Math.min(submin, min); + } + + return min; +} + +var min = minOfArray([5, 6, 2, 3, 7]); +</pre> + +<h3 id="apply_für_das_Verketten_von_Konstruktoren_verwenden"><code>apply</code> für das Verketten von Konstruktoren verwenden</h3> + +<p>Man kann <code>apply</code> einsetzen, um {{jsxref("Operators/new", "Konstruktoren", "", 1)}} für ein Objekt zu verketten, ähnlich wie in Java. Im folgenden Beispiel wird eine globale {{jsxref("Function")}} Methode namens <code>construct</code> erstellt, welche es ermöglicht ein Array ähnliches Objekt mit einem Konstruktor anstatt eines Argumentliste zu benutzen.</p> + +<pre class="brush: js">Function.prototype.construct = function (aArgs) { + var oNew = Object.create(this.prototype); + this.apply(oNew, aArgs); + return oNew; +}; +</pre> + +<div class="note" style="height: 250px; overflow: auto;"> +<p><strong>Hinweis:</strong> Die oben eingesetzte <code>Object.create()</code> Methode ist relativ neu. Alternativ kann eine der folgenden Ansätze verwendet werden:</p> + +<p>Einsatz von {{jsxref("Object/__proto__", "Object.__proto__")}}:</p> + +<pre class="brush: js">Function.prototype.construct = function (aArgs) { + var oNew = {}; + oNew.__proto__ = this.prototype; + this.apply(oNew, aArgs); + return oNew; +}; +</pre> + +<p>Einsatz von <a href="/de/docs/Web/JavaScript/Closures">Closures</a>:</p> + +<pre class="brush: js">Function.prototype.construct = function(aArgs) { + var fConstructor = this, fNewConstr = function() { + fConstructor.apply(this, aArgs); + }; + fNewConstr.prototype = fConstructor.prototype; + return new fNewConstr(); +};</pre> + +<p>Einsatz von {{jsxref("Function")}} Konstruktoren:</p> + +<pre class="brush: js">Function.prototype.construct = function (aArgs) { + var fNewConstr = new Function(""); + fNewConstr.prototype = this.prototype; + var oNew = new fNewConstr(); + this.apply(oNew, aArgs); + return oNew; +}; +</pre> +</div> + +<p>Beispiel für den Einsatz:</p> + +<pre class="brush: js">function MyConstructor() { + for (var nProp = 0; nProp < arguments.length; nProp++) { + this['property' + nProp] = arguments[nProp]; + } +} + +var myArray = [4, 'Hello world!', false]; +var myInstance = MyConstructor.construct(myArray); + +console.log(myInstance.property1); // logs 'Hello world!' +console.log(myInstance instanceof MyConstructor); // logs 'true' +console.log(myInstance.constructor); // logs 'MyConstructor' +</pre> + +<div class="note"> +<p><strong>Hinweis:</strong> Diese nicht native <code>Function.construct</code> Methode funktioniert nicht mit einigen nativen Konstruktoren (mit {{jsxref("Date")}} zum Beispiel). In diesem Fall muss man die {{jsxref("Function.prototype.bind")}} Methode (hat man zum Beispiel ein Array ähnliches Objekt wie folgt, um mit dem {{jsxref("Global_Objects/Date", "Date")}} Konstruktor <code>[2012, 11, 4]</code> einzusetzen; in diesem Fall muss folgendes geschrieben werden: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code> — Jedoch ist das nicht die beste Art und Weise Probleme zu Lösen, weshalb diese Lösung nicht Praxistauglich ist).</p> +</div> + +<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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.apply")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Functions/arguments", "arguments")}} object</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Functions", "Functions and function scope", "", 1)}}</li> + <li>{{jsxref("Reflect.apply()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/function/arguments/index.html b/files/de/web/javascript/reference/global_objects/function/arguments/index.html new file mode 100644 index 0000000000..271120bd9d --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/function/arguments/index.html @@ -0,0 +1,92 @@ +--- +title: Function.arguments +slug: Web/JavaScript/Reference/Global_Objects/Function/arguments +tags: + - Deprecated + - Function + - JavaScript + - Property + - arguments +translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Die <code><strong><em>function</em>.arguments</strong></code> Eigenschaft referenziert ein Array ähnliches Objekt, welches die übergebenen Parameter einer Funktion enthält. Stattdessen kann die Variable {{jsxref("Functions/arguments", "arguments")}} benutzt werden. Diese Eigenschaft ist im Strict Mode aufgrund von <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-addrestrictedfunctionproperties">taill Aufrufoptimierung</a> verboten.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Die Syntax <code><em>function</em>.arguments</code> ist veraltet. Der empfolene Weg, um das {{jsxref("Functions/arguments", "arguments")}} Objekt zu erreichen, ist in einer Funktion die Variable {{jsxref("Functions/arguments", "arguments")}} zu benutzen.</p> + +<p>Im Fall von Rekursion, z. B. wenn die Funktion <code>f</code> mehrere Male auf dem Aufruf-Stack ist, repräsentiert <code>f.arguments</code> die Argumente des letzten Aufrufes der Funktion.</p> + +<p>Der Wert der <code>arguments</code> Eigenschaft ist normalerweise <code>null</code>, wenn keine Durchführung der Funktion vorhanden ist (Durchführung bedeutet, dass die Funktion aufgerufen wurde, aber noch nichts zurückgegeben hat).</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">function f(n) { g(n - 1); } + +function g(n) { + console.log('before: ' + g.arguments[0]); + if (n > 0) { f(n); } + console.log('after: ' + g.arguments[0]); +} + +f(2); + +console.log('returned: ' + g.arguments); + +// Output + +// before: 1 +// before: 0 +// after: 0 +// after: 1 +// returned: null +</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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.0. Deprecated zugunsten von {{jsxref("Functions/arguments", "arguments")}} in ES3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'arguments object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>{{jsxref("Functions/arguments", "arguments")}} Objekt</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arguments-object', 'arguments object')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>{{jsxref("Functions/arguments", "arguments")}} Objekt</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-object', 'arguments object')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>{{jsxref("Functions/arguments", "arguments")}} Objekt</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.arguments")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Functions/arguments", "arguments")}} object</li> + <li>{{jsxref("Functions", "Funktionen und Funktionsscopes", "", 1)}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/function/arity/index.html b/files/de/web/javascript/reference/global_objects/function/arity/index.html new file mode 100644 index 0000000000..f5ff00bd27 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/function/arity/index.html @@ -0,0 +1,32 @@ +--- +title: Function.arity +slug: Web/JavaScript/Reference/Global_Objects/Function/arity +tags: + - Function + - JavaScript + - Obsolete + - Property + - Unimplemented +translation_of: Archive/Web/JavaScript/Function.arity +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p class="note">Die <code><strong>arity</strong></code> Eigenschaft wurde benutzt, um die Anzahl der erwarteten Argumente einer Funktion zurückzugeben, jedoch existiert diese Eigenschaft nicht mehr und wurde durch die Eigenschaft {{jsxref("Function.prototype.length")}} ersetzt.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Implementiert in JavaScript 1.2. Veraltet seit JavaScript 1.4.</p> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.arity")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Function.prototype.length")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/function/bind/index.html b/files/de/web/javascript/reference/global_objects/function/bind/index.html new file mode 100644 index 0000000000..9427e62299 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/function/bind/index.html @@ -0,0 +1,286 @@ +--- +title: Function.prototype.bind() +slug: Web/JavaScript/Reference/Global_Objects/Function/bind +tags: + - Class + - ECMAScript 2015 + - ECMAScript 5 + - Function + - JavaScript + - Method + - bind + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind +--- +<div>{{JSRef}}</div> + +<p>Die <strong><code>bind()</code></strong> Methode erzeugt eine neue Funktion die beim Aufruf ihr <code>this</code> Schlüsselwort auf den ersten übergebenen Wert setzt. Alle weiteren Argumente werden den beim Funktionsaufruf übergebenen Werten vorangestellt.</p> + +<div>{{EmbedInteractiveExample("pages/js/function-bind.html", "taller")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>fun</var>ction.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>Der für <code>this</code> zu übergebende Wert an die Zielfunktion sobald die gebundene Funktion aufgerufen wird. Der Wert wird ignoriert, wenn die gebundene Funktion mit dem {{jsxref("Operators/new", "new")}} Schlüsselwort initiiert wurde.</dd> + <dt><code>arg1, arg2, ...</code></dt> + <dd>An die bind Funktion übergebene Werte. Diese Werte werden an die gebundene Funktion überreicht.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Eine Kopie der gegebenen Funktion mit dem spezifizierten <strong><code>this</code></strong> Wert und initialen Parametern.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Die <strong>bind()</strong> Funktion erstellt eine neue <strong>gebundene Funktion (BF)</strong>. Eine <strong>BF</strong> ist <strong>ein exotisches Funktionsobjekte</strong> (ein Teil von <strong>ECMAScript 2015</strong>) welches die eigentliche Funktion umhüllt. Das Aufrufen einer <strong>BF</strong> führt zum ausführen der <strong>umhüllten Funktion</strong>. Eine <strong>BF</strong> hat die folgenden internen Eigenschaften:</p> + +<ul> + <li><strong>[[BoundTargetFunction]]</strong> - das umhüllte Funktionsobjekt;</li> + <li><strong>[[BoundThis]]</strong> - der Wert, der immer als <strong>this</strong> Wert beim Aufruf der umhüllten Funktion genutzt wird.</li> + <li><strong>[[BoundArguments]]</strong> - eine Liste von Werten, wessen Elemente als erste Argumente bei jedem Aufruf der umhüllten Funktion genutzt werden.</li> + <li><strong>[[Call]]</strong> - führt Code aus, der mit dem Objekte verbunden ist. Wird über ein Funktionsaufruf ausgeführt. Die Argumente der internen Methode sind ein <strong>this</strong> Wert und eine Liste mit Argumenten, welche beim Aufruf der Funktion übergeben werden.</li> +</ul> + +<p>Wenn die gebundene Funktion aufgerufen wird, ruft diese die interne Methode <strong>[[Call]]</strong> auf <strong>[[BoundTargetFunction]]</strong> mit den Argumenten <strong>Call(<em>boundThis</em>, <em>args</em>)</strong> auf. Dabei ist <strong><em>boundThis </em></strong>gleich <strong>[[BoundThis]]</strong> und <em><strong>args </strong></em>gleich <strong>[[BoundArguments]]</strong> gefolgt von den übergebenen Parametern des Funktionsaufrufes.</p> + +<p>Eine gebundene Funktion kann zudem mit einen <a href="/de/docs/Web/JavaScript/Reference/Operators/new" title="The new operator creates an instance of a user-defined object type or of one of the built-in object types that has a constructor function."><code>new</code></a> Operator erstellt werden: <span id="result_box" lang="de"><span>Das sieht so aus, als ob die Zielfunktion stattdessen konstruiert worden wäre</span></span>. Dar übergebene <strong><code>this</code></strong> Wert wird ignoriert, während die voranstehenden Argumente für die Emulierte Funktion zur Verfügung stehen.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Erstellen_einer_gebunden_Funktion">Erstellen einer gebunden Funktion</h3> + +<p><span id="result_box" lang="de"><span>Die einfachste Verwendung von <code>bind()</code> besteht darin, eine Funktion zu erstellen, die, egal wie sie aufgerufen wird, mit einem <code><strong>this</strong></code> Wert aufgerufen wird. Ein häufiger Fehler für neue JavaScript-Programmierer besteht darin, eine Methode aus einem Objekt zu extrahieren, diese Funktion später aufzurufen und zu erwarten, dass sie das ursprüngliche Objekt als <code><strong>this</strong></code> verwendet (z. B. durch Verwendung dieser Methode in Callback-basiertem Code). Ohne besondere Sorgfalt ist das ursprüngliche Objekt jedoch in der Regel verloren. </span></span><span id="result_box" lang="de"><span>Das Erstellen einer gebundenen Funktion aus der Funktion, die das ursprüngliche Objekt verwendet, löst dieses Problem sauber:</span></span></p> + +<pre class="brush: js">this.x = 9; // this refers to global "window" object here in the browser +var module = { + x: 81, + getX: function() { return this.x; } +}; + +module.getX(); // 81 + +var retrieveX = module.getX; +retrieveX(); +// returns 9 - The function gets invoked at the global scope + +// Create a new function with 'this' bound to module +// New programmers might confuse the +// global var x with module's property x +var boundGetX = retrieveX.bind(module); +boundGetX(); // 81 +</pre> + +<h3 id="Partiell_gebunden_Funktionen">Partiell gebunden Funktionen</h3> + +<p>Der nächste einfache Einsatz von <code>bind()</code> ist das Vordefinieren von Initialparameter einer Funktion. Diese Argumente (wenn welche vorhanden) folgen auf den übergebenen <code>this</code> Wert und Werten am Anfang der Zielfunktion den Parametern hinzugefügt, gefolgt von den Parametern, die der gebunden Funktion übergeben werden, immer wenn die gebunden Funktion aufgerufen wird.</p> + +<pre class="brush: js">function list() { + return Array.prototype.slice.call(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] + +// Create a function with a preset leading argument +var leadingThirtysevenList = list.bind(null, 37); + +var list2 = leadingThirtysevenList(); +// [37] + +var list3 = leadingThirtysevenList(1, 2, 3); +// [37, 1, 2, 3] +</pre> + +<h3 id="Mit_setTimeout">Mit <code>setTimeout</code></h3> + +<p>Bei {{domxref("window.setTimeout()")}} wird im Standardfall das <code>this</code> Schlüsselwort mit dem {{ domxref("window") }} (oder <code>global</code>) Objekt versehen. Wenn mit Klassenmethoden gearbeitet wird, die es vorgesehen, dass <code>this</code> zu der Klasseninstanz verweist, muss <code>this</code> explizit an die Callback-Funktion gebunden werden, damit die Instanz vorhanden ist.</p> + +<pre class="brush: js">function LateBloomer() { + this.petalCount = Math.floor(Math.random() * 12) + 1; +} + +// Declare bloom after a delay of 1 second +LateBloomer.prototype.bloom = function() { + window.setTimeout(this.declare.bind(this), 1000); +}; + +LateBloomer.prototype.declare = function() { + console.log('I am a beautiful flower with ' + + this.petalCount + ' petals!'); +}; + +var flower = new LateBloomer(); +flower.bloom(); +// after 1 second, triggers the 'declare' method</pre> + +<h3 id="Gebunden_Funktion_mit_einem_Konstruktor">Gebunden Funktion mit einem Konstruktor</h3> + +<div class="warning"> +<p><strong>Warnung:</strong> Dieses Kapitel demonstriert JavaScript-möglichkeiten und dokumentiert Randfälle der <code>bind()</code> Methode. Die Methoden, die unten gezeigt werden, sind nicht die Besten, um Dinge zu lösen, weshalb sie nicht in einem Produktivsystem eingesetzt werden sollten.</p> +</div> + +<p>Gebundene Funktion sind automatisch verfügbar für den Einsatz mit dem {{jsxref("Operators/new", "new")}} Operator, um eine neue Instanz von einer Zielfunktion zu erstellen. Wenn eine gebundene Funktion eingesetzt wird, um einen Wert zu erstellen, wird das unterstützte <code>this</code> Argument ignoriert. Dahingegen werden unterstützte Argumente vor den Konstruktoraufrufe vorgehängt:</p> + +<pre class="brush: js">function Point(x, y) { + this.x = x; + this.y = y; +} + +Point.prototype.toString = function() { + return this.x + ',' + this.y; +}; + +var p = new Point(1, 2); +p.toString(); // '1,2' + +// not supported in the polyfill below, + +// works fine with native bind: + +var YAxisPoint = Point.bind(null, 0/*x*/); + + +var emptyObj = {}; +var YAxisPoint = Point.bind(emptyObj, 0/*x*/); + +var axisPoint = new YAxisPoint(5); +axisPoint.toString(); // '0,5' + +axisPoint instanceof Point; // true +axisPoint instanceof YAxisPoint; // true +new Point(17, 42) instanceof YAxisPoint; // true +</pre> + +<p>Zu beachten ist, dass nichts spezielles getan werden muss, um eine gebundene Funktion mit {{jsxref("Operators/new", "new")}} zu erstellen. <span id="result_box" lang="de"><span>Die Folge ist, dass man nichts Besonderes tun muss, um eine gebundene Funktion zu erzeugen, die einfach aufgerufen werden kann, selbst wenn es gewollt ist, dass die gebundene Funktion nur mit </span></span>{{jsxref("Operators/new", "new")}} <span lang="de"><span>aufgerufen wird:</span></span></p> + +<pre class="brush: js">// Example can be run directly in your JavaScript console +// ...continuing from above + +// Can still be called as a normal function +// (although usually this is undesired) +YAxisPoint(13); + +emptyObj.x + ',' + emptyObj.y; +// > '0,13' +</pre> + +<p>Wenn es gewünscht ist, dass der Einsatz von gebundenen Funktion nur mit {{jsxref("Operators/new", "new")}} oder einem einfachen Aufruf sein soll, so muss die Zielfunktion diese Einschränkung erzwingen.</p> + +<h3 id="Kurzformen_erstellen">Kurzformen erstellen</h3> + +<p><code>bind()</code> ist nützlich in fällen, in denen man kurzformen erstellen will, bei denen ein spezifischer <strong><code>this</code></strong> vorhanden sein soll.</p> + +<p>Nimmt man zum Beispiel {{jsxref("Array.prototype.slice")}}, welche man zum Konvertieren von Array ähnlichen Objekte zu einem richtigen Array einsetzen mögliche, dann kann man eine Kurzform wie diese erstellen:</p> + +<pre class="brush: js">var slice = Array.prototype.slice; + +// ... + +slice.apply(arguments); +</pre> + +<p>Mit <code>bind()</code>, kann dieses vereinfacht werden. Im folgenden Codestück ist <code>slice</code> eine gebunden Funktion zu der {{jsxref("Function.prototype.apply()", "apply()")}} Funktion von {{jsxref("Function.prototype")}} mit dem <strong><code>this</code></strong> Wert auf der {{jsxref("Array.prototype.slice()", "slice()")}} Funktion von {{jsxref("Array.prototype")}}. Das bedeutet, dass der zusätzliche Aufruf von <code>apply()</code> nicht nötig ist:</p> + +<pre class="brush: js">// same as "slice" in the previous example +var unboundSlice = Array.prototype.slice; +var slice = Function.prototype.apply.bind(unboundSlice); + +// ... + +slice(arguments); +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Wenn die <code>bind()</code> Funktion nicht vorhanden ist, kann ein Großteil der Funktionalität mit trotzdem hinzugefügt werden, indem der folgende Quelltext am Anfang des Skriptes hinzugefügt wird.</p> + +<pre class="brush: js">if (!Function.prototype.bind) { + Function.prototype.bind = function(oThis) { + if (typeof this !== 'function') { + // closest thing possible to the ECMAScript 5 + // internal IsCallable function + throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); + } + + var aArgs = Array.prototype.slice.call(arguments, 1), + fToBind = this, + fNOP = function() {}, + fBound = function() { + return fToBind.apply(this instanceof fNOP + ? this + : oThis, + aArgs.concat(Array.prototype.slice.call(arguments))); + }; + + if (this.prototype) { + // Function.prototype doesn't have a prototype property + fNOP.prototype = this.prototype; + } + fBound.prototype = new fNOP(); + + return fBound; + }; +} +</pre> + +<p><span id="result_box" lang="de"><span>Einige der vielen Unterschiede (es kann durchaus andere geben, weil bei dieser Liste nicht auf Vollständig geachtet wurde) zwischen diesem Algorithmus und dem angegebenen Algorithmus sind:</span></span></p> + +<ul> + <li>Die partielle Implementierung basiert auf der {{jsxref("Array.prototype.slice()")}}, {{jsxref("Array.prototype.concat()")}}, {{jsxref("Function.prototype.call()")}} und {{jsxref("Function.prototype.apply()")}} Methode, um die Originalen Werte zu erhalten.</li> + <li>Die partielle Implementierung erstellt Funktionen, die keinen unveränderbar {{jsxref("Function.caller", "caller")}} haben und eine <code>arguments</code> Eigenschaft die einen {{jsxref("Global_Objects/TypeError", "TypeError")}} auslöst, wenn get, set oder deletion benutzt wird. (Dieses kann hinzugefügt werden, wenn die Implementierung {{jsxref("Object.defineProperty")}} unterstützt oder partiell implementiert [ohne das Löschverhalten], wenn die Implementierung {{jsxref("Object.defineGetter", "__defineGetter__")}} und {{jsxref("Object.defineSetter", "__defineSetter__")}} Erweiterungen unterstützt.)</li> + <li>Die partielle Implementierung erstellt Funktionen, die einen <code>prototype</code> Eigenschaft haben. (Normale gebundene Funktionen haben keine)</li> + <li>Die partielle Implementierung erstellt gebundene Funktionen mit der {{jsxref("Function.length", "length")}} Eigenschaft, die nicht mit ECMA-262 übereinstimmt: Sie erstellt Funkton mit <code>length</code> 0, während bei der vollständigen Implementierung die Länge von der Zielfunktion und der Anzahl von vordefinierten Parametern abhängt und daher eine andere Länge zurück geben kann.</li> +</ul> + +<p>Wenn diese partielle Implementierung eingesetzt wird, <strong>muss man davon ausgehen, dass dessen Verhalten von dem in ECMA-262 in der 5. Auflage unterscheidet!</strong> Mit etwas Vorsicht (und vielleicht kleinen Modifizierungen für spezielle Anforderungen) kann diese partielle Implementierung eine gute Übergangslösung für die Zeit sein, in der <code>bind()</code> noch nicht in allen Umgebungen unterstützt wird.</p> + +<p>Auf <a href="https://github.com/Raynos/function-bind">https://github.com/Raynos/function-bind</a> könnte es eine gründlichere Lösung geben!</p> + +<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('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.bind")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Functions", "Functions", "", 1)}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/function/call/index.html b/files/de/web/javascript/reference/global_objects/function/call/index.html new file mode 100644 index 0000000000..46bdb07442 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/function/call/index.html @@ -0,0 +1,163 @@ +--- +title: Function.prototype.call() +slug: Web/JavaScript/Reference/Global_Objects/Function/call +tags: + - Function + - JavaScript + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Function/call +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>call()</strong></code> Methode ruft eine Funktion mit dem Argument this und den individuellen Parametern auf.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Die Syntax dieser Funktion ist nahezu identisch zu {{jsxref("Function.prototype.apply", "apply()")}}. Der Unterschied ist, dass <code>call()</code> eine <strong>Liste von Argumenten</strong> und <code>apply()</code> einen einzelnen <strong>Array von Argumenten</strong> akzeptiert.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/function-call.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>fun</var>ction.call(<var>thisArg</var>, <var>arg1</var>, <var>arg2</var>, ...)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>Optional. Der Wert von <code>this</code>, der für den Aufruf der Funktion <em><code>function</code></em> genutzt wird. Zu beachten ist, dass <code>this</code> möglicherweise nicht der Wert ist, den die Methode sieht: Wenn die Methode eine Funktion in {{jsxref("Functions_and_function_scope/Strict_mode", "non-strict mode", "", 1)}} ist, werden {{jsxref("Global_Objects/null", "null")}} und {{jsxref("Global_Objects/undefined", "undefined")}} mit dem globalen Objekt ersetzt und primitive Werte werden in ein Hüllobjekt umgewandelt.</dd> + <dt><code>arg1, arg2, ...</code></dt> + <dd>Argumente für das Objekt.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Das Ergebnis der aufgerufenen Funktion mit dem spezifischen <code><strong>this</strong></code> Wert und Parametern.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Beim Aufruf einer existierenden Funktion können Sie für <code>this</code> ein neues Objekt zuweisen. <code>this</code> verweist auf das aktuelle Objekt, also das aufrufende Objekt. Mit call können Sie eine Methode schreiben und an ein anderes Objekt vererben, ohne die Methode für das neue Objekt neuzuschreiben.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Nutzung_von_call_um_Konstruktoren_für_ein_Objekt_zu_verketten">Nutzung von <code>call</code>, um Konstruktoren für ein Objekt zu verketten</h3> + +<p>Man kann <code>call</code> nutzen, um Konstruktoren für ein Objekt, ähnlich wie in Java, zu verketten. Im folgenden Beispiel wird der Konstruktor für das <code>Product</code> Objekt mit zwei Parametern, <code>name</code> und <code>price</code>, definiert. Zwei andere Funktionen <code>Food</code> und <code>Toy</code> rufen <code>Product</code> auf und übergeben <code>this</code>, <code>name</code> und <code>price</code>. <code>Product</code> initialisiert die Eigenschaften <code>name</code> und <code>price</code> und beide speziellen Funktionen definieren <code>category</code>.</p> + +<pre class="brush: js">function Product(name, price) { + this.name = name; + this.price = price; +} + +function Food(name, price) { + Product.call(this, name, price); + this.category = 'food'; +} + +function Toy(name, price) { + Product.call(this, name, price); + this.category = 'toy'; +} + +var cheese = new Food('feta', 5); +var fun = new Toy('robot', 40); +</pre> + +<h3 id="Nutzung_von_call_zum_Aufruf_einer_anonymen_Funktion">Nutzung von <code>call</code> zum Aufruf einer anonymen Funktion</h3> + +<p>In diesem komplett konstruierten Beispiel erstellen wir eine anonyme Funktion und nutzen <code>call</code>, um diese für jedes Objekt in einem Array aufzurufen. Der Hauptnutzen für die Nutzung anonymer Funktionen hier, ist das hinzufügen einer Print-Funktion für jedes Objekt, welche den rechten Index des Objekts in dem eingegebenen Array ausgeben kann. Die Übergabe des Objektes als <code>this</code>-Wert ist hier nicht zwingend erforderlich, wurde aber zur Veranschaulichung genutzt.</p> + +<pre class="brush: js">var animals = [ + { species: 'Lion', name: 'King' }, + { species: 'Whale', name: 'Fail' } +]; + +for (var i = 0; i < animals.length; i++) { + (function(x) { + this.print = function() { + console.log('#' + x + ' ' + this.species + + ': ' + this.name); + } + this.print(); + }).call(animals[i], i); +} +</pre> + +<h3 id="Einsatz_von_call_zum_aufrufen_einer_Funktion_mit_spezifiziertem_Kontext_für_'this'">Einsatz von <code>call</code> zum aufrufen einer Funktion mit spezifiziertem Kontext für '<code>this</code>'</h3> + +<p>Im unten stehenden Beispiel wird das <code>this</code>Objekt der <code>greet</code> Funktion beim Aufruf auf <code>obj</code> gesetzt.</p> + +<pre class="brush: js">function greet() { + var reply = [this.animal, 'typically sleep betreen', this.sleepDuration].join(' '); + console.log(reply); +} + +var obj = { + animal: 'cats', sleepDuration: '12 and 16 hours' +}; + +greet.call(obj); // cats typically sleep between 12 and 16 hours +</pre> + +<h3 id="Eine_Funktion_mit_call_ausführen_ohne_den_ersten_Parameter_zu_setzen.">Eine Funktion mit <code>call</code> ausführen ohne den ersten Parameter zu setzen.</h3> + +<p>Im unten stehenden Beispiel wird die <code>display</code> Funktion aufgerufen ohne den ersten Parameter zu übergeben. Wenn der erste Parameter nicht übergeben wird, ist <code>this</code> das globale Objekt.</p> + +<pre class="brush: js">var sData = 'Wisen'; + +function display(){ + console.log('sData value is %s', this.sData); +} + +display.call(); // sData value is Wisen +</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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.call")}}</p> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li><a href="/de/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Einführung in objektorientiertes JavaScript</a></li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/function/caller/index.html b/files/de/web/javascript/reference/global_objects/function/caller/index.html new file mode 100644 index 0000000000..1b0b3f6c03 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/function/caller/index.html @@ -0,0 +1,84 @@ +--- +title: Function.caller +slug: Web/JavaScript/Reference/Global_Objects/Function/caller +tags: + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/caller +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Die <code><strong><em>function</em>.caller</strong></code> Eigenschaft gibt die Funktion zurück, die eine spezifizierte Funktion aufgerufen hat. Diese Eigenschaft ist im Strict-Modus wegen <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-addrestrictedfunctionproperties">tail call Optimierungen</a> verboten.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Wenn die Funktion <code>f</code> durch einen Quelltext auf höchster Ebene aufgerufen wird, ist der Wert von <code>f.caller</code> {{jsxref("null")}}, anderfalls die Funktion, die <code>f</code> aufgerufen hat.</p> + +<p>Diese Eigenschaft ersetzt die veraltete Eigenschaft {{jsxref("Functions/arguments/caller", "arguments.caller")}} des {{jsxref("Functions/arguments", "arguments")}} Objektes.</p> + +<p>Die spezielle Eigenschaft <code>__caller__</code>, <span class="short_text" id="result_box" lang="de"><span>welches das Objekt des Aufrufers zurück gab, erlaubt es den Stack zu rekonstruieren</span></span> und wurde aus Sicherheitsgründen entfernt.</p> + +<h3 id="Hinweise">Hinweise</h3> + +<p>Im Fall von Rekursion, kann der Stack nicht mit dieser Eigenschaft reproduziert werden. Gegeben:</p> + +<pre class="brush: js">function f(n) { g(n - 1); } +function g(n) { if (n > 0) { f(n); } else { stop(); } } +f(2); +</pre> + +<p>Im Moment, indem <code>stop()</code> aufgerufen wird, ist der Aufruferstack:</p> + +<pre class="brush: js">f(2) -> g(1) -> f(1) -> g(0) -> stop() +</pre> + +<p>Das folgende ergibt <code>true</code>:</p> + +<pre class="brush: js">stop.caller === g && f.caller === g && g.caller === f +</pre> + +<p>Wenn man versucht den Stacktrace in der <code>stop()</code> Funktion zu bekommen, wie hier:</p> + +<pre class="brush: js">var f = stop; +var stack = 'Stack trace:'; +while (f) { + stack += '\n' + f.name; + f = f.caller; +} +</pre> + +<p>wird die Schleife nie beendet.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Prüfen_des_Wertes_der_Funktionseigenschaft_caller">Prüfen des Wertes der Funktionseigenschaft <code>caller</code></h3> + +<p>Der folgende Quelltext prüft den Wert der Funktionseigenschaft <code>caller</code>.</p> + +<pre class="brush: js">function myFunc() { + if (myFunc.caller == null) { + return 'The function was called from the top!'; + } else { + return 'This function\'s caller was ' + myFunc.caller; + } +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>In keiner Spezifikation enthalten. Implementiert in JavaScript 1.5.</p> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.caller")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Implementation bug for SpiderMonkey {{bug(65683)}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/function/displayname/index.html b/files/de/web/javascript/reference/global_objects/function/displayname/index.html new file mode 100644 index 0000000000..9e22b16fca --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/function/displayname/index.html @@ -0,0 +1,81 @@ +--- +title: Function.displayName +slug: Web/JavaScript/Reference/Global_Objects/Function/displayName +tags: + - Function + - JavaScript + - Non Standard + - Non-standard + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Die <code><strong><em>function</em>.displayName</strong></code> Eigenschaft gibt den sichtbaren Namen der Funktion zurück.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Wenn definiert, gibt dit <code>displayName</code> Eigenschaft den sichtbaren Namen der Funktion zurück:</p> + +<pre class="brush: js">function doSomething() {} + +console.log(doSomething.displayName); // "undefined" + +var popup = function(content) { console.log(content); }; + +popup.displayName = 'Show Popup'; + +console.log(popup.displayName); // "Show Popup" +</pre> + +<p>Man kann eine Funktion mit sichtbaren Namen mit einem {{jsxref("Functions", "Funktionsausdruck", "", 1)}} definieren:</p> + +<pre class="brush: js">var object = { + someMethod: function() {} +}; + +object.someMethod.displayName = 'someMethod'; + +console.log(object.someMethod.displayName); // logs "someMethod" + +try { someMethod } catch(e) { console.log(e); } +// ReferenceError: someMethod is not defined +</pre> + +<p>Man kann den <code>displayName</code> einer Funktion dynamisch ändern:</p> + +<pre class="brush: js">var object = { + // anonymous + someMethod: function(value) { + arguments.callee.displayName = 'someMethod (' + value + ')'; + } +}; + +console.log(object.someMethod.displayName); // "undefined" + +object.someMethod('123') +console.log(object.someMethod.displayName); // "someMethod (123)" +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Konsolen und Profiler präferieren die {{jsxref("Function.name", "func.name")}} zum anzeigen des Namens einer Funktion.</p> + +<p>Beim eingeben des Folgenden Quelltextes in der Konsole, wird etwas wie "<code>function My Function()</code>" ausgegeben:</p> + +<pre class="brush: js">var a = function() {}; +a.displayName = 'My Function'; + +a; // "function My Function()"</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>In keiner Spezifikation enthalten.</p> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.displayName")}}</p> +</div> diff --git a/files/de/web/javascript/reference/global_objects/function/index.html b/files/de/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..dd2a7d5583 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,188 @@ +--- +title: Function +slug: Web/JavaScript/Reference/Global_Objects/Function +tags: + - Constructor + - Function + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef}}</div> + +<p>Der <strong><code>Function</code> Konstruktor </strong>erstellt ein neues <code>Funktion</code> Objekt. Das direkte Aufrufen kann Funktionen dynamisch erstellen, hat aber Sicherheits- und Performanceprobleme genau wie der Einsatz von {{jsxref("eval")}}. Im Gegensatz zu <code>eval</code> ermöglicht der Function-Konstruktor die Ausführung von Code im globalen Gültigkeitsbereich, was zu besseren Programmiergewohnheiten führt und eine effizientere Code-Minimierung ermöglicht.</p> + +<div>{{EmbedInteractiveExample("pages/js/function-constructor.html")}}</div> + + + +<p>Jede JavaScript Funktion ist aktuell ein <code>Function</code> Objekt. Das kann mit dem Code <code>(function(){}).constructor === Function</code> gezeigt werden, der <code>true</code> zurückgibt.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Namen die von der Funktion als formelle Argumentname genutzt werden. Jeder davon muss ein String sein, welcher ein gültiger JavaScript Bezeichner ist oder einer Liste von solchen Strings, getrennt mit Kommata ist. Zum Beispiel: "<code>x</code>", "<code>derWert</code>", oder "<code>a,b</code>".</dd> + <dt><code>functionBody</code></dt> + <dd>Ein String, welcher den JavaScript Ausdruck als Funktions-Definition beinhaltet.</dd> +</dl> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p>Mit dem <code>Function</code> Konstruktor erstellte <code>Function</code>-Objekte werden übersetzt, sobald die Funktion erstellt wurde. Das ist weniger effizient, als wenn man eine Funktion als <a href="/de/docs/Web/JavaScript/Reference/Operators/function">Funktionsausdruck</a> oder <a href="/de/docs/Web/JavaScript/Reference/Statements/function">Funktionsstatement</a> deklariert und diese innerhalb des Codes abruft, weil diese mit dem Rest des Codes übersetzt werden.</p> + +<p>Alle der Funktion übergegebenen Argumente werden als Namen der Bezeichner der Parameter in der zu erstellenden Funktion in der angegebenen Reihenfolge behandelt.</p> + +<p>Das Aufrufen des <code>Function</code> Konstruktors als Funktion (ohne den <code>new</code> Operator) hat dieselbe Wirkung, wie als Konstrukteuraufruf. Jedoch kann das Weglassen des <code>new</code> Operators eine kleinere minimierten Codegröße (4 Byte kleiner) erreichen, so dass es besser ist <code>Function</code> ohne <code>new</code> zu benutzen.</p> + +<h2 id="Eigenschaften_und_Methoden_von_Function">Eigenschaften und Methoden von <code>Function</code></h2> + +<p>Das globale <code>Function</code> Objekt hat eigene Methoden und Eigenschaften, doch, da es eine Funktion selbst ist, erbt es einige Methoden und Eigenschaften durch die Prototypkette aus {{jsxref("Function.prototype")}}.</p> + +<h2 id="Function_Prototyp_Objekt"><code>Function</code> Prototyp Objekt</h2> + +<h3 id="Eigenschaften">Eigenschaften</h3> + +<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Eigenschaften')}}</div> + +<h3 id="Methods" name="Methods">Methoden</h3> + +<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Methoden')}}</div> + +<h2 id="Function_instances" name="Function_instances"><code>Function</code> Instanzen</h2> + +<p>Funktions-Instanzen erben Methoden und Eigenschaften vom {{jsxref("Function.prototype")}}. Wie bei allen Konstruktoren kann das Prototypen Objekt verändern werden, um Änderungen an allen Funktions-Instanzen durchzuführen.</p> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<h3 id="Example.3A_Specifying_arguments_with_the_Function_constructor" name="Example.3A_Specifying_arguments_with_the_Function_constructor">Spezifizieren von Argumente mit dem <code>Function</code> Konstruktor</h3> + +<p>Der folgende Code erstellt ein Funktions-Objekt, mit zwei Argumenten.</p> + +<pre class="brush: js">// Das Beispiel kann direkt in der JavaScript Console ausgeführt werden. + +// Erstellt eine Funktion mit zwei Argumenten und gibt die Summe dieser Argumente zurück +var adder = new Function('a', 'b', 'return a + b'); + +// Aufruf der Funktion +adder(2, 6); +// > 8 +</pre> + +<p>Die Argumente "a" und "b" sind formale Argument-Namen, welche im Funktionskörper genutzt werden, "<code>return a + b</code>".</p> + +<h3 id="Unterschiede_zwischen_dem_Function_Konstruktor_und_Funktionsdeklarationen">Unterschiede zwischen dem <code>Function</code> Konstruktor und Funktionsdeklarationen</h3> + +<p>Funktionen, die mit dem <code>Function</code> Konstruktor erstellt werden, erstellen keine Closures in ihrem Erstellungskontext; Sie werden immer im globalen Scope erstellt. Wenn diese ausgeführt wird, kann sie nur auf eigene lokale oder globale Variablen zugreifen, jedoch nicht auf die aus dem Erstellungskontext des <code>Function</code> Konstruktor aufzufes. Dieses ist der Unterschied zum Einsatz von {{jsxref("eval")}} mit Quelltext für einen Funktionsausdruck.</p> + +<pre class="brush: js">var x = 10; + +function createFunction1() { + var x = 20; + return new Function('return x;'); // this |x| refers global |x| +} + +function createFunction2() { + var x = 20; + function f() { + return x; // this |x| refers local |x| above + } + return f; +} + +var f1 = createFunction1(); +console.log(f1()); // 10 +var f2 = createFunction2(); +console.log(f2()); // 20 +</pre> + +<p>Der "richtige" Weg für das Ausführen von externen Code mit <code>Function</code> (Für maximale Minimierung).</p> + +<pre class="brush: js">function makeFunction(code){ + return Funktion('"use strict";return ' + code)(); +} +var add = makeFunktion( + "" + function(a, b, c){ return a + b + c } // dieser Code ist in einer seperaten Datei irgendwo im Produktivprogramm +) +console.log( add(1, 2, 3) ); // gibt sechs aus +</pre> + +<p>Zu beachten ist, dass der obere Code komplett unpraktikabel ist. Man sollte <code>Function</code> niemals so missbrauchen. Stattdessen ist der obere Code nur als vereinfachtes Beispiel für eine Art Modulloader zu sehen, wobei es ein Basisskript gibt, welches dann hunderte von großen optionalen Modulen lädt. Dadurch muss ein Benutzer nicht lange warten, bis alle Module heruntergeladen sind, sondern der Clientcomputer lädt nur die benötigten Module und eine Seite lädt schneller. Dabei wird es beim auswerten von vielen Funktionen empfohlen, sie gebündelt zu übersetzen anstatt jede einzeln.</p> + +<pre class="brush: js">function bulkMakeFunctions(){ + var str = "", i = 1, Len = arguments.length; + if(Len) { + str = arguments[0]; + while (i !== Len) str += "," + arguments[i], ++i; + } + return Funktion('"use strict";return[' + str + ']')(); +} +const [ + add, + sub, + mul, + div +] = bulkMakeFunctions( + "function(a,b){return a+b}", + "function(a,b){return a-b}", + "function(a,b){return a*b}", + "function(a,b){return a/b}" +); +console.log(sub(add(mul(4, 3), div(225, 5)), 7)); +</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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function")}}</p> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{jsxref("Functions", "Functions and function scope")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("AsyncFunction")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/function/isgenerator/index.html b/files/de/web/javascript/reference/global_objects/function/isgenerator/index.html new file mode 100644 index 0000000000..5897905e92 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/function/isgenerator/index.html @@ -0,0 +1,56 @@ +--- +title: Function.prototype.isGenerator() +slug: Web/JavaScript/Reference/Global_Objects/Function/isGenerator +tags: + - Function + - JavaScript + - Method + - Non-standard + - Obsolete +translation_of: Archive/Web/JavaScript/Function.isGenerator +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Die nicht standardisierte <code><strong>isGenerator()</strong></code> Methode wird benutzt, um festzustellen, ob eine Funktion ein <a href="/de/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators.3A_a_better_way_to_build_Iterators">Generator</a> ist. In Firefox Version 58 wurde diese Methode entfernt.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>fun</var>.isGenerator()</code></pre> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein {{jsxref("Boolean")}} Welcher angibt, ob eine Funktion ein <a href="/de/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators.3A_a_better_way_to_build_Iterators">Generator</a> ist.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Die <code>isGenerator()</code> Methode stellt fest, ob eine Funktion <em><code>fun</code></em> ein <a href="/de/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators.3A_a_better_way_to_build_Iterators">Generator</a> ist. Diese war in einem frühen Vorschlag, wurde jedoch nicht in der ECMAScript 2015 Spezifikation eingefügt.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">function f() {} + +function* g() { + yield 42; +} + +console.log('f.isGenerator() = ' + f.isGenerator()); // f.isGenerator() = false +console.log('g.isGenerator() = ' + g.isGenerator()); // g.isGenerator() = true +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Ist in keiner Spezifikation vorhanden. Implementiert in JavaScript 1.8.6.</p> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.isGenerator")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iteratoren und Generatoren</a></li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/function/length/index.html b/files/de/web/javascript/reference/global_objects/function/length/index.html new file mode 100644 index 0000000000..3eca57b92a --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/function/length/index.html @@ -0,0 +1,92 @@ +--- +title: Function.length +slug: Web/JavaScript/Reference/Global_Objects/Function/length +tags: + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/length +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>length</strong></code> Eigenschaft gibt die Anzahl der von der Funktion erwarteten Parameter an.</p> + +<div>{{EmbedInteractiveExample("pages/js/function-length.html")}}</div> + + + +<div>{{js_property_attributes(0,0,1)}}</div> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p><code>length</code> ist eine Eigenschaft eines Funktionsobjekts und zeigt an, wie viele Argumente die Funktion erwartet, d.h. die Anzahl der formalen Parameter. Diese Anzahl beinhaltet jedoch nicht den {{jsxref("rest_parameters", "rest Parameter", "", 1)}} und bezieht außerdem auch nur die Parameter ein, die in der Reihenfolge vor dem ersten Parameter mit einem Default-Wert sind. Im Gegensatz dazu ist {{jsxref("Functions/arguments/length", "arguments.length")}} eine in jeder Funktion verfügbare lokale Variable, die die tatsächliche Anzahl der übergebenen Argumente angibt.</p> + +<h3 id="Dateneigenschaft_des_Function_Konstruktors">Dateneigenschaft des <code>Function</code> Konstruktors</h3> + +<p>Der {{jsxref("Global_Objects/Function", "Function")}} Konstruktor ist selbst ein {{jsxref("Global_Objects/Function", "Function")}} Objekt. Seine Eigenschaft <code>length</code> hat den Wert 1. Dessen Attribute lauten: Writable: <code>false</code>, Enumerable: <code>false</code>, Configurable: <code>true</code>.</p> + +<h3 id="Eigenschaft_des_Function_prototype_Objekt">Eigenschaft des <code>Function</code> prototype Objekt</h3> + +<p>Die length-Eigenschaft des {{jsxref("Global_Objects/Function", "Function")}} prototype Objekts hat den Wert 0.</p> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<pre class="brush: js">console.log(Function.length); /* 1 */ + +console.log((function() {}).length); /* 0 */ +console.log((function(a) {}).length); /* 1 */ +console.log((function(a, b) {}).length); /* 2 etc. */ + +console.log((function(...args) {}).length); +// 0, rest parameter wird nicht gezählt + +console.log((function(a, b = 1, c) {}).length); +// 1, nur Parameter vor dem ersten Parameter mit +// einem Default-Wert werden gezählt +</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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Das <code>configurable</code> Attribut dieser Eigenschaft ist nun <code>true</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.length")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Global_Objects/Function", "Function")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/function/name/index.html b/files/de/web/javascript/reference/global_objects/function/name/index.html new file mode 100644 index 0000000000..29a3903d56 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/function/name/index.html @@ -0,0 +1,229 @@ +--- +title: Function.name +slug: Web/JavaScript/Reference/Global_Objects/Function/name +tags: + - ECMAScript 2015 + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/name +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Die nur lesende Eigenschaft <code><strong>name</strong></code> eines {{jsxref("Function")}} Objektes welche den Namen, der beim erstellen angegeben wurde enthält oder <code>"anonymous"</code> für anonyme Funktionen.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/function-name.html")}}</div> + + + +<div>{{js_property_attributes(0,0,1)}}</div> + +<div> </div> + +<div class="note"> +<p>Zu beachten ist, dass in nicht standardisierten implementierungen vor ES2015 das <code>configurable</code> Attribute ebenfalls <code>false</code> ist.</p> +</div> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Name_bei_Funktionsanweisungen">Name bei Funktionsanweisungen</h3> + +<p>Die <code>name</code> Eigenschaft gibt den Namen einer Funktionsanweisung:</p> + +<pre class="brush: js">function doSomething() {} +doSomething.name; // logs "doSomething" +</pre> + +<h3 id="Name_bei_Function_Konstruktoren">Name bei <code>Function</code> Konstruktoren</h3> + +<p>Funktionen, die mit der Syntax <code>new Function(...)</code> oder nur <code>Function(...)</code> erstellt werden, erstellen {{jsxref("Function")}} mit dem Namen "anonymous".</p> + +<pre class="brush: js">(new Function).name; // "anonymous" +</pre> + +<h3 id="Gefolgerte_Funktionsnamen">Gefolgerte Funktionsnamen</h3> + +<p>Bei Variablen und Methoden kann der Name von anonymen Funktionen von ihrer syntaktischen Position gefolgert werden (neu in ECMAScript 2015).</p> + +<pre class="brush: js">var f = function() {}; +var object = { + someMethod: function() {} +}; + +console.log(f.name); // "f" +console.log(object.someMethod.name); // "someMethod" +</pre> + +<p>Funktionen mit einem Namen lassen sich mittels {{jsxref("Operators/Function", "Funktionanweisung", "", 1)}} definieren:</p> + +<pre class="brush: js">var object = { + someMethod: function object_someMethod() {} +}; +console.log(object.someMethod.name); // logs "object_someMethod" + +try { object_someMethod } catch(e) { console.log(e); } +// ReferenceError: object_someMethod is not defined +</pre> + +<p>Man kann den Namen einer Funktion nicht ändern, weil diese Eigenschaft schreibgeschützt ist:</p> + +<div class="hidden"> +<p>Example below contradicts with what is said at the beginning of this section and doesn't work as described.</p> +</div> + +<pre class="brush: js">var object = { + // anonyme Funktionsdefinition + someMethod: function() {} +}; + +object.someMethod.name = 'someMethod'; +console.log(object.someMethod.name); // leerer String, someMethod ist anonym +</pre> + +<p>Um sie zu ändern, kann {{jsxref("Object.defineProperty()")}} eingesetzt werden.</p> + +<h3 id="Kurzform_von_Methodennamen">Kurzform von Methodennamen</h3> + +<pre class="brush: js">var o = { + foo(){} +}; +o.foo.name; // "foo"; +</pre> + +<h3 id="Gebundene_Funktionsnamen">Gebundene Funktionsnamen</h3> + +<p>{{jsxref("Function.bind()")}} erzeugt eine Funktion mit dem Namen, der sich aus <code> "bound "</code> und dem Namen der Funktion zusammensetzt.</p> + +<pre class="brush: js">function foo() {}; +foo.bind({}).name; // "bound foo"</pre> + +<h3 class="brush: js" id="Funktionsnamen_für_Getter_und_Setter">Funktionsnamen für Getter und Setter</h3> + +<p>Beim Einsatz von <code><a href="/de/docs/Web/JavaScript/Reference/Functions/get">get</a></code> und <code><a href="/de/docs/Web/JavaScript/Reference/Functions/set">set</a></code> Zugriffseigenschaften wird "get" oder "set" im Funktionsnamen auftauchen.</p> + +<pre class="brush: js">var o = { + get foo(){}, + set foo(x){} +}; + +var descriptor = Object.getOwnPropertyDescriptor(o, "foo"); +descriptor.get.name; // "get foo" +descriptor.set.name; // "set foo" +</pre> + +<h3 id="Funktionsnamen_in_Klassen">Funktionsnamen in Klassen</h3> + +<p>Über <code>obj.constructor.name</code> lässt sich die "Klasse" eines Objekts überprüfen (jedoch sollten die unten stehende Warnung berücksichtigt werden):</p> + +<pre class="brush: js">function Foo() {} // ES2015 Syntax: class Foo {} + +var fooInstance = new Foo(); +console.log(fooInstance.constructor.name); // logs "Foo" +</pre> + +<div class="warning"> +<p><strong>Warnung:</strong> Der Skriptinterpreter wird die eingebaute <code>Function.name</code> Eigenschaft nur setzen, wenn eine Funktion keine eigene Eigenschaft mit dem Namen <em>name</em> hat (siehe Kapitel <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-setfunctionname">9.2.11 der ECMAScript2015 Sprachdefinition</a>). Jedoch spezifiziert ES2015 das <em>static</em> Schlüsselwort so, dass statische Methoden als eigene Eigenschaft des Klassenkonstruktorfunktion gesetzt wird (ECMAScript2015, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-runtime-semantics-classdefinitionevaluation">14.5.14.21.b</a> + <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-object-initializer-runtime-semantics-propertydefinitionevaluation">12.2.6.9</a>).</p> +</div> + +<p>Aus diesem Grund kann der Klassenname für jede Klasse mit einer statischen Methodeneigenschaft <code>name()</code> nicht bestimmt werden:</p> + +<pre class="brush: js">class Foo { + constructor() {} + static name() {} +} +</pre> + +<p>Mit einer <code>static name()</code> Methode hält <code>Foo.name</code> nicht mehr den aktuellen Klassennamen bereit, sondern eine Referenz zu dem <code>name()</code> Funktionsobjekt. Die oben stehende Klassendefinition in ES2015 Syntax kann in ES5 Syntax für Chrome oder Firefox wie folgt übersetzt werden:</p> + +<pre class="brush: js">function Foo() {} +Object.defineProperty(Foo, 'name', { writable: true}); +Foo.name = function() {}; +</pre> + +<p>Beim Versuch die Klasse von <code>fooInstance</code> mithilfe von <code>fooInstance.constructor.name</code> herauszufinden, bekommt man nicht den Klassennamen, sondern eine Referenz auf die statische Methode. Beispiel:</p> + +<pre class="brush: js">var fooInstance = new Foo(); +console.log(fooInstance.constructor.name); // logs function name() +</pre> + +<p>Man sieht zudem in der Beispiel der ES5 Syntax für Chrome und Firefox, dass die Definition der statischen <code>Foo.name</code> Methode überschreibbar (<em>writable</em>) wird. Wird nicht angegeben, ist der Standard für solche Definition nur lesend (<em>read-only</em>).</p> + +<pre class="brush: js">Foo.name = 'Hello' +console.log(Foo.name); // logs "Hello" if class Foo has a static name() property but "Foo" if not. +</pre> + +<p>Aus diesem Grund darf man sich nicht darauf verlassen, dass <code>Function.name</code> immer den Klassennamen zurück gibt.</p> + +<h3 id="Symbols_als_Funktionsnamen">Symbols als Funktionsnamen</h3> + +<p>Wenn ein {{jsxref("Symbol")}} als Funktionsnamen genutzt wird und das Symbol eine Beschreibung (description) hat, ist der Methodennamen gleich der Beschreibung in eckigen Klammern.</p> + +<pre class="brush: js">var sym1 = Symbol("foo"); +var sym2 = Symbol(); +bar o = { + [sym1]: function(){}, + [sym2]: function(){} +}; + +o[sym1].name; // "[foo]" +o[sym2].name; // "" +</pre> + +<h2 id="JavaScript-Kompressoren_und_-Minimierer">JavaScript-Kompressoren und -Minimierer</h2> + +<div class="warning"> +<p><strong>Warnung:</strong> Beim der Benutzung von <code>Function.name</code> ist Vorsicht geboten, wenn Codetransformtionen, wie JavaScript Kompressoren (Minimierer) oder Obfuscators, zum Einsatz kommen. Diese Werkzeuge werden häufig im Zuge von Werkzeugketten zum Bauen von JavaScript-Programmen eingesetzt um die Größe eines Programms zu für den Produktivbetrieb zu minimieren. Solche Werkzeuge ändern die Funktionsnamen häufig beim Erstellen.</p> +</div> + +<p>Quelltext wie dieser:</p> + +<pre class="brush: js">function Foo() {}; +var foo = new Foo(); + +if (foo.constructor.name === 'Foo') { + console.log("'foo' is an instance of 'Foo'"); +} else { + console.log('Oops!'); +} +</pre> + +<p>wird manchmal zu folgendem Quelltext komprimiert:</p> + +<pre class="brush: js">function a() {}; +var b = new a(); +if (b.constructor.name === 'Foo') { + console.log("'foo' is an instance of 'Foo'"); +} else { + console.log('Oops!'); +} +</pre> + +<p>In der nicht komprimierten Version läuft das Programm in den true-Zweig und gibt <code><em>'foo' is an instance of 'Foo'</em></code> aus. Die komprimierte Version verhält sich anders und läuft in den else-Zweig. Wenn man sich <code>Function.name</code> zurückerinnert, wie in obigen Beispielen, muss beachtet werden, dass Kompressoren die Methodennamen nicht ändert oder nicht annimmt, dass eine Funktion nur in diesem Quelltext benutzt.</p> + +<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('ES2015', '#sec-name', 'name')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-instances-name', 'name')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + +{{Compat("javascript.builtins.Function.name")}}</div> diff --git a/files/de/web/javascript/reference/global_objects/function/prototype/index.html b/files/de/web/javascript/reference/global_objects/function/prototype/index.html new file mode 100644 index 0000000000..afb602971c --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/function/prototype/index.html @@ -0,0 +1,99 @@ +--- +title: Function.prototype +slug: Web/JavaScript/Reference/Global_Objects/Function/prototype +tags: + - Function + - JavaScript + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>Function.prototype</strong></code> Eigenschaft repräsentiert das {{jsxref("Function")}} Prototyp Objekt.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>{{jsxref("Function")}} Objekte erben von <code>Function.prototype</code>. <code>Function.prototype</code> kann nicht modifiziert werden.</p> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<dl> + <dt>{{jsxref("Function.arguments")}} {{deprecated_inline}}</dt> + <dd>Ein Array, welches die der Funktion übergebenen Parameter enthält. Dieses ist veraltet als Eigenschaft von {{jsxref("Function")}}. Stattdessen sollte das {{jsxref("Functions/arguments", "arguments")}} Objekt in einer Funktion benutzt werden</dd> + <dt><s class="obsoleteElement">{{jsxref("Function.arity")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Wurde benutzt, um die Anzahl der erwarteten Argumente einer Funktion einzustellen, ist jedoch entfernt. Stattdessen kann die {{jsxref("Function.length", "length")}} Eigenschaft genutzt werden.</s></dd> + <dt>{{jsxref("Function.caller")}} {{non-standard_inline}}</dt> + <dd>Spezifizert die Funktion, die die aktuelle Funktion aufgerufen hat.</dd> + <dt>{{jsxref("Function.length")}}</dt> + <dd>Spezifizert die Anzahl der Parameter, die eine Funktion erwartet.</dd> + <dt>{{jsxref("Function.name")}}</dt> + <dd>Der Name einer Funktion.</dd> + <dt>{{jsxref("Function.displayName")}} {{non-standard_inline}}</dt> + <dd>Der angezeigte Name einer Funktion.</dd> + <dt><code>Function.prototype.constructor</code></dt> + <dd>Spezifiziert die Funktion, die ein Objekt Prototyp erstellt. Mehr Informationen bei {{jsxref("Object.prototype.constructor")}}.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<dl> + <dt>{{jsxref("Function.prototype.apply()")}}</dt> + <dd>Führt eine Funktion aus und setzt das <em>this</em> Objekt mit einem übergebenen wert. Parameter können in einem {{jsxref("Array")}} Objekt übergeben werden.</dd> + <dt>{{jsxref("Function.prototype.bind()")}}</dt> + <dd><span id="result_box" lang="de"><span>Erstellt eine neue Funktion, die beim Aufruf einen angegebenen Wert für <em>this</em> hat, wobei die Argumentfolge vor dem Aufruf der neuen Funktion fest steht.</span></span></dd> + <dt>{{jsxref("Function.prototype.call()")}}</dt> + <dd>Führt eine Funktion aus und setzt <em>this</em> auf einen übergebenen Wert. Parameter können übergeben werden.</dd> + <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt> + <dd>Gibt <code>true</code> zurück, wenn die Funktion ein <a href="/de/docs/Web/JavaScript/Guide/Iterators_and_Generators">Generator</a> ist, anderfalls <code>false</code>.</dd> + <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Gibt eine Stringrepräsentation des Quelltextes einer Funktion zurück. Sie überschreibt die {{jsxref("Object.prototype.toSource")}} Methode.</dd> + <dt>{{jsxref("Function.prototype.toString()")}}</dt> + <dd>Gibt eine Stringrepräsentation des Quelltextes einer Funktion zurück. Sie überschreibt die {{jsxref("Object.prototype.toString")}} Methode.</dd> +</dl> + +<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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.1</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.prototype")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/function/tosource/index.html b/files/de/web/javascript/reference/global_objects/function/tosource/index.html new file mode 100644 index 0000000000..75552bdc8c --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/function/tosource/index.html @@ -0,0 +1,72 @@ +--- +title: Function.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Function/toSource +tags: + - Function + - JavaScript + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Function/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Die <code><strong>toSource()</strong></code> Methode gibt eine Stringrepräsentation des Quelltextes des Objektes zurück.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>function</var>.toSource(); +Function.toSource(); +</pre> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Eine Stringrepräsentation des Quelltextes des Objektes.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Die <code>toSource</code> Methode gibt die folgenden Werte zurück:</p> + +<ul> + <li>Für das eingebaute {{jsxref("Function")}} Objekt gibt <code>toSource()</code> den folgenden String zurück, der angibt, dass der Quelltext nicht verfügbar ist: + + <pre class="brush: js">function Function() { + [native code] +} +</pre> + </li> + <li>Für Benutzerdefinierte Funktionen, gibt <code>toSource()</code> den JavaScript Quelltext zurück, welcher das Objekt als String definiert.</li> + <li> + <pre class="brush: js">// Zum Beispiel: +function hello() { + console.log("Hello, World!"); +} + +hello.toSource();</pre> + </li> + <li> + <pre class="brush: js">// Das Resultat +"function hello() { + console.log(\"Hello, World!\"); +}" +</pre> + </li> +</ul> + +<p>Die Methode wird normalerweise von JavaScript selbst aufgerufen und nicht explizit im Quelltext. Man kann <code>toSource</code> während des Debuggens aufrufen, um zu ermitteln, was ein Objekt enthält.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Ist in keinem Standard. Implementiert in JavaScript 1.3.</p> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.toSource")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/function/tostring/index.html b/files/de/web/javascript/reference/global_objects/function/tostring/index.html new file mode 100644 index 0000000000..5b3978809e --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/function/tostring/index.html @@ -0,0 +1,236 @@ +--- +title: Function.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Function/toString +tags: + - Function + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Function/toString +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>toString()</strong></code> Methode gibt eine Stringrepräsentation des Quelltextes einer Funktion zurück.</p> + +<div>{{EmbedInteractiveExample("pages/js/function-tostring.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>function</var>.toString()</code></pre> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Eine Stringrepräsentation des Quelltextes der Funktion.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Das {{jsxref("Function")}} Objekt überschreibt die von {{jsxref("Object")}} geerbte Methode {{jsxref("Object.prototype.toString", "toString")}}; sie erbt nicht von {{jsxref("Object.prototype.toString")}}. Für benutzerdefinierte {{jsxref("Function")}} Objekte gibt die <code>toString</code> Methode einen String zurück, welcher den Quelltext, der die Funktion definiert, enthält.</p> + +<p>JavaScript ruft die <code>toString</code> Methode automatisch auf, wenn einen {{jsxref("Function")}} als Text repräsentiert werden muss, z. B. wenn eine Funktion mit einem String konkateniert wird.</p> + +<p>Die <code>toString()</code> Methode erzeugt eine {{jsxref("TypeError")}} Fehler("Function.prototype.toString called on incompatible object"), wenn das Objekt von <code>this</code> Objekt kein <code>Function</code> Objekt ist. Dieser wird auch bei einem {{jsxref("Proxy")}} Objekte erzeugt, zum Beispiel:</p> + +<pre class="brush: js example-bad">Function.prototype.toString.call('foo'); // TypeError + +var proxy = new Proxy(function() {}, {}); +Function.prototype.toString.call(proxy); // TypeError +</pre> + +<p>Wenn die <code>toString()</code> Methode auf eingebauten Objekten oder einer von <code>Function.prototype.bind</code> erstellten Methode aufgerufen wird, gibt <code>toString() </code><em>native function string</em> zurück, was wie folgt aussiet:</p> + +<pre class="brush: js">"function () {\n [native code]\n}" +</pre> + +<p>Wenn die <code>toString()</code> Methode auf einer Funktion aufgerufen wird, die mit dem <code>Function</code> Konstruktor erstellt wurde, gibt diese den Quelltext der syntetischen Funktionsdeklerations mit dem Namen "anonymous" zurück, welche die Parameter und den Funktionrumpf enthält.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Funktion</th> + <th scope="col">Ergebnis von Function.prototype.toString</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <pre> +function f(){}</pre> + </td> + <td> + <pre> +"function f(){}"</pre> + </td> + </tr> + <tr> + <td> + <pre> +class A { a(){} }</pre> + </td> + <td> + <pre> +"class A { a(){} }"</pre> + </td> + </tr> + <tr> + <td> + <pre> +function* g(){}</pre> + </td> + <td> + <pre> +"function* g(){}"</pre> + </td> + </tr> + <tr> + <td> + <pre> +a => a</pre> + </td> + <td> + <pre> +"a => a"</pre> + </td> + </tr> + <tr> + <td> + <pre> +({ a(){} }.a)</pre> + </td> + <td> + <pre> +"a(){}"</pre> + </td> + </tr> + <tr> + <td> + <pre> +({ *a(){} }.a)</pre> + </td> + <td> + <pre> +"*a(){}"</pre> + </td> + </tr> + <tr> + <td> + <pre> +({ [0](){} }[0])</pre> + </td> + <td> + <pre> +"[0](){}"</pre> + </td> + </tr> + <tr> + <td> + <pre> +Object.getOwnPropertyDescriptor({ + get a(){} +}, "a").get</pre> + </td> + <td> + <pre> +"get a(){}"</pre> + </td> + </tr> + <tr> + <td> + <pre> +Object.getOwnPropertyDescriptor({ + set a(x){} +}, "a").set</pre> + </td> + <td> + <pre> +"set a(x){}"</pre> + </td> + </tr> + <tr> + <td> + <pre> +Function.prototype.toString</pre> + </td> + <td> + <pre> +"function toString() { [native code] }"</pre> + </td> + </tr> + <tr> + <td> + <pre> +(function f(){}.bind(0))</pre> + </td> + <td> + <pre> +"function () { [native code] }"</pre> + </td> + </tr> + <tr> + <td> + <pre> +Function("a", "b")</pre> + </td> + <td> + <pre> +"function anonymous(a\n) {\nb\n}"</pre> + </td> + </tr> + </tbody> +</table> + +<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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Spezifischere Anforderungen wurden an die Stringrepräsentation hinzugefügt.</td> + </tr> + <tr> + <td><a href="http://tc39.github.io/Function-prototype-toString-revision/">Function.prototype.toString revision</a></td> + <td>Draft</td> + <td>Standardisierung nativer Funktionsstrings am Zeilenende.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.toString")}}</p> +</div> + +<h2 id="Firefox_spezifische_Hinweise">Firefox spezifische Hinweise</h2> + +<ul> + <li>Seit Firefox 17, ist <code>Function.prototype.toString()</code> implementiert zum Speichern von Funktionsquelltexten. Der Decompiler wurde entfernt, so das der <code>indentation</code> Parameter nicht mehr gebraucht wird. Für mehr Details siehe {{bug("761723")}}.</li> + <li>Seit Firefox 38, erzeugt <code>Function.prototype.toString()</code> einen Fehler für {{jsxref("Proxy")}} Objekts ({{bug(1100936)}}).</li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> |