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
|
---
title: setter
slug: Web/JavaScript/Reference/Functions/set
translation_of: Web/JavaScript/Reference/Functions/set
---
<div>{{jsSidebar("Functions")}}</div>
<p>A sintaxe <em><strong><code>set</code></strong></em> liga a propriedade da função para ser chamada quando existe uma tentativa de definir valor para essa propriedade.</p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox">{set <em>prop</em>(<em>val</em>) { . . . }}
{set [expression](<em>val</em>) { . . . }}</pre>
<h3 id="Parâmetros">Parâmetros</h3>
<dl>
<dt><code>prop</code></dt>
<dd>Nome da propriedade ligada a função.</dd>
</dl>
<dl>
<dt><code>val</code></dt>
<dd><code><font face="Open Sans, Arial, sans-serif">Um apelido para variável que será atribuidada a prop</font>.</code></dd>
<dt>expression</dt>
<dd>Iniciando com ECMAScript 6, você pode usar também expressões para computar o nome da propriedade a ser definida na função.</dd>
</dl>
<h2 id="Descrição">Descrição</h2>
<p>Em JavaScript, um <em>setter </em>pode ser usado para executar uma função sempre que se tenta mudar uma propriedade específica. <em>Setters </em>são geralmente usados em conjunto com <em>getters</em>, para criar um tipo de pseudo-propriedade. No entanto é impossível ter-se um setter para uma propriedade que contenha um valor real.</p>
<p>Observe os seguintes itens ao trabalhar com a sintaxe <em>set</em>:</p>
<div>
<ul>
<li>Ele pode ter um identificador que é um número ou uma string;</li>
<li>Deve ter exatamente um parâmetro (para mais informações, acesse: <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">Mudança do <abbr title="ECMAScript 5th edition">ES5 incompatível</abbr>: funções getter e setter literais tem exatamemente zero ou um parâmetros</a>);</li>
<li>Não deve ter a mesma nomenclatura seja ela para propriedades ou função.<br>
(<code>{ set x(v) { }, set x(v) { } }</code> e <code>{ x: ..., set x(v) { } }</code> é proibido.)</li>
</ul>
</div>
<p>Um <em>setter </em>pode ser deletado usando o operator <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete"><code>delete</code></a>.</p>
<h2 id="Exemplos">Exemplos</h2>
<h3 id="Definindo_um_setter_em_new_Objects_no_inicializador">Definindo um setter em new Objects no inicializador</h3>
<p>Vai definir um pseudo-property <em>current </em>para este objeto, quando atribuido um valor, vai mudar <code>log</code> com o valor passado:</p>
<pre class="brush: js">var o = {
set current (str) {
this.log[this.log.length] = str;
},
log: []
}
</pre>
<p>Observer que <em>current </em>não está definido e qualquer tentativa de acesso irá resultar em <em>undefined</em>.</p>
<h3 id="Removendo_um_setter_com_o_operador_delete">Removendo um setter com o operador <code>delete</code></h3>
<p>Se você deseja remover o <em>setter</em>, poderá usar somente o <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>:</p>
<pre class="brush: js">delete o.current;
</pre>
<h3 id="Definindo_um_setter_para_um_Object_existente_usando_o_defineProperty">Definindo um setter para um Object existente usando o <code>defineProperty</code></h3>
<p>Para adicionar um <em>setter </em>para um Object existentem mais tarde, use {{jsxref("Object.defineProperty()")}}.</p>
<pre class="brush: js">var o = { a:0 };
Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } });
o.b = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
console.log(o.a) // 5</pre>
<h3 id="Usando_um_nome_de_propriedade_computada">Usando um nome de propriedade computada</h3>
<div class="note">
<p><strong>Atenção:</strong> Propriedades computadas são uma tecnologia experimental, parte da proposta ECMAScript 6, e não é amplamente suportada por todos os browsers ainda. Ele vai retornar um syntax error en ambientes que não tem suporte.</p>
</div>
<pre class="brush: js">var expr = "foo";
var obj = {
baz: "bar",
set [expr](v) { this.baz = v; }
};
console.log(obj.baz); // "bar"
obj.foo = "baz"; // run the setter
console.log(obj.baz); // "baz"
</pre>
<h2 id="Expecificações">Expecificaçõ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('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td>Initial definition.</td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td>
<td>{{Spec2('ES6')}}</td>
<td>Added computed property names.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</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="SpiderMonkey-specific_notes">SpiderMonkey-specific notes</h2>
<ul>
<li>Starting with<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.1"> JavaScript 1.8.1</a>, setters are no longer called when setting properties in object and array initializers.</li>
<li>From SpiderMonkey 38 on, a setter with a {{jsxref("Functions/rest_parameters", "rest parameter", "", 1)}} is a {{jsxref("SyntaxError")}} as per the ES6 specification.</li>
</ul>
<h2 id="See_also">See also</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">Defining Getters and Setters</a> in JavaScript Guide</li>
</ul>
|
