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/name | |
| 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/name')
| -rw-r--r-- | files/de/web/javascript/reference/global_objects/function/name/index.html | 229 |
1 files changed, 229 insertions, 0 deletions
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> |
