1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
|
---
title: Assessores de propriedade
slug: Web/JavaScript/Reference/Operators/Property_Accessors
translation_of: Web/JavaScript/Reference/Operators/Property_Accessors
---
<div>{{jsSidebar("Operators")}}</div>
<p>Os assessores de propriedade fornecem acesso as propriedades de um objeto usando a notação de ponto ou a notação de colchetes.</p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox">object.property
object["property"]
</pre>
<h2 id="Descrição">Descrição</h2>
<p><span id="result_box" lang="pt"><span>Pode-se</span> <span>pensar em</span> <span>um objeto</span> <span>como uma matriz associativa</span></span> (a.k.a. <em>map</em>, <em>dictionary</em>, <em>hash</em>, <em>lookup table</em>). As chaves nesta matriz são os nomes das propriedades dos objetos. <span id="result_box" lang="pt"><span>É típico</span> <span>quando se fala de</span> <span>propriedades de um objeto</span> <span>para fazer uma</span> <span>distinção entre</span> <span>propriedades e métodos</span></span>. No entanto, a distinção entre propriedade/método é um pouco mais do que convenção. <span id="result_box" lang="pt"><span>Um método</span> <span>é simplesmente</span> <span>uma propriedade que</span> <span>pode ser chamada</span><span>, por exemplo</span><span>, se tiver</span> <span>uma referência</span> <span>a uma instância</span> <span>de <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions">Function</a></span> <span>como seu valor.</span></span></p>
<p>Há duas maneira de acessar propriedades: notação de ponto ou a notação de colchetes.</p>
<h3 id="Notação_de_ponto">Notação de ponto</h3>
<pre class="brush: js">get = object.property;
object.property = set;
</pre>
<p>Neste código, a propriedade deve ser um identificador válido, i.e. uma sequência de carácteres alfanuméricos, incluíndo também o underline ("<code>_</code>") e o cifrão ("<code>$</code>"), não pode começar com um número. Por exemplo, <code>object.$1</code> é valido, enquanto <code>object.1</code> não é.</p>
<pre class="brush: js">document.createElement('pre');
</pre>
<p>Aqui, o método chamado "createElement" <span class="short_text" id="result_box" lang="pt"><span>é recuperado do</span> <span>documento e</span> <span>é chamado.</span></span></p>
<p>Se você usar um método para um literal numérico e o literal numérico não tem expoente e nenhum ponto decimal, deixar de espaço em branco antes do ponto que precede a chamada de método para evitar que o ponto seja interpretado como um ponto decimal.</p>
<pre class="brush: js">77 .toExponential();
// ou
77
.toExponential();
// ou
(77).toExponential();
// ou
77..toExponential();
// ou
77.0.toExponential();
// porque 77. === 77.0, sem ambiguidade :p</pre>
<h3 id="Notação_de_colchete">Notação de colchete</h3>
<pre class="brush: js">get = object[property_name];
object[property_name] = set;
</pre>
<p><code>property_name</code> é uma string. A string não precisa ser um identificador válido; pode ser qualquer valor, e.g. "1foo", "!bar!", ou até " " (um espaço).</p>
<pre class="brush: js">document['createElement']('pre');
</pre>
<p>Isto faz exatamente a mesma coisa que o exemplo anterior.</p>
<p>Um espaço antes da notação de colchete é permitido.</p>
<pre class="brush: js">document ['createElement']('pre');</pre>
<h3 id="Nomes_de_propriedades"><span class="short_text" id="result_box" lang="pt"><span>Nomes de propriedades</span></span></h3>
<p><span class="short_text" id="result_box" lang="pt"><span>Nomes de propriedades</span></span> devem ser strings. Isto significa que objetos não-string não podem ser usados como chave em um objeto. Qualquer objeto não-string, incluindo um número, é <span class="short_text" id="result_box" lang="pt"><span>estereotipado</span></span> como uma string pelo método <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString">toString</a>.</p>
<pre class="brush: js">var object = {};
object['1'] = 'value';
console.log(object[1]);
</pre>
<p>A saída é "value", desde 1 é estereotipado como '1'.</p>
<pre class="brush: js">var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {};
object[foo] = 'value';
console.log(object[bar]);
</pre>
<p>A saída também é "value", já que ambos foo e bar são convertidos para a mesma string. No motor de Javascript <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, esta string poderia ser "['object Object']".</p>
<h3 id="Ligação_de_método">Ligação de método</h3>
<p>Um método não é limitado ao objeto de quem é metodo. Especificamente, <code>this</code> não é fixo em um método, i.e., <code>this</code> não se referece necessariamente ao objeto contendo o método. Ao invés disso, <code>this</code> é "passado" pela função call. Veja <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/this#Method_binding">method binding</a>.</p>
<h3 id="Nota_sobre_eval">Nota sobre <code>eval</code></h3>
<p>Novatos em JavaScript comentem muitas vezes o erro de usar <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval</a> onde a notação de colchete pode ser usada no lugar. Por exemplo, a sintaxe a seguir é muitas vezes vista em muitos scripts.</p>
<pre class="brush: js">x = eval('document.forms.form_name.elements.' + strFormControl + '.value');
</pre>
<p><code>eval</code> é lento e deve ser evitado sempre que possível. Também, <code>strFormControl</code> would have to hold an identifier, which is not required for names and IDs of form controls. It is better to use bracket notation instead:</p>
<pre class="brush: js">x = document.forms["form_name"].elements[strFormControl].value;
</pre>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</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>Initial definition. Implemented in JavaScript 1.0.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>{{jsxref("Object")}}</li>
<li>{{jsxref("Object/defineProperty")}}</li>
</ul>
|
