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: setter
slug: Web/JavaScript/Referencia/Funciones/set
translation_of: Web/JavaScript/Reference/Functions/set
---
<div>{{jsSidebar("Funciones")}}</div>
<p>La sintaxis <strong><code>set</code></strong> asocia la propiedad de un objeto a una función que será llamada cuando haya un intento de asignar valor a esa propiedad.</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox notranslate">{set <em>prop</em>(<em>val</em>) { . . . }}
{set [expression](<em>val</em>) { . . . }}</pre>
<h3 id="Parámetros">Parámetros</h3>
<dl>
<dt><em><code>prop</code></em></dt>
<dd>El nombre de la propiedad a asociar con la función dada.</dd>
</dl>
<dl>
<dt><em><code>val</code></em></dt>
<dd>Un alias para la variable que contiene el valor a asignar a la <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">propiedad</span></font>.</dd>
<dt><em><code>expression</code></em></dt>
<dd>A partir de ECMAScript 2015, se puede también usar expresiones para nombres de propiedades computados para asociar a la función dada.</dd>
</dl>
<h2 id="Descripción">Descripción</h2>
<p>En JavaScript, un setter puede ser usado para ejecutar una función donde sea que una propiedad se intente cambiar. Los setters son regularmente usados en conjunto con getters para crear un tipo de pseudo-propiedad. No es posible tener simultáneamente un setter en una propiedad que ya tiene un valor.</p>
<p>Tenga en cuenta lo siguiente al trabajar con setters:</p>
<div>
<ul>
<li>Puede tener un identificador ya sea number o string;</li>
<li>Debe tener exactamente un parámentro (ver <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">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> para más información);</li>
<li>No debe aparecer en un objeto de notación literal con otro <code>set</code> o con otra entrada de datos con la misma propiedad.<br>
( <code>{ set x(v) { }, set x(v) { } }</code> y <code>{ x: ..., set x(v) { } }</code> están prohibidos )</li>
</ul>
</div>
<h2 id="Ejemplos">Ejemplos</h2>
<h3 id="Definiendo_un_setter_en_el_inicializador_de_nuevos_objetos">Definiendo un setter en el inicializador de nuevos objetos</h3>
<p>En el siguiente ejemplo definimos una pseudo-propiedad <code>actual</code> al objeto <code>lenguaje</code>. Cuando se le asigne un valor a <code>actual</code>, actualiza <code>log</code> con ese valor:</p>
<pre class="brush: js notranslate">var lenguaje = {
set actual(mensaje) {
this.log.push(mensaje);
},
log: []
}
lenguaje.actual='ES';
console.log(lenguaje.log); // ['ES']
lenguaje.actual='FR';
console.log(lenguaje.log); // ['ES', 'FR']
</pre>
<p>Note que <code>actual</code> no está definido y cualquier intento de accederlo devolverá <code>undefined</code>.</p>
<h3 id="Eliminando_un_setter_con_el_operador_delete">Eliminando un setter con el operador <code>delete</code> </h3>
<p>Si desea eliminar el setter, puede simplemente aplicar <a href="/es/docs/Web/JavaScript/Referencia/Operadores/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete"><code>delete</code></a> en él:</p>
<pre class="brush: js notranslate">delete lenguaje.actual;
</pre>
<h3 id="Definiendo_un_setter_en_un_objecto_existente_usando_defineProperty">Definiendo un setter en un objecto existente usando <code>defineProperty</code></h3>
<p>Para añadir un setter a un objeto <em>existente</em>,<em> </em>use {{jsxref("Object.defineProperty()")}}</p>
<pre class="brush: js notranslate">consr o = {a: 0};
Object.defineProperty(o, 'b', {
set: function (x) { this.a = x / 2; }
});
o.b = 10; // Ejecuta el setter, el cual asigna 10 / 2 (5) a la propiedad 'a'
console.log(o.a) // 5</pre>
<h3 id="Usando_un_nombre_de_propiedad_computado">Usando un nombre de propiedad computado</h3>
<div class="note">
<p><strong>Nota:</strong> Propiedades computadas son 'experimental technology'<em>,</em> parte de la propuesta para ECMAScript 6, y no está soportado en todos los navegadores. Dará error de sintaxis en entornos no soportados.</p>
</div>
<pre class="brush: js notranslate">const expr = 'foo';
var obj = {
baz: 'bar',
set [expr](v) { this.baz = v; }
};
console.log(obj.baz); // "bar"
obj.foo = "baz"; // ejecuta el setter
console.log(obj.baz); // "baz"
</pre>
<h2 id="Especificaciones">Especificaciones</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('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td>Definición inicial.</td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td>
<td>{{Spec2('ES6')}}</td>
<td>Se añaden las propiedades computadas.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con 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>{{CompatChrome(1)}}</td>
<td>{{ CompatGeckoDesktop("1.8.1") }}</td>
<td>{{ CompatIE(9) }}</td>
<td>9.5</td>
<td>3</td>
</tr>
<tr>
<td>Computed property names</td>
<td>{{CompatNo}}</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 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>{{ CompatGeckoMobile("1.8.1") }}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td>Computed property names</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{ CompatGeckoMobile("34.0") }}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Notas_específicas_para_SpiderMonkey-specific">Notas específicas para SpiderMonkey-specific</h2>
<ul>
<li>Comenzando con<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.1"> JavaScript 1.8.1</a>, los setters ya no son llamados cuando se definen las propiedades en los inicializadores de objetos y arrays.</li>
<li>De SpiderMonkey 38 en adelante, un setter con un {{jsxref("Functions/rest_parameters", "rest parameter", "", 1)}} es un {{jsxref("SyntaxError")}} conforme a la especificación ES6.</li>
</ul>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</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">Definiendo Getters y Setters</a> en la Guía JavaScript</li>
</ul>
|
