1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
---
title: Eigenschaftszugriff
slug: Web/JavaScript/Reference/Operators/Property_Accessors
tags:
- JavaScript
- Operator
translation_of: Web/JavaScript/Reference/Operators/Property_Accessors
---
<div>{{jsSidebar("Operators")}}</div>
<p>Eigenschaftszugriffe erlauben den Zugriff auf Eigenschaften eines Objekts, indem die Punktnotation oder Klammernotation benutzt wird.</p>
<div>{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html")}}</div>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">object.property
object['property']
</pre>
<h2 id="Beschreibung">Beschreibung</h2>
<p>Man kann ein Objekt wie ein assoziatives Array (auch bekannt als Map, Dictionary, Hash, lookup table) vorstellen. Die Schlüssel im Array sind die Namen der Eigenschaften des Objekts. Es ist typisch, wenn man von Eigenschaften eines Objekts spricht, zwischen Eigenschaften und Methoden zu unterscheiden. Die Eigenschaften/Methoden-Unterscheidung ist jedoch nur eine Konvention. Eine Methode ist einfach eine Eigenschaft die aufgerufen werden kann, zum Beispiel wenn sie als Wert eine Referenz auf eine <a href="/de/docs/Web/JavaScript/Reference/Functions">Funktions</a> Instanz hat.</p>
<p>Es gibt zwei Wege auf Eigenschaften zuzugreifen: Die Punktnotation und die Klammernotation.</p>
<h3 id="Punktnotation">Punktnotation</h3>
<pre class="brush: js">get = object.property;
object.property = set;
</pre>
<p>In diesem Quelltext muss <code>property</code> ein gültiger Bezeichner ein, d. h. eine Sequenz von alphanumerischen Zeichen inklusive Unterstrich (<code>_</code>) und Dollarzeichen (<code>$</code>) die nicht mit einer Nummer beginnen können. Zum Beispiel ist <code>object.$1</code> gültig währenddem <code>object.1</code> nicht gültig ist.</p>
<pre class="brush: js">document.createElement('pre');
</pre>
<p>Hier wird die Methode namens "createElement" von <code>document</code> erfragt und aufgerufen.</p>
<p>Wenn man eine Methode für ein numerisches Literal nutzt, das keinen Exponenten und keine Kommastelle besitzt, können vor dem Punkt, der vor dem Methodenaufruf steht, Whitespaces stehen, um die Interpretation des Punktes als Komma zu verhindern.</p>
<pre class="brush: js">77 .toExponential();
// oder
77
.toExponential();
// oder
(77).toExponential();
// oder
77..toExponential();
// oder
77.0.toExponential();
// weil 77. === 77.0, keine Zweideutigkeit</pre>
<h3 id="Klammernotation">Klammernotation</h3>
<pre class="brush: js">get = object[property_name];
object[property_name] = set;
</pre>
<p><code>property_name</code> ist ein String. Der String muss kein gültiger Bezeichner sein; er kann einen beliebigen Wert haben, z. B. "1foo", "!bar!" oder sogar " " (ein Leerzeichen).</p>
<pre class="brush: js">document['createElement']('pre');
</pre>
<p>Dieses macht genau dasselbe wie das vorherige Beispiel.</p>
<p>Ein Leerzeichen vor der Klammernotation ist erlaubt.</p>
<pre class="brush: js">document ['createElement']('pre');</pre>
<h3 id="Eigenschaftensnamen">Eigenschaftensnamen</h3>
<p>Eigenschaftsnamen müssen Strings sein. Das bedeutet dass Objekte, die kein String sind, nicht als Schlüssel in einem Objekt verwendet werden können. Jedes Objekt das keine String ist, inklusive Zahlen, wird mittels <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/toString">toString </a>in einen String umgewandelt.</p>
<pre class="brush: js">var object = {};
object['1'] = 'value';
console.log(object[1]);
</pre>
<p>Dies gibt "value" aus, weil 1 in '1' umgewandelt wird.</p>
<pre class="brush: js">var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {};
object[foo] = 'value';
console.log(object[bar]);
</pre>
<p>Dies gibt auch "value" aus, weil beide Objekte, foo und bar, in den gleiche String umgewandelt werden. In der SpiderMonkey JavaScript Engine ist dieser String "['object Object']".</p>
<h3 id="Methodenbindung">Methodenbindung</h3>
<p>Eine Methode ist nicht an ein Objekt gebunden zu dem sie gehört. Vor allem <code>this</code> ist nicht an eine Methode gebunden, d. h. <code>this</code> muss nicht unbedingt auf das Objekt verweisen das die Methode enthält. <code>this</code> wird stattdessen vom Funktionsaufruf gesetzt. Siehe auch <code><a href="/de/docs/Web/JavaScript/Reference/Operators/this">this</a></code> dazu.</p>
<h3 id="Hinweis_zu_eval">Hinweis zu <code>eval</code></h3>
<p>JavaScript-Anfänger machen oft den Fehler <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/eval">eval </a>zu nutzen wo die Klammernotation verwendet werden kann. Zum Beispiel sieht man folgende Syntax häufig in vielen Skripten.</p>
<pre class="brush: js">x = eval('document.forms.form_name.elements.' + strFormControl + '.value');
</pre>
<p><a href="https://www.nczonline.net/blog/2013/06/25/eval-isnt-evil-just-misunderstood/">eval</a> ist langsam und sollte wenn möglich vermieden werden. Außerdem würde <code>strFormControl</code> auch einen Bezeichner beinhalten müssen der für Namen und IDs von Formularelementen nicht benötigt wird. Es ist besser die Klammernotation zu verwenden.</p>
<pre class="brush: js">x = document.forms['form_name'].elements[strFormControl].value;
</pre>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-property-accessors', 'Property Accessors')}}</td>
<td>{{Spec2('ES6')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES1', '#sec-11.2.1', 'Property Accessors')}}</td>
<td>{{Spec2('ES1')}}</td>
<td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<p>{{Compat("javascript.operators.property_accessors")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>{{jsxref("Object")}}</li>
<li>{{jsxref("Object/defineProperty")}}</li>
</ul>
|
