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
|
---
title: Definições de Método
slug: Web/JavaScript/Reference/Functions/Definicoes_metodos
tags:
- ECMAScript 2015
- Funções
- JavaScript
- Objeto
- Sintaxe
translation_of: Web/JavaScript/Reference/Functions/Method_definitions
---
<div>{{JsSidebar("Functions")}}</div>
<p>No ECMAScript 2015 foi introduzida uma sintaxe reduzida para definição de métodos em inicializadores de objetos. É uma abreviação para uma função atribuída ao nome do método.</p>
<p>{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}</p>
<div class="hidden">
<p>O código desse exemplo interativo está salvo em um repositório do GitHub. Se você quiser contribuir com o projeto de exemplos interativos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos um pull request.</p>
</div>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox">var obj = {
<var>propriedade</var>( <var>parametros…</var> ) {},
*<var>generator</var>( <var>parametros…</var> ) {},
// também com chaves computadas:
[<var>propriedade</var>]( <var>parameters…</var> ) {},
*[generator]( <var>parametros…</var> ) {},
// compare ES5 sintaxe para getter/setter:
get <var>propriedade</var>() {},
set <var>propriedade</var>(<var>valor</var>) {}
};
</pre>
<h2 id="Descrição">Descrição</h2>
<p>A sintaxe reduzida é similar à da <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> e <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> introduzida no ECMAScript 5.</p>
<p>Dado o seguinte código:</p>
<pre class="brush: js">var obj = {
foo: function() {},
bar: function() {}
};</pre>
<p>Agora você pode reduzi-lo para isto:</p>
<pre class="brush: js">var obj = {
foo() {},
bar() {}
};</pre>
<h3 id="Generator_methods">Generator methods</h3>
<p>Os <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/function*">generator methods</a> também podem ser definidos utilizando a sintaxe reduzida.</p>
<ul>
<li>Observe que o asterisco (*) na sintaxe reduzida deve estar antes do nome da propriedade generator. Assim, <code>* g(){}</code> funcionará, porém <code>g *(){}</code> não.</li>
<li>Se o método não for generator, sua definição não pode conter a palavra-chave <code>yield</code>. Dessa forma, <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/Generator_function_legada">generator functions legadas </a>também não funcionarão, lançando um {{jsxref("SyntaxError")}}. Sempre utilize <code>yield</code> em conjunto com o asterisco (*)</li>
</ul>
<pre class="brush: js;highlight[12]">// Utilizando a propriedade com nome (pre-ES6)
var obj2 = {
g: function*() {
var indice = 0;
while(true)
yield indice++;
}
};
// O mesmo objeto utilizando a sintaxe reduzida
var obj2 = {
* g() {
var indice = 0;
while(true)
yield indice++;
}
};
var coisa = obj2.g();
console.log(coisa.next().value); // 0
console.log(coisa.next().value); // 1</pre>
<h3 id="Métodos_assíncronos">Métodos assíncronos</h3>
<p>{{jsxref("Statements/funcoes_assincronas", "Funções assíncronas", "", 1)}} também podem ser definidas usando a sintaxe reduzida.</p>
<pre class="brush: js;highlight[12] line-numbers language-js"><code class="language-js"><span class="comment token">// Utilizando a propriedade com nome (pre-ES6)</span>
<span class="keyword token">var</span> obj3 <span class="operator token">=</span> <span class="punctuation token">{</span>
f<span class="punctuation token">:</span> <span class="keyword token">async</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="keyword token">await</span> alguma_promise<span class="punctuation token">;</span>
<span class="punctuation token">}</span>
<span class="punctuation token">}</span><span class="punctuation token">;</span>
<span class="comment token">// O mesmo objeto com a sintaxe reduzida</span>
<span class="keyword token">var</span> obj3 <span class="operator token">=</span> <span class="punctuation token">{</span>
<span class="keyword token">async</span> <span class="function token">f</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="keyword token">await</span> alguma_promise<span class="punctuation token">;</span>
<span class="punctuation token">}</span>
<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
<h3 id="Generator_methods_assíncronos">Generator methods assíncronos</h3>
<p> Os <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/function*">generator methods</a> também podem ser {{jsxref("Statements/funcoes_assincronas", "assíncronos", "", 1)}}</p>
<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> obj4 <span class="operator token">=</span> <span class="punctuation token">{</span>
f<span class="punctuation token">:</span> <span class="keyword token">async</span> <span class="keyword token">function</span><span class="operator token">*</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="keyword token">yield</span> <span class="number token">1</span><span class="punctuation token">;</span>
<span class="keyword token">yield</span> <span class="number token">2</span><span class="punctuation token">;</span>
<span class="keyword token">yield</span> <span class="number token">3</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>
<span class="punctuation token">}</span><span class="punctuation token">;</span>
<span class="comment token">// O mesmo objeto com a sintaxe reduzida</span>
<span class="keyword token">var</span> obj4 <span class="operator token">=</span> <span class="punctuation token">{</span>
<span class="keyword token">async</span><span class="operator token">*</span> <span class="function token">f</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="keyword token">yield</span> <span class="number token">1</span><span class="punctuation token">;</span>
<span class="keyword token">yield</span> <span class="number token">2</span><span class="punctuation token">;</span>
<span class="keyword token">yield</span> <span class="number token">3</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>
<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
<h3 id="Métodos_reduzidos_não_são_construíveis">Métodos reduzidos não são construíveis</h3>
<p>Métodos assim definidos não são construtores e lançarão um {{jsxref("TypeError")}} se você tentar instanciá-los.</p>
<pre class="brush: js">var obj = {
metodo() {},
};
new obj.metodo; // TypeError: obj.method is not a constructor
var obj = {
* g() {}
};
new obj.g; // TypeError: obj.g is not a constructor (modificado no ES2016)
</pre>
<h2 id="Exemplos">Exemplos</h2>
<h3 id="Caso_de_teste_simples">Caso de teste simples</h3>
<pre class="brush: js;highlight[3]">var obj = {
a : "foo",
b(){ return this.a; }
};
console.log(obj.b()); // "foo"
</pre>
<h3 id="Nome_de_propriedades_computados">Nome de propriedades computados</h3>
<p>A sintaxe reduzida também suporta nome de propriedades computados.</p>
<pre class="brush: js;highlight[4]">var bar = {
foo0 : function (){return 0;},
foo1(){return 1;},
["foo" + 2](){return 2;},
};
console.log(bar.foo0()); // 0
console.log(bar.foo1()); // 1
console.log(bar.foo2()); // 2</pre>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificações</th>
<th scope="col">Estado</th>
<th scope="col">Comentário</th>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td>
<td>{{Spec2('ES6')}}</td>
<td>Initial definition.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</h2>
<div class="hidden">
<p>A tabela de compatibilidade desta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, verifique <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data </a>e envie-nos um pull request.</p>
</div>
<p>{{Compat("javascript.functions.method_definitions")}}</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><code><a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/get">get</a></code></li>
<li><code><a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li>
<li><a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Lexical_grammar">Gramática léxica</a></li>
</ul>
|
