diff options
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.html | 200 |
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> |