aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/javascript/reference/functions/definicoes_metodos/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/pt-br/web/javascript/reference/functions/definicoes_metodos/index.html')
-rw-r--r--files/pt-br/web/javascript/reference/functions/definicoes_metodos/index.html200
1 files changed, 200 insertions, 0 deletions
diff --git a/files/pt-br/web/javascript/reference/functions/definicoes_metodos/index.html b/files/pt-br/web/javascript/reference/functions/definicoes_metodos/index.html
new file mode 100644
index 0000000000..ac02cb9deb
--- /dev/null
+++ b/files/pt-br/web/javascript/reference/functions/definicoes_metodos/index.html
@@ -0,0 +1,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>