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
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
|
---
title: getter
slug: Web/JavaScript/Reference/Functions/get
translation_of: Web/JavaScript/Reference/Functions/get
---
<div>{{jsSidebar("Functions")}}</div>
<p>la sintaxi <strong><code>get</code></strong> lliga la propietat d'un objecte a una funció que es cridarà quan la propietat sigui cercada.</p>
<h2 id="Sintaxi">Sintaxi</h2>
<pre class="syntaxbox">{get <em>prop</em>() { ... } }
{get <em>[expressió]</em>() { ... } }</pre>
<h3 id="Paràmetres">Paràmetres</h3>
<dl>
<dt><code>prop</code></dt>
<dd>El nom de la propietat que es pretén lligar a la funció donada.</dd>
<dt>expressió</dt>
<dd>A partir d'ECMAScript 6, també es pot utilitzar expressions per a calcular el nom d'una propietat a lligar a la funció donada.</dd>
</dl>
<h2 id="Descripció">Descripció</h2>
<p>A vegades és desitjable permetre l'accès a una propietat que retorna un valor calculat dinàmicament, o potser es vol reflectir l'estat d'una variable interna sense ésser necessari l'ús de crides explícites a mètodes. En JavaScript, Això es pot aconseguir utilitzant un <em>getter</em>. No és possible tenir simultàniament un lligam a una propietat i que aquesta mateixa propietat contingui un valor, tot i que sí és possible utilitzar un getter i un setter en conjunt per crear un tipus de pseudo-propietat.</p>
<p>Tingueu en compte el següent quan treballeu amb la sintàxi <code>get</code>:</p>
<div>
<ul>
<li>Pot tenir com a identificador tant un número com una string;</li>
<li>Ha de tenir exactament zero paràmetres (vegeu <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Canvi incompatible <abbr title="ECMAScript 5th edition">ES5</abbr>: les funcions getter i setter literals han de tenir zero o un argument</a> per més informació).</li>
<li>No pot aparèixer en un objecte literla amb un altre <code>get</code> o amb una entrada de dades per la mateixa propietat (<code>{ get x() { }, get x() { } }</code> i <code>{ x: ..., get x() { } }</code> estàn prohibits).</li>
</ul>
</div>
<p>Un getter pot ser eliminiat utilitzant l'operador <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/delete_Operator">delete.</a></code></p>
<h2 id="Exemples">Exemples</h2>
<h3 id="Definir_un_getter_en_nous_objectes_en_inicialitzadors_d'objectes">Definir un getter en nous objectes, en inicialitzadors d'objectes</h3>
<p>Això crearà una pseudo-propietat <code>latest</code> per l'objecte <code>obj</code>, el qual retornarà l'últim ítem de l'array en <code>log</code>.</p>
<pre class="brush: js">var log = ['test'];
var obj = {
get latest () {
if (log.length == 0) retorna undefined;
return log[log.length - 1]
}
}
console.log (obj.latest); // Retornarà "test".
</pre>
<p>Recordeu que intentar assignar un valor a <code>latest</code> no el canviarà.</p>
<h3 id="Eliminar_un_getter_utilitzanr_l'operador_delete">Eliminar un getter utilitzanr l'operador <code>delete</code></h3>
<p>Si voleu eliminar el getter, simplement utilitzeu <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>:</p>
<pre class="brush: js">delete obj.latest;
</pre>
<h3 id="Definir_un_getter_en_objectes_existents_utilitzant_la_Propietat_define">Definir un getter en objectes existents utilitzant la<code> Propietat</code> <code>define</code></h3>
<p>Per annexar un getter a un objecte existent posteriorment en qualsevol moment, utilitzeu {{jsxref("Object.defineProperty()")}}.</p>
<pre class="brush: js">var o = { a:0 }
Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });
console.log(o.b) // Executa el getter, el qual produeix a + 1 (que és 1)</pre>
<h3 id="Utilitzar_un_nom_de_propietat_calculat">Utilitzar un nom de propietat calculat</h3>
<div class="note">
<p><strong>Nota:</strong> Les propietats calculades són una tecnologia experimental, que forma part de la proposta d'ECMAScript 6, i encara no estàn ampliament suportats pels navegadors. Això llençarà un error de sintàxi en entorns que no les suportin.</p>
</div>
<pre class="brush: js">var expr = "foo";
var obj = {
get [expr]() { return "bar"; }
};
console.log(obj.foo); // "bar"</pre>
<h3 id="Getters_smart_self-overwriting_lazy"> Getters smart / self-overwriting / lazy</h3>
<p>Getters et donen una forma de definir una propietat d'un objecte, però aquests no calculen el valor de la propietat fins que no s'hi ha accedit. getter posposen el cost de calcular el valor fins el moment en que es necessiti el valor, i si no és mai necessari, mai es pagarà el cost.</p>
<p>Una tècnica d'optimització addiccional per retardar o realitzar de forma lenta el càlcul del valor d'una propietat i guardar-ho per a accedir-hi posteriorment són els<strong> getters smart o<em> <a href="https://en.wikipedia.org/wiki/Memoization">memoized</a> </em></strong>. El valor és calculat el primer cop que es crida el getter, i és llavors guardat per tal els accessos subsegüents retornin el calor guardat en caché sense recalcular-lo. Això és útil en les situacions següents:</p>
<ul>
<li>Si el càlcul del valor d'una propietat és car (utilitza massa RAM o massa temps de CPU, spawns worker thread, recupera els arxius remots, etc).</li>
<li>Si el valor no és necessari ara mateix. S'utilitzarà després, o en alguns casos no s'utilitzarà mai.</li>
<li>Si s'utilitza, serà accedit diverses vegades, i no hi ha necessitat de recalcular el valor que no es canviarà, o no s'hauria de recalcular.</li>
</ul>
<p>Això vol dir que no haurieu d'utilitzar un getter lazy per una propietat el valor de la qual espereu canviar, ja que el getter no recalcularà el valor.</p>
<p>En l'exemple següent, l'objecte té un getter com propietat pròpia. Obtenint la propietat, la propietat s'elimina de l'objecte i es reafegeix, però implícitament com a propietat de tipus data aquest cop. Finalment el valor es retorna.</p>
<pre class="brush: js">get notifier() {
delete this.notifier;
return this.notifier = document.getElementById("bookmarked-notification-anchor");
},</pre>
<p>Per codi Firefox, vegeu també el mòdul de codi XPCOMUtils.jsm, el qual defineix la funció <code><a href="/en-US/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a></code>.</p>
<h2 id="Especificacions">Especificacions</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificació</th>
<th scope="col">Estat</th>
<th scope="col">Comentaris</th>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td>Definició inicial.</td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td>
<td>{{Spec2('ES6')}}</td>
<td>Noms de propietats calculats afegits.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilitat_amb_navegadors">Compatibilitat amb navegadors</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>{{CompatChrome(1)}}</td>
<td>{{ CompatGeckoDesktop("1.8.1") }}</td>
<td>{{ CompatIE(9) }}</td>
<td>9.5</td>
<td>3</td>
</tr>
<tr>
<td>Noms de propietats calculats</td>
<td>{{CompatChrome(46)}}</td>
<td>{{ CompatGeckoDesktop("34") }}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome per Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoMobile("1.8.1") }}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td>Noms de propietats calculats</td>
<td>47</td>
<td>{{CompatNo}}</td>
<td>{{ CompatGeckoMobile("34.0") }}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Vegeu_també">Vegeu també</h2>
<ul>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a></li>
<li>{{jsxref("Operators/delete", "delete")}}</li>
<li>{{jsxref("Object.defineProperty()")}}</li>
<li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li>
<li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li>
<li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Definir Getters i Setters</a> en la guia de JavaScript</li>
</ul>
|
