diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pt-br/web/javascript/reference/functions | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/pt-br/web/javascript/reference/functions')
8 files changed, 2137 insertions, 0 deletions
diff --git a/files/pt-br/web/javascript/reference/functions/arguments/index.html b/files/pt-br/web/javascript/reference/functions/arguments/index.html new file mode 100644 index 0000000000..5b08e6c5ba --- /dev/null +++ b/files/pt-br/web/javascript/reference/functions/arguments/index.html @@ -0,0 +1,258 @@ +--- +title: Arguments object +slug: Web/JavaScript/Reference/Functions/arguments +tags: + - Funções + - JavaScript + - Referência(2) + - argumentos +translation_of: Web/JavaScript/Reference/Functions/arguments +--- +<div> +<div>{{jsSidebar("Functions")}}</div> +</div> + +<p>O objeto <strong><code>arguments</code></strong> é como um objeto Array correspondendo aos argumentos passados para uma função.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">arguments</pre> + +<h2 id="Descrição">Descrição</h2> + +<p>O objeto <code>arguments</code> é uma variável local disponível dentro de todas as funções. Você pode referenciar os argumentos de uma função dentro da função usando o objeto <code>arguments</code>. Esse objeto contém um registro para cada argumento fornecido para a função, com o índice do primeiro registro começando em 0. Por exemplo, se são passados três argumentos para uma função, você pode referenciá-los como a seguir: </p> + +<pre class="brush: js">arguments[0] +arguments[1] +arguments[2] +</pre> + +<p>Os argumentos também podem ser definidos:</p> + +<pre class="brush: js">arguments[1] = 'novo valor';</pre> + +<p>O objeto <code>argumentos</code> não é um {{jsxref("Array")}}. É similar a um Array, mas não possui as propriedades de <code>Array</code>, exceto <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/length" title="JavaScript/Reference/Functions_and_function_scope/arguments/length">length</a></code>. Por exemplo, ele não possui o método <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="JavaScript/Reference/Global_Objects/Array/pop">pop</a></code>. Entretanto, ele pode ser convertido em um <code>Array</code> real:</p> + +<pre class="brush: java"><code>var args = Array.prototype.slice.call(arguments); +var args = [].slice.call(arguments); + +// ES2015 +var args = Array.from(arguments);</code></pre> + +<div class="warning"> +<p>Usar slice nos argumentos impedem otimizações em alguns motores JavaScript (V8 por exemplo - <a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">mais informações</a>). Se você precisar, tente construir um novo array iterando através dos argumentos do objeto. Uma alternativa seria usar o construtor do <code>Array</code> como uma função:</p> + +<pre class="brush: js"><code>var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));</code></pre> +</div> + +<p>Você pode usar o objeto <code>arguments</code> se você chamar uma função com mais argumentos do que ele é formalmente declarado para aceitar. Esta técnica é útil para funções que podem ser passada em um número de variáveis de argumentos. Você pode usar <code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length" title="JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code> para determinar o número de argumentos passado para a função, e então processar cada argumento usando o objeto <code>arguments</code>. Para determinar o número de parâmetros declarados na <a href="/pt-BR/docs/Glossary/Signature/Function">assinatura</a> da função, use a propriedade<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/length" title="JavaScript/Reference/Global_Objects/Function/length"> Function.length</a></code>.</p> + +<h3 id="Usando_typeof_com_Arguments">Usando typeof com Arguments</h3> + +<p>O comando <code>typeof arguments</code> retorna 'object'. </p> + +<pre class="brush: js"><code>console.log(typeof arguments); // 'object'</code></pre> + +<p>O <code>typeof</code> de argumentos individuais pode ser determinado com o uso do índice.</p> + +<pre class="brush: js"><code>console.log(typeof arguments[0]); //this will return the typeof individual arguments.</code></pre> + +<h3 id="Usando_a_Sintaxe_Spread_com_Arguments">Usando a Sintaxe Spread com Arguments</h3> + +<p>Você também pode usar o método {{jsxref("Array.from()")}} ou o <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Spread_operator">operador spread</a> para converter argumentos em um Array real:</p> + +<pre class="brush: js"><code>var args = Array.from(arguments); +var args = [...arguments];</code></pre> + +<h2 id="Propriedades">Propriedades</h2> + +<dl> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee" title="JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code></dt> + <dd>Referência para a função atualmente em execução.</dd> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/caller" title="JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{ Obsolete_inline() }}</dt> + <dd>Referência para a função que invocou a função atualmente em execução.</dd> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/length" title="JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code></dt> + <dd>Referência para o número de argumentos passados para a função.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator" title="JavaScript/Reference/Functions_and_function_scope/arguments/@@iterator">arguments[@@iterator]</a></code></dt> + <dd>Retorna um novo objeto Array Iterator que contém os valores para cada índice dos argumentos.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Definindo_uma_função_que_concatena_várias_strings">Definindo uma função que concatena várias strings</h3> + +<p>Este exemplo define uma função que <span id="result_box" lang="pt"><span class="hps">concatena</span> </span>várias strings. O único argumento formal para a função é uma string que especifica os caracteres que separam os itens a concatenar. A função é definida como se segue:</p> + +<pre class="brush:js">function myConcat(separator) { + var args = Array.prototype.slice.call(arguments, 1); + return args.join(separator); +}</pre> + +<p>Você pode passar qualquer número de argumentos para essa função e ela cria uma lista usando cada argumento como um item na lista.</p> + +<pre class="brush:js">// returns "red, orange, blue" +myConcat(", ", "red", "orange", "blue"); + +// returns "elephant; giraffe; lion; cheetah" +myConcat("; ", "elephant", "giraffe", "lion", "cheetah"); + +// returns "sage. basil. oregano. pepper. parsley" +myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre> + +<h3 id="Definindo_uma_função_que_cria_listas_HTML">Definindo uma função que cria listas HTML</h3> + +<p>Este exemplo define uma função que cria uma string contatenado HTML para uma lista. O único argumento formal para a função é uma string que é "u" se a lista for <span class="short_text" id="result_box" lang="pt"><span class="hps">desordenada</span></span> (<span class="short_text" id="result_box" lang="pt"><span class="hps">marcadores</span></span>), ou "o" se a lista for ordenada (<span class="short_text" id="result_box" lang="pt"><span class="hps">numerada</span></span>). A função é definida como se segue:</p> + +<pre class="brush:js">function list(type) { + var result = "<" + type + "l><li>"; + var args = Array.prototype.slice.call(arguments, 1); + result += args.join("</li><li>"); + result += "</li></" + type + "l>"; // end list + + return result; +}</pre> + +<p>Você pode passar qualquer número de argumentos para essa função, e ela adiciona cada argumento como um item para uma lista do tipo indicado. Por exemplo:</p> + +<pre class="brush:js">var listHTML = list("u", "One", "Two", "Three"); + +/* listHTML is: + +"<ul><li>One</li><li>Two</li><li>Three</li></ul>" + +*/</pre> + +<h3 id="Rest_default_e_parâmetros_desestruturados">Rest, default e parâmetros desestruturados</h3> + +<p>O objeto <code>arguments</code> pode ser usado em conjunto com os parâmetros <a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a> e <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destruturados</a>.</p> + +<pre class="brush: js"><code>function foo(...args) { + return args; +} +foo(1, 2, 3); // [1,2,3]</code></pre> + +<p>Enquanto a presença dos parâmetros <a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, ou <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">desestruturados</a> não alteram o <a href="/pt-BR/docs/Web/JavaScript/Reference/Strict_mode#Making_eval_and_arguments_simpler">comportamento do objeto <code>arguments</code> no código em strict mode</a>, existe uma sutil diferença para o código non-strict.</p> + +<p>Quando uma função não-strict <strong><strong>não</strong></strong> contém parâmetros <a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, ou <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">desestruturados</a>, os valores no objeto <code>arguments</code> <strong>modificam</strong> os valores dos argumentos (e vice-versa). Veja o código:</p> + +<pre class="brush: js"><code>function func(a) { + arguments[0] = 99; // updating arguments[0] also updates a + console.log(a); +} +func(10); // 99</code></pre> + +<p>e</p> + +<pre class="brush: js"><code>function func(a) { + a = 99; // updating a also updates arguments[0] + console.log(arguments[0]); +} +func(10); // 99</code></pre> + +<p>Quando uma função não-strict <strong>contém</strong> parâmetros <a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, ou <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">desestruturados</a>, os valores no objeto <code>arguments</code> <strong>não modificam</strong> os valores dos argumentos (e vice-versa). Ao invés disso, eles refletem os argumentos fornecidos no momento da chamada:</p> + +<pre class="brush: js"><code>function func(a = 55) { + arguments[0] = 99; // updating arguments[0] does not also update a + console.log(a); +} +func(10); // 10</code></pre> + +<p>e</p> + +<pre class="brush: js"><code>function func(a = 55) { + a = 99; // updating a does not also update arguments[0] + console.log(arguments[0]); +} +func(10); // 10</code></pre> + +<p>e</p> + +<pre class="brush: js"><code>function func(a = 55) { + console.log(arguments[0]); +} +func(); // undefined</code></pre> + +<h2 id="Especificações"><span class="short_text" id="result_box" lang="pt"><span class="hps">Especificações</span></span></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col"><span class="short_text" id="result_box" lang="pt"><span class="hps">Especificações</span></span></th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td><span class="short_text" id="result_box" lang="pt"><span class="hps">Definição</span> <span class="hps">inicial.</span> <span class="hps">Implementado em</span> <span class="hps">JavaScript 1.1</span></span></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_navegadores">Compatibilidade com 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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/functions/arrow_functions/index.html b/files/pt-br/web/javascript/reference/functions/arrow_functions/index.html new file mode 100644 index 0000000000..1694545a71 --- /dev/null +++ b/files/pt-br/web/javascript/reference/functions/arrow_functions/index.html @@ -0,0 +1,384 @@ +--- +title: Arrow functions +slug: Web/JavaScript/Reference/Functions/Arrow_functions +tags: + - ECMAScript 2015 + - Funções + - Intermediário + - JavaScript + - Referencia +translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Uma <strong>expressão <em>arrow function</em></strong> possui uma sintaxe mais curta quando comparada a uma expressão de função (<em><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/function">function expression</a></em>) e não tem seu próprio <em><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/this">this</a></em>, <em><a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></em>, <em><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/super">super</a></em> ou <em><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></em>. Estas expressões de funções são melhor aplicadas para funções que não sejam métodos, e elas não podem ser usadas como construtoras (<em>constructors</em>).</p> + +<p>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<h3 id="Sintaxe_básica">Sintaxe básica</h3> + +<pre>(param1, param2, …, paramN) => { statements } +(param1, param2, …, paramN) => expression +// equivalente a: => { return expression; } + +// Parênteses são opcionais quando só há um nome de parâmetro: +(singleParam) => { statements } +singleParam => { statements } + +// A lista de parâmetros para uma função sem parâmetros deve ser escrita com um par de parênteses. +() => { statements }</pre> + +<h3 id="Sintaxe_avançada">Sintaxe avançada</h3> + +<pre>// Envolva o corpo da função em parênteses para retornar uma expressão literal de objeto: +params => ({foo: bar}) + +// Parâmetros rest (<em><a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>)</em> e parâmetros padrões (<em><a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a></em>) são suportados +(param1, param2, ...rest) => { statements } +(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements } + +// Desestruturação (<em><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructuring</a></em>) dentro da lista de parâmetros também é suportado +var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; +f(); // 6</pre> + +<h2 id="Descrição">Descrição</h2> + +<p>Veja também <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a>.</p> + +<p>Dois fatores influenciaram a introdução das <em>arrow functions</em>: funções mais curtas e a inexistência da palavra chave <code>this</code>.</p> + +<h3 id="Funções_mais_curtas">Funções mais curtas</h3> + +<pre><code>var elements = [ + 'Hydrogen', + 'Helium', + 'Lithium', + 'Beryllium' +]; + +elements.map(function(element) { + return element.length; +}); // esta sentença retorna o array: [8, 6, 7, 9] + +// A função regular acima pode ser escrita como a <em>arrow function</em> abaixo +elements.map((element) => { + return element.length; +}); // [8, 6, 7, 9] + +// Quando só existe um parâmetro, podemos remover os parênteses envolvendo os parâmetros: +elements.map(element => { + return element.length; +}); // [8, 6, 7, 9] + +// Quando a única sentença em uma <em>arrow function</em> é `return`, podemos remover `return` e remover +// as chaves envolvendo a sentença +elements.map(element => element.length); // [8, 6, 7, 9] + +// Neste caso, porque só precisamos da propriedade <em>length</em>, podemos usar o parâmetro de destruição (<em>destructing parameter</em>): +// Note que a <em>string</em> `"<em>length</em>"` corresponde a propriedade que queremos obter enquanto que a +// obviamente propriedade não especial `<em>lengthFooBArX</em>` é só o nome de uma variável que pode ser mudado +// para qualquer nome válido de variável que você quiser +elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9] + +// Esta atribuição de parâmetro de destruição (<em>destructing parameter</em>) pode ser escrita como visto abaixo. Entretanto, note que +// não há um específico `"length"` para selecionar qual propriedade nós queremos obter. Ao invés disso, o nome literal +// da própria variável `length` é usado como a propriedade que queremos recuperar do objeto. +elements.map(({ length }) => length); // [8, 6, 7, 9]</code></pre> + +<h3 id="Sem_this_separado">Sem <code>this</code> separado</h3> + +<p>Antes das <em>arrow functions</em>, toda nova função definia seu próprio valor de <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/this">this</a> (baseado em como a função era chamada, um novo objeto no caso de um construtor, <em>undefined</em> em chamadas de funções com modo estrito (<em><a href="/pt-BR/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>)</em>, o objeto base se a função é chamada como um "método de objeto", etc.). Este comportamento é importuno com um estilo de programação orientado a objeto.</p> + +<pre class="brush: js">function Person() { + // O contrutor Person() define `<code>this`</code> como uma instância dele mesmo. + this.age = 0; + + setInterval(function growUp() { + // Em modo não estrito, a função growUp() define `this` + // como o objeto global (porque é onde growUp() é executado.), + // que é diferente ao `this` + // definido pelo construtor Person(). + this.age++; + }, 1000); +} + +var p = new Person();</pre> + +<p>No ECMAScript 3/5, este comportamento era corrigido definindo o valor em <code>this</code> à uma variável que pudesse ser encapsulada.</p> + +<pre class="brush: js">function Person() { + var that = this; + that.age = 0; + + setInterval(function growUp() { + // A chamada a função refere à variáevel `that` da qual + // o valor é o objeto esperado. + that.age++; + }, 1000); +}</pre> + +<p>Alternativamente, uma função de ligação (<a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bound function</a>) pode ser criada para que o valor pré-atribuido à <code>this</code> seja passado para a função alvo de ligação (a função <code>growUp()</code> no exemplo acima.</p> + +<p>Uma <em>arrow function</em> não tem seu próprio <code>this;</code> o valor <code>this</code> do contexto léxico encapsulado é usado. Ex: <em>Arrow functions</em> seguem as regras normais de pesquisa de variáveis. Então, ao procurar por <code>this</code>, que não está no escopo atual elas acabam encontrando <code>this</code> no escopo encapsulado. Assim, no código a seguir, o <code>this</code> dentro da função que é passado para <code>setInterval</code> tem o mesmo valor do <code>this</code> na função lexicamente encapsulada:</p> + +<pre class="brush: js">function Person(){ + this.age = 0; + + setInterval(() => { + this.age++; // |this| corretamente se refere ao objeto Person + }, 1000); +} + +var p = new Person();</pre> + +<h4 id="Relação_com_strict_mode">Relação com <em>strict mode</em></h4> + +<p>Considerando que <code>this</code> vem do contexto léxico envolvente, as regras do modo estrito (<em><a href="/pt-BR/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a></em>) em relação ao <code>this</code> são ignoradas.</p> + +<pre class="brush: js">var f = () => { 'use strict'; return this }; +f() === window; // ou o objeto global</pre> + +<p>O restante das regras do modo estrito (<em>strict mode)</em> são aplicadas normalmente.</p> + +<h4 id="Invocação_por_call_ou_apply">Invocação por call ou apply</h4> + +<p>Já que as <em>arrow functions</em> não têm o próprio <code>this</code>, os métodos <code>call()</code> ou <code>apply()</code> só podem passar parâmetros. <code>thisArg</code> é ignorado.</p> + +<pre><code>var adder = { + base: 1, + + add: function(a) { + var f = v => v + this.base; + return f(a); + }, + + addThruCall: function(a) { + var f = v => v + this.base; + var b = { + base: 2 + }; + + return f.call(b, a); + } +}; + +console.log(adder.add(1)); // Deve logar 2 +console.log(adder.addThruCall(1)); // Deve logar 2 ainda</code></pre> + +<h3 id="Sem_ligação_(binding)_de_argumentos_(arguments)">Sem ligação (<em>binding</em>) de argumentos (<code><em>arguments</em></code>)</h3> + +<p><em>Arrow functions</em> não tem o próprio objeto argumentos (<a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/arguments">arguments object</a>). Assim, neste exemplo, <code>arguments</code> é simplesmente uma referência aos argumentos do escopo encapsulado:</p> + +<pre><code>var arguments = [1, 2, 3]; +var arr = () => arguments[0]; + +arr(); // 1 + +function foo(n) { + var f = () => arguments[0] + n; // ligação implícita dos argumentos de foo. arguments[0] é n + return f(); +} + +foo(3); // 6</code></pre> + +<p>Na maioria dos casos, usar parâmetros rest (<em><a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a></em>) é uma boa alternativa a usar um objeto <code>arguments</code>.</p> + +<pre class="brush: js"><code>function foo(n) { + var f = (...args) => args[0] + n; + return f(10); +} + +foo(1); // 11</code></pre> + +<h3 id="Arrow_functions_usadas_como_métodos"><em>Arrow functions</em> usadas como métodos</h3> + +<p>Como afirmado anteriormente, expressões <em>arrow function</em> são melhores para funções que não sejam métods. Vamos ver o que acontece quando tentamos usá-las como métodos.</p> + +<pre><code>'use strict'; + +var obj = { + i: 10, + b: () => console.log(this.i, this), + c: function() { + console.log(this.i, this); + } +} + +obj.b(); // imprime undefined, Window {...} (ou o objeto global) +obj.c(); // imprime 10, Object {...}</code></pre> + +<p><em>Arrow functions</em> não tem o próprio <code>this</code>. Outro exmemplo envolvendo {{jsxref("Object.defineProperty()")}}:</p> + +<pre><code>'use strict'; + +var obj = { + a: 10 +}; + +Object.defineProperty(obj, 'b', { + get: () => { + console.log(this.a, typeof this.a, this); // undefined 'undefined' Window {...} (ou o objeto global) + return this.a + 10; // representa o objeto global 'Window', portanto 'this.a' retorna 'undefined' + } +});</code></pre> + +<h3 id="Uso_do_operador_new">Uso do operador <code>new</code></h3> + +<p>Arrow functions não podem ser usadas como construtores e lançarão um erro quando usadas com o <code>new</code>.</p> + +<h3 id="Uso_da_propriedade_prototype">Uso da propriedade <code>prototype</code></h3> + +<p><em>Arrow functions</em> não têm a propriedade <code>prototype</code>.</p> + +<pre><code>var Foo = () => {}; +console.log(Foo.prototype); // undefined</code></pre> + +<h3 id="Uso_da_palavra_chave_yield">Uso da palavra chave <code>yield</code></h3> + +<p>A palavra chave <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> não pode ser usada no corpo de uma <em>arrow function</em> (exceto quando permitido dentro de funções aninhadas dentro delas). como consequência, <em>arrow functions</em> não podem ser usadas como geradoras (<em>generators</em>).</p> + +<h2 id="Corpo_de_função">Corpo de função</h2> + +<p><em>Arrow functions</em> podem ter um corpo conciso (<em>"concise body")</em> ou o usual corpo em bloco (<em>"block body")</em>.</p> + +<p>Em um <em>concise body</em>, apenas uma expressão é especificada, a qual se torna o valor de retorno implícito. Em um <em>block body</em>, você precisa explicitamente usar a declaração de retorno, ou seja, o <code>return</code>.</p> + +<pre><code>var func = x => x * x; +// sintaxe de concise body. O "return" é implícito + +var func = (x, y) => { return x + y; }; +// Em um função com block body, é necessário um "return" explícito</code></pre> + +<h2 id="Retornando_objetos_literais">Retornando objetos literais</h2> + +<p>Tenha em mente que retornar objetos literais usando a sintaxe de corpo conciso (<em>concise body</em>) <code>params => {object:literal}</code> não funcionará como experado.</p> + +<pre><code>var func = () => { foo: 1 }; +// Chamar func() retornará undefined! + +var func = () => { foo: function() {} }; +// SyntaxError (Erro de sintaxe): a declaração da função requer um nome</code></pre> + +<p> </p> + +<p>Isto acontece porque o código dentro das chaves ({}) é convertido como uma sequência de sentenças (ex: <code>foo</code> é tratado como um título, não como uma chave num objeto literal).</p> + +<p>Se lembre de envolver o objeto literal em parênteses.</p> + +<pre><code>var func = () => ({foo: 1});</code> +</pre> + +<h2 id="Quebras_de_linha">Quebras de linha</h2> + +<p>Uma <em>arrow function</em> não pode conter uma quebra de linha entre seus parâmetros e sua flecha.</p> + +<pre><code>var func = (a, b, c) + => 1; +// SyntaxError (Erro de sintaxe): experada expressão, mas obteve '=>'</code></pre> + +<p>Entretanto, isto pode ser corrigido ao usar parênteses ou colocar a quebra de linha dentro dos argumentos como visto abaixo para garantir que o código permaneça bonito e leve.</p> + +<pre class="brush: js"><code>var func = ( + a, + b, + c +) => ( + 1 +); +// SyntaxError (erro de sintaxe) não é lançado</code></pre> + +<p> </p> + +<h2 id="Ordem_de_análise">Ordem de análise</h2> + +<p>Apesar de a flecha numa <em>arrow function</em> não ser um operador, <em>arrow functions</em> possuem regras especiais de análise que interagem diferentemente com precedência de operador (<a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a>) comparadas à funções comuns.</p> + +<pre><code>let callback; + +callback = callback || function() {}; // ok + +callback = callback || () => {}; +// SyntaxError (Erro de sintaxe): argumentos inválidos de arrow-function + +callback = callback || (() => {}); // ok</code></pre> + +<p> </p> + +<h2 id="Mais_exemplos">Mais exemplos</h2> + +<pre><code>// Uma arrow function vazia retorna undefined +let empty = () => {}; + +(() => 'foobar')(); +// Retorna "foobar" +// (esta é uma Expressão de Função Invocada Imediatamente (Immediately Invoked Function Expression) +// veja 'IIFE' no glossário) + +var simple = a => a > 15 ? 15 : a; +simple(16); // 15 +simple(10); // 10 + +let max = (a, b) => a > b ? a : b; + +// Mapeamento, filtragem, ... simples de array + +var arr = [5, 6, 13, 0, 1, 18, 23]; + +var sum = arr.reduce((a, b) => a + b); +// 66 + +var even = arr.filter(v => v % 2 == 0); +// [6, 0, 18] + +var double = arr.map(v => v * 2); +// [10, 12, 26, 0, 2, 36, 46] + +// Cadeias de promessa (<em>promisse chains</em>) mais concisas +promise.then(a => { + // ... +}).then(b => { + // ... +}); + +// Arrow functions sem parâmetros que são visualmente mais fáceis de analisar +setTimeout( () => { + console.log('E aconteço antes'); + setTimeout( () => { + // deeper code + console.log('Eu aconteço depois'); + }, 1); +}, 1);</code></pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_Navegadores">Compatibilidade com Navegadores</h2> + +<div class="hidden"> +<p>A tabela de compatibilidade nesta página é gerada de dados estruturados. Se você quiser contribuir com os dados, por favor verifique <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos mande um <em>pull request</em>.</p> +</div> + +<div>{{Compat("javascript.functions.arrow_functions")}}</div> + +<div id="compat-mobile"> </div> 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> diff --git a/files/pt-br/web/javascript/reference/functions/get/index.html b/files/pt-br/web/javascript/reference/functions/get/index.html new file mode 100644 index 0000000000..753f16dab0 --- /dev/null +++ b/files/pt-br/web/javascript/reference/functions/get/index.html @@ -0,0 +1,217 @@ +--- +title: getter +slug: Web/JavaScript/Reference/Functions/get +translation_of: Web/JavaScript/Reference/Functions/get +--- +<div>{{jsSidebar("Functions")}}</div> + +<div>A sintaxe de <strong>get </strong>associa uma propriedade de um objeto a uma função que será chamada quando tal propriedade é acessada.</div> + + + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">{get <em>prop</em>() { ... } } +{get <em>[expression]</em>() { ... } }</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>O nome da propriedade à qual a função dada será associada.</dd> + <dt>expression</dt> + <dd>A partir do ECMAScript 6, você pode também utilizar expressões para um nome computado de uma propriedade para associar à função dada.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Às vezes é desejável que se permita acesso a uma propriedade que retorna um valor computado dinamicamente, ou você pode querer refletir o status de uma variável interna sem requerer o uso de chamadas de método explícitas. Em Javascript, isso pode ser feito com o uso de um <em>getter</em>. Não é possível simultaneamente ter um getter associado a uma propriedade e a mesma possuir um valor, embora seja possível usar um getter e um setter em conjunto para criar algo como uma pseudo-propriedade.</p> + +<p>Note o seguinte quando for trabalhar com a sintaxe <em>get</em>:</p> + +<ul> + <li>Pode haver um identificador que seja um número ou uma string;</li> + <li>Deve haver exatamente zero parâmetros (veja <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 mais informações)</li> + <li>Não deve haver mais de um getter para a mesma propriedade nem uma propriedade comum como o mesmo nome do getter (<code>{ get x() { }, get x() { } }</code> and <code>{ x: ..., get x() { } }</code> são proibidos).</li> +</ul> + +<p>Um getter pode ser removido usando o operador <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/delete" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/delete_Operator">delete</a>.</code></p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Definindo_um_getter_em_novos_objetos_em_inicializadores_de_objetos">Definindo um getter em novos objetos em inicializadores de objetos</h3> + +<p>O exemplo abaixo irá criar a pseudo-propriedade <code>latest</code> para o objeto <code>obj</code>, que irá retornar o último item do array em <code>log</code>.</p> + +<pre class="brush: js notranslate">var log = ['test']; +var obj = { + get latest () { + if (log.length == 0) return undefined; + return log[log.length - 1] + } +} +console.log (obj.latest); // Retornará "test". +</pre> + +<p>Note que a tentativa de atribuir um valor a <code>latest não irá alterá-la.</code></p> + +<h3 id="Removendo_um_getter_usando_o_operador_delete">Removendo um getter usando o operador <code>delete</code></h3> + +<p>Se você quer remover um getter, você pode apenas utilizar <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/delete">delete</a>.</code></p> + +<pre class="brush: js notranslate">delete obj.latest; +</pre> + +<h3 id="Definindo_um_getter_em_objetos_existentes_usando_defineProperty">Definindo um getter em objetos existentes usando <code>defineProperty</code></h3> + +<p>Para adicionar um getter a um objeto existente a qualquer momento, use {{jsxref("Object.defineProperty()")}}.</p> + +<pre class="brush: js notranslate">var o = { a:0 } + +Object.defineProperty(o, "b", { get: function () { return this.a + 1; } }); + +console.log(o.b) // Executa o getter, que retornará a + 1 (which is 1)</pre> + +<h3 id="Usando_uma_propriedade_com_nome_computado">Usando uma propriedade com nome computado</h3> + +<div class="note"> +<p><strong>Nota:</strong> Propriedades com nome computado são uma tecnologia experimenta, parte da proposta do ECMAScript 6 e não é amplamente suportada pelos navegadores ainda. O exemplo abaixo irá disparar um <code>SyntaxError em ambientes sem suporte.</code></p> +</div> + +<pre class="brush: js notranslate">var expr = "foo"; + +var obj = { + get [expr]() { return "bar"; } +}; + +console.log(obj.foo); // "bar"</pre> + +<h3 id="Smart_self-overwriting_lazy_getters">Smart / self-overwriting / lazy getters</h3> + +<p>Getters lhe dão uma maneira de definir uma propriedade de um objeto, mas eles não calculam o valor da propriedade até que sejam acessados. Um getter adia o custo de cálculo do valor até que o valor seja necessário e, se nunca o for, você não precisa pagar esse custo.</p> + +<p>Uma técnica de otimização adicional para atrasar o cálculo do valor de uma propriedade e cacheá-lo para acesso futuro são os <strong>smart ou <a href="https://en.wikipedia.org/wiki/Memoization">memoized</a> getters</strong>. O valor é calculado na primeira vez que o getter é invocado, sendo então cacheado para que acessos subsequentes retornem o valor em cache sem recalculá-lo. Isso é util nas seguintes situações:</p> + +<ul> + <li>Se o cálculo da propriedade é caro (usa muita RAM ou CPU, cria um worker, retorna um arquivo remoto, etc).</li> + <li>Se o valor não é necessário agora. Ele será utilizado depois ou, em alguns casos, nem mesmo o será.</li> + <li>Se for utilizado, ele será acessado diversas vezes e não há necessidade de recalcular um valor que nunca será alterado, ou não deveria ser recalculado.</li> +</ul> + +<p>Isso significa que você não deveria utilizar um lazy getter para uma propriedade cujo valor você espera mudar, porque o getter nunca irá recalcular o valor.</p> + +<p>No exemplo a seguir, o objeto tem um getter como uma propriedade própria (own property). Ao tentar obter essa propriedade que foi removida, ela será readicionada, mas implicitamente como uma propriedade comum desta vez. Finalmente, o valor será retornado.</p> + +<pre class="brush: js notranslate">get notifier() { + delete this.notifier; + return this.notifier = document.getElementById("bookmarked-notification-anchor"); +},</pre> + +<p>Para o Firefox, veja também o código do módulo XPCOMUtils.jsm, que define a função <a href="/pt-BR/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a>.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Adicionado nomes de propriedades computadas.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_navegadores">Compatibilidade com 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>Suporte básico</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>Propriedades com nome computado</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>Suporte básico</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>Propriedades com nome computado</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="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</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> diff --git a/files/pt-br/web/javascript/reference/functions/index.html b/files/pt-br/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..41176388d1 --- /dev/null +++ b/files/pt-br/web/javascript/reference/functions/index.html @@ -0,0 +1,480 @@ +--- +title: Funções +slug: Web/JavaScript/Reference/Functions +tags: + - Funções + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>De modo geral, função é um "subprograma" que pode ser <em>chamado</em> por código externo (ou interno no caso de recursão) à função. Assim como o programa em si, uma função é composta por uma sequência de instruções chamada <em>corpo da função</em>. Valores podem ser <em>passados</em> para uma função e ela vai <em>retornar</em> um valor.</p> + +<p>Em JavaScript, funções são objetos de primeira classe, pois elas podem ter propriedades e métodos como qualquer outro objeto. O que as difere de outros objetos é que as funções podem ser chamados. Em resumo, elas são objetos <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>.</p> + +<p>Para mais exemplos e explicações, veja também o <a href="/en-US/docs/Web/JavaScript/Guide/Functions">Guia de JavaScript sobre funções</a>.</p> + +<h2 id="Descrição">Descrição</h2> + +<p>Toda função em JavaScript é um objeto <code>Function</code>. Veja {{jsxref("Function")}} para informação das propriedades e métodos dos objetos <code>Function</code>.</p> + +<p>Funções não são como procedimentos (<em>procedure</em>). Uma função sempre retorna um valor, mas um procedimento pode ou não retornar um valor.</p> + +<p>Para retornar um valor diferente do padrão, uma função deve ter uma instrução <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a> que específica o valor a ser retornado. Uma função sem um <code>return</code> retornará um valor padrão. No caso de um <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">método construtor</a> chamado com a palavra reservada <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a>, o valor padrão é o valor do parâmetro <code>this</code>. Para todas as outras funções, o valor padrão de retorno é <code>undefined</code>.</p> + +<p>Os parâmetros de uma função são chamados de argumentos da função. Argumentos são passados para a função <em>por valor</em>. Se uma função muda o valor de um argumento, esta mudança não é refletida globalmente ou na chamada da função. Contudo, referência de objetos são valores também, e eles são especiais: se a função muda as propriedades do objeto referenciado, estas mudanças são visíveis fora da função, como é mostrado no exemplo a seguir:</p> + +<pre class="brush: js notranslate">/* Declare a função 'minhaFunção' */ +function minhaFuncao(objeto) { + objeto.marca = "Toyota"; + } + + /* + * Declare a variável 'meucarro'; + * crie e inicialize um novo Objeto; + * atribua referência para 'meucarro' + */ + var meucarro = { + marca: "Honda", + modelo: "Accord", + ano: 1998 + }; + + /* Exibe 'Honda' */ + console.log(meucarro.marca); + + /* Passe a referência do objeto para a função */ + minhaFuncao(meucarro); + + /* + * Exibe 'Toyota' como valor para a propriedade 'marca' + * do objeto, mudado pela função. + */ + console.log(meucarro.marca); +</pre> + +<p>A palavra reservada <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> não se refere a função sendo executada no momento, então você deve referenciar um objeto <code>Function</code> pelo nome, mesmo dentro do corpo da função.</p> + +<h2 id="Definindo_funções">Definindo funções</h2> + +<p>Há várias maneiras de definir funções:</p> + +<h3 id="Declaração_de_função_Instrução_function">Declaração de função (Instrução <code>function</code>)</h3> + +<p>Há um sintaxe especial para declarar funções (veja <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/function">Instrução function</a> para detalhes):</p> + +<pre class="notranslate">function <em>nome</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>instruções</em> +} +</pre> + +<dl> + <dt><code>nome</code></dt> + <dd>O nome da função.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>O nome de um argumento a ser passado para a função. Uma função pode ter até 255 argumentos.</dd> +</dl> + +<dl> + <dt><code>instruções</code></dt> + <dd>As instruções que formam o corpo da função.</dd> +</dl> + +<h3 id="A_expressão_function_Operador_function">A expressão function (Operador <code>function</code>)</h3> + +<p>Uma expressão function é parecida com uma declaração function e tem até a mesma sintaxe (veja <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">Operador function</a> para detalhes):</p> + +<pre class="notranslate">function [<em>nome</em>]([<em>param</em>] [, <em>param</em>] [..., <em>param</em>]) { + <em>instruções</em> +} +</pre> + +<dl> + <dt><code>nome</code></dt> + <dd>O nome da função. Pode ser omitido, e neste caso a função é conhecida como função anônima.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>O nome de um argumento a ser passado para a função. Uma função pode ter até 255 argumentos.</dd> +</dl> + +<dl> + <dt><code>instruções</code></dt> + <dd>As instruções que formam o corpo da função.</dd> +</dl> + +<h3 id="O_gerador_de_declaração_de_função_instrução_function*">O gerador de declaração de função (instrução <code>function*</code>)</h3> + +<div class="note"> +<p><strong>Nota:</strong> Expressão Arrow function é uma tecnologia experimental, parte da proposta do ECMAScript 6, e ainda não é amplamente suportada pelos navegadores.</p> +</div> + +<p>Uma expressão arrow function tem uma sintaxe curta e conecta seu valor lexicamente (veja <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> para mais detalhes):</p> + +<pre class="notranslate">([param] [, param]) => { + instruções +} + +param => expressão +</pre> + +<dl> + <dt><code>param</code></dt> + <dd>O nome de um argumento. Quando não há argumentos deve ser indicado com o uso dos parênteses ( ). Para apenas um argumento os parênteses não são obrigatórios. (por exemplo <code>foo => 1</code>)</dd> + <dt><code>instruções ou expressão</code></dt> + <dd>Múltiplas instruções precisam ser envolvidas por chaves. Uma única expressão não requer chaves. A expressão também é implicitamente o valor de retorno dessa função.</dd> +</dl> + +<h3 id="The_Function_constructor" name="The_Function_constructor">O construtor <code>Function</code></h3> + +<div class="note"> +<p><strong>Nota:</strong> O uso do construtor Function para criar funções não é recomendado uma vez que é requerido o corpo da função como string, o que pode impedir algumas otimizações por parte do motor JS e pode também causar outros problemas.</p> +</div> + +<p>Como todos os outros objetos, objetos {{jsxref("Function")}} podem ser criados usando o operador new:</p> + +<pre class="notranslate">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>corpoDaFuncao</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Nenhum ou mais nomes para serem usados pela função como nomes formais de argumentos. Cada um deve ser uma string em conformidade com as regras para um identificador JavaScript válido ou uma lista com tais strings separadas por vírgula; por exemplo "x", "oValor", ou "a, b".</dd> +</dl> + +<dl> + <dt><em>corpoDaFuncao</em></dt> + <dd>Uma string contento as instruções JavaScript correspondendo a definição da função.</dd> +</dl> + +<p>Invocar o construtor Function como uma função (sem usar o operador new) the o mesmo efeito de invocá-lo como um construtor comum.</p> + +<h2 id="Parâmetros_de_Função">Parâmetros de Função</h2> + +<div class="note"> +<p><strong>Nota:</strong> Parâmetros Default e Rest são tecnologias experimentais, parte da proposta do ECMAScript 6, e ainda não são amplamente suportados pelos navegadores.</p> +</div> + +<h3 id="Parâmetros_Default">Parâmetros Default</h3> + +<p>Parâmetro Default de função permite que parâmetros formais sejam inicializados com valores padrão se nenhum valor ou valor undefined é passado. Para mais detalhes, veja <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">parâmetros default</a>.</p> + +<h3 id="Parâmetros_Rest">Parâmetros Rest</h3> + +<p>A sintaxe do parâmetro rest permite representar um número indefinido de argumentos em forma de array. Para mais detalhes, veja <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">parâmetros rest</a>.</p> + +<h2 id="The_arguments_object" name="The_arguments_object">O objeto <code>arguments</code></h2> + +<p>Você pode referenciar aos argumentos da função dentro da função utilizando o objeto arguments. Veja <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p> + +<ul> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: Um objeto array-like contendo os argumentos passados para a função atualmente em execução.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: A função atualmente em execução.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : A função que invocou a função atualmente em execução.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: O número de argumentos passados para a função.</li> +</ul> + +<h2 id="Definindo_Métodos_de_Funções">Definindo Métodos de Funções</h2> + +<h3 id="Funções_Getter_e_setter">Funções Getter e setter</h3> + +<p>Você pode definir getters (métodos de acesso) and setters (métodos de alteração) em qualquer objeto interno padrão ou objeto definido pelo usuário que ofereça suporte à adição de novas propriedades. A sintaxe para definir getters e setters usa a sintaxe literal do objeto.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt> + <dd> + <p>Vincula uma propriedade de objeto a uma função que será chamada quando essa propriedade é requisitada.</p> + </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt> + <dd>Vincula uma propriedade de objeto a uma função a ser chamada quando há uma tentativa de definir essa propriedade.</dd> +</dl> + +<h3 id="Sintaxe_dos_métodos_de_funções">Sintaxe dos métodos de funções</h3> + +<div class="note"> +<p><strong>Nota:</strong> Definições de métodos são tecnologias experimentais, parte da proposta do ECMAScript 6, e ainda não são amplamente suportados pelos navegadores.</p> +</div> + +<p>Começando com ECMAScript 6, você é capaz de definir métodos próprios em uma sintaxe mais curta, semelhante aos getters e setters. Veja <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> para mais informações.</p> + +<pre class="brush: js notranslate">var obj = { + foo() {}, + bar() {} +};</pre> + +<h2 id="Function_constructor_vs._function_declaration_vs._function_expression" name="Function_constructor_vs._function_declaration_vs._function_expression"><code>Function</code> constructor vs. function declaration vs. function expression</h2> + +<p>Compare o seguinte:</p> + +<p>Uma função definida com <em><code>function</code> constructor</em> atribuiída à variável multiply</p> + +<pre class="brush: js notranslate">function multiply(x, y) { + return x * y; +} +</pre> + +<p><code>Uma </code><em>function expression</em><code> de uma função anônima atribuída à variável multiplicar</code></p> + +<pre class="brush: js notranslate">var multiply = function(x, y) { + return x * y; +}; +</pre> + +<p><code>Uma </code><em>function expression </em><code>de uma função chamada func_name atribuída à variável multiplicar</code></p> + +<pre class="brush: js notranslate">var multiply = function func_name(x, y) { + return x * y; +}; +</pre> + +<h3 id="Diferenças">Diferenças</h3> + +<p>Todas fazem aproximadamente a mesma coisa, com algumas diferenças sutis:</p> + +<p>Há uma distinção entre o nome da função e a variável à qual a função é atribuída. O nome da função não pode ser alterado, enquanto a variável à qual a função está atribuída pode ser reatribuída. O nome da função pode ser usado somente dentro do corpo da função. A tentativa de usá-lo fora do corpo da função resulta em um <em>error </em>(ou <em>undefined </em>se o nome da função foi declarado anteriormente por meio de uma declaração de variável). Por exemplo:</p> + +<pre class="brush: js notranslate">var y = function x() {}; +alert(x); // throws an error +</pre> + +<p>O nome da função também aparece quando a função é serializada através do <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>método toString de Function()</code></a>.</p> + +<p>Por outro lado, a variável à qual a função é atribuída é limitada somente pelo seu escopo, garantindo-se que ele inclui o escopo onde a função é declarada.</p> + +<p>Como o quarto exemplo mostra, o nome da função pode ser diferente da variável à qual a função é atribuída. Eles não têm relação um com o outro. Uma declaração de função também cria uma variável com o mesmo nome da função. Assim, ao contrário daquelas definidas por expressões de função, funções definidas por declarações de função podem ser acessadas pelo seu nome no escopo onde elas foram definidas:</p> + +<p>Uma função definida por '<code>new Function'</code> não possui um nome. Entretanto, na máquina de JavaScript<a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, a forma serializada da função aparece como se ela tivesse o nome "anonymous". Por exemplo, <code>alert(new Function())</code> gera como saída:</p> + +<pre class="brush: js notranslate">function anonymous() { +} +</pre> + +<p>Já que a função na realidade não possui um nome, <code>anonymous</code> não é uma variável que possa ser acessada dentro da função. Por exemplo, o código seguinte iria resultar em um erro:</p> + +<pre class="brush: js notranslate">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + +<p>Ao contrário das funções definidas por expressões de função ou pelo construtor <code>Function</code>, uma função definida por uma declaração de função pode ser usada antes da declaração da função em si. Por exemplo:</p> + +<pre class="brush: js notranslate">foo(); // alerts FOO! +function foo() { + alert('FOO!'); +} +</pre> + +<p>Uma função definida por uma expressão de função herda o escopo atual. Isto é, a função forma um closure. Por outro lado, uma função definida por um construtor<code>Function</code> não herda qualquer escopo a não ser o escopo global (que todas as funções herdam).</p> + +<p>Funções definidas por expressões de função e declarações de função são analisadas somente uma vez, enquanto aquelas definidas pelo construtor<code>Function</code> não são. Isto é, a string que forma o corpo da função, passada para o construtor<code>Function</code> precisa ser analisada toda vez que o construtor é chamado. Embora uma expressão de função crie um closure a cada vez, o corpo da função não é reanalisado, assim expressões de função ainda são mais rápidas do que "<code>new Function(...)</code>". Assim, o construtor<code>Function</code> deve geralmente ser evitado sempre que possível.</p> + +<p>Deve ser notado, entretanto, que expressões de função e declarações de função aninhadas dentro de uma função gerada pela análise da string de um construtor<code>Function</code> não são analisadas repetidamente. Por exemplo:</p> + +<pre class="brush: js notranslate">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))(); +foo(); // O segmento "function() {\n\talert(bar);\n}" do corpo da função não é reanalisado.</pre> + +<p>Uma declaração de função é muito facilmente (e às vezes de forma não intencional) transformada em uma expressão de função. Uma declaração de função deixa de ser o que ela é nos casos em que:</p> + +<ul> + <li>se torna parte de uma expressão; ou</li> + <li>não é mais um "elemento fonte" de uma função ou do script em si. Um "elemento fonte" é uma instrução não aninhada no script ou no corpo de uma função:</li> +</ul> + +<pre class="brush: js notranslate">var x = 0; // elemento fonte +if (x == 0) { // elemento fonte + x = 10; // não é um elemento fonte + function boo() {} // não é um elemento fonte +} +function foo() { // elemento fonte + var y = 20; // elemento fonte + function bar() {} // elemento fonte + while (y == 10) { // elemento fonte + function blah() {} // não é um elemento fonte + y++; // não é um elemento fonte + } +} +</pre> + +<h3 id="Examples_2">Examples</h3> + +<pre class="brush: js notranslate">// declaração de função +function foo() {} + +// expressão de função +(function bar() {}) + +// expressão de função +x = function hello() {} + + +if (x) { + // expressão de função + function world() {} +} + + +// declaração de função +function a() { + // declaração de função + function b() {} + if (0) { + // expressão de função + function c() {} + } +} +</pre> + +<h2 id="Conditionally_defining_a_function" name="Conditionally_defining_a_function">Definindo uma função condicionalmente</h2> + +<p>As funções podem ser definidas condicionalmente usando instruções de função (uma extensão permitida para o padrão ECMA-262 Edição 3) ou o construtor 'Function'. Observe que essas instruções de funções não são mais permitidas no ES5 strinct. Além disso, esse recurso não funciona de forma consistente em navegadores, portanto, você não deve confiar nele.</p> + +<p>No script a seguir, a função 'zero' nunca é definida e não pode ser chamada, porque 'if (0)' avalia sua condição como falso:</p> + +<pre class="brush: js notranslate">if (0) { + function zero() { + document.writeln("Isso é zero."); + } +} +</pre> + +<p>If the script is changed so that the condition becomes '<code>if (1)</code>', function <code>zero</code> is defined.</p> + +<p>Note: Although this kind of function looks like a function declaration, it is actually an expression (or statement), since it is nested within another statement. See differences between function declarations and function expressions.</p> + +<p>Note: Some JavaScript engines, not including <a href="/en-US/docs/SpiderMonkey">SpiderMonkey</a>, incorrectly treat any function expression with a name as a function definition. This would lead to <code>zero</code> being defined, even with the always-false <code>if</code> condition. A safer way to define functions conditionally is to define the function anonymously and assign it to a variable:</p> + +<pre class="brush: js notranslate">if (0) { + var zero = function() { + document.writeln("Aqui tem zero."); + } +} +</pre> + +<h2 id="Examples" name="Examples">Exemplo</h2> + +<h3 id="Example_Returning_a_formatted_number" name="Example:_Returning_a_formatted_number">Exemplo: Retornando um número formatado</h3> + +<p>A função a seguir retorna uma sequência contendo a representação formatada de um número preenchido com zeros à esquerda.</p> + +<pre class="brush: js notranslate">// Esta função retorna uma string preenchida com zeros à esquerda +function padZeros(num, totalLen) { + var numStr = num.toString(); // Inicializar valor de retorno como string + var numZeros = totalLen - numStr.length; // Calcular números de zeros + for (var i = 1; i <= numZeros; i++) { // Preencher a quantidade de zeros + numStr = "0" + numStr; + } + return numStr; // Retorna a string já preenchida +} +</pre> + +<p>The following statements call the padZeros function.</p> + +<pre class="brush: js notranslate">var resultado; +resultado = padZeros(42,4); // retorno "0042" +resultado = padZeros(42,2); // retorno "42" +resultado = padZeros(5,4); // retorno "0005" +</pre> + +<h3 id="Example_Determining_whether_a_function_exists" name="Example:_Determining_whether_a_function_exists">Example: Determining whether a function exists</h3> + +<p>You can determine whether a function exists by using the <code>typeof</code> operator. In the following example, a test is peformed to determine if the <code>window</code> object has a property called <code>noFunc</code> that is a function. If so, it is used; otherwise some other action is taken.</p> + +<pre class="brush: js notranslate"> if ('function' == typeof window.noFunc) { + // use noFunc() + } else { + // do something else + } +</pre> + +<p>Note that in the <code>if</code> test, a reference to <code>noFunc</code> is used—there are no brackets "()" after the function name so the actual function is not called.</p> + +<h2 id="Especificações">Especificaçõ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>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Arrow functions, Generator functions, default parameters, rest parameters</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a></li> + <li><a href="/en-US/docs/JavaScript/Reference/Statements/function"><code>function</code> statement</a></li> + <li><a href="/en-US/docs/JavaScript/Reference/Operators/function"><code>function</code> operator</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/functions/parametros_predefinidos/index.html b/files/pt-br/web/javascript/reference/functions/parametros_predefinidos/index.html new file mode 100644 index 0000000000..82dc54abd8 --- /dev/null +++ b/files/pt-br/web/javascript/reference/functions/parametros_predefinidos/index.html @@ -0,0 +1,210 @@ +--- +title: Parâmetros Predefinidos +slug: Web/JavaScript/Reference/Functions/Parametros_Predefinidos +tags: + - ECMA2015 + - ECMAScript6 + - Function + - Functions + - Função + - Funções + - JavaScript +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><strong>Os parâmetros predefinidos de uma função</strong> permitem que parâmetros regulares sejam inicializados com com valores iniciais caso <code>undefined</code> ou nenhum valor seja passado.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">function [nome]([<em>param1</em>[ = valorPredefinido1 ][, ..., <em>paramN</em>[ = valorPredefinidoN ]]]) { + instruções +} +</pre> + +<h2 id="Descrição">Descrição</h2> + +<p>Em JavaScript, os parâmetros de funções tem <code>{{jsxref("undefined")}}</code> como valor predefinido. Contudo, em alguns casos pode ser útil utilizar algum outro valor. É nesta situação em que os parâmetros predefinidos podem ser úteis.</p> + +<p>No passado, a estratégia de definir valores padrão para parâmetros era testar os valores do parâmetros no corpo da função e atribuir um valor se este for <strong><code>undefined</code>. </strong>No exemplo a seguir, se nenhum valor for fornecido para <strong>b </strong>na chamada, este valor será <code><strong>undefined</strong></code>, quando <code>a*b</code> for calculado resultaria em <code>NaN</code>. No entanto, isto é capturado na segunda linha definindo um valor padrão para b:</p> + +<pre class="brush: js notranslate">function multiply(a, b) { + b = (typeof b !== 'undefined') ? b : 1; + + return a * b; +} + +multiply(5, 2); // 10 +multiply(5, 1); // 5 +multiply(5); // 5 +</pre> + +<p>Com o parâmetros predefinidos a checagem no corpo da função nao é mais necessária. Agora você pode simplesmente colocar 1 como valor padrão para <code>b</code> na declaração da função:</p> + +<pre class="brush: js notranslate">function multiply(a, b = 1) { + return a * b; +} + +multiply(5, 2); // 10 +multiply(5, 1); // 5 +multiply(5); // 5</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Passando_undefined_vs._outros_valores_falsy">Passando <code>undefined</code> vs. outros valores "falsy"</h3> + +<p>Na segunda chamada aqui, mesmo se o segundo argumento é definido explicitamente como <code>undefined</code> (com exceção de <code>null</code>) quando chamado, o valor para o argumento <code>num</code> será o padrão.</p> + +<pre class="notranslate"><code>function test(num = 1) { + console.log(typeof num); +} + +test(); // 'number' (num é definido para 1) +test(undefined); // 'number' (num é definido para 1 também) + +// teste com outros values "falsy": +test(''); // 'string' (num é definido para '') +test(null); // 'object' (num é definido para null)</code></pre> + +<h3 id="Avaliado_em_tempo_de_chamada">Avaliado em tempo de chamada</h3> + +<p>Os parâmetros predefinidos são avaliados no momento da chamada da função, então diferente de ex.: Python, um novo objeto é criado cada vez que a funçao é chamada.</p> + +<pre class="brush: js notranslate">function append(value, array = []) { + array.push(value); + return array; +} + +append(1); //[1] +append(2); //[2], not [1, 2] + +</pre> + +<p>Este mesmo comportamento é aplicado para funções e variáveis:</p> + +<pre class="brush: js notranslate">function callSomething(thing = something()) { return thing } + +function something(){ + return "sth"; +} + +callSomething(); //sth</pre> + +<h3 id="Parâmetros_predefinidos_estão_disponíveis_para_os_parâmetros_seguintes_à_sua_definição">Parâmetros predefinidos estão disponíveis para os parâmetros seguintes à sua definição</h3> + +<p>Parâmetros que já foram avaliados ficam disponíveis para uso para os parâmetros seguintes:</p> + +<pre class="brush: js notranslate">function singularAutoPlural(singular, plural = singular+"s", + rallyingCry = plural + " ATTACK!!!") { + return [singular, plural, rallyingCry ]; +} + +//["Gecko","Geckos", "Geckos ATTACK!!!"] +singularAutoPlural("Gecko"); + +//["Fox","Foxes", "Foxes ATTACK!!!"] +singularAutoPlural("Fox","Foxes"); + +//["Deer", "Deer", "Deer ... change."] +singularAutoPlural("Deer", "Deer", "Deer peaceably and respectfully + petition the government for positive change.") +</pre> + +<p>Esta funcionalidade torna-se uma maneira direta e demonstra quantos casos extremos são manipulados.</p> + +<pre class="brush: js notranslate">function go() { + return ":P" +} + +function withDefaults(a, b = 5, c = b, d = go(), e = this, + f = arguments, g = this.value) { + return [a,b,c,d,e,f,g]; +} +function withoutDefaults(a, b, c, d, e, f, g){ + switch(arguments.length){ + case 0: + a + case 1: + b = 5 + case 2: + c = b + case 3: + d = go(); + case 4: + e = this + case 5: + f = arguments + case 6: + g = this.value; + default: + } + return [a,b,c,d,e,f,g]; +} + +withDefaults.call({value:"=^_^="}); +// [undefined, 5, 5, ":P", window, arguments, "=^_^="] + + +withoutDefaults.call({value:"=^_^="}); +// [undefined, 5, 5, ":P", window, arguments, "=^_^="] +</pre> + +<h3 id="Funções_definidadas_dentro_do_corpo_da_função">Funções definidadas dentro do corpo da função</h3> + +<p>Introduzido no Gecko 33 {{geckoRelease(33)}}. Funções declaradas no corpo da função não podem ser referenciada dentro de parâmetos padrão e lançará um {{jsxref("ReferenceError")}} (atualmente um {{jsxref("TypeError")}} no SpiderMonkey, veja {{bug(1022967)}}). Parâmetros padrão são sempre executados primeiro, declarações de funções dentro do corpo de outra função são avaliadas depois.</p> + +<pre class="brush: js notranslate">// Não funciona! Throws ReferenceError. +function f(a = go()) { + function go(){return ":P"} +} +</pre> + +<h3 id="Parâmetros_sem_valor_padrão_depois_de_parâmetros_com_valores_padrão">Parâmetros sem valor padrão depois de parâmetros com valores padrão</h3> + +<p>Antes do Gecko 26 {{geckoRelease(26)}}, o seguinte código resultaria em um {{jsxref("SyntaxError")}}. Isto foi corrigido no {{bug(777060)}} e funciona como esperado em versões posteriores:</p> + +<pre class="brush: js notranslate">function f(x=1, y) { + return [x, y]; +} + +f(); // [1, undefined] +</pre> + +<h3 id="Parâmetro_desestruturado_com_valores_padrões">Parâmetro desestruturado com valores padrões</h3> + +<p>É possível definir valores padrões com a notação <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructuring assignment</a>:</p> + +<pre class="brush: js notranslate">function f([x, y] = [1, 2], {z: z} = {z: 3}) { + return x + y + z; +} + +f(); // 6</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definição Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_nos_navegadores">Compatibilidade nos navegadores</h2> + +<div> +<p>{{Compat("javascript.functions.default_parameters")}}</p> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external" title="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">Original proposal at ecmascript.org</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/functions/rest_parameters/index.html b/files/pt-br/web/javascript/reference/functions/rest_parameters/index.html new file mode 100644 index 0000000000..6bbcdacb8e --- /dev/null +++ b/files/pt-br/web/javascript/reference/functions/rest_parameters/index.html @@ -0,0 +1,178 @@ +--- +title: Parâmetros Rest +slug: Web/JavaScript/Reference/Functions/rest_parameters +translation_of: Web/JavaScript/Reference/Functions/rest_parameters +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>A sintaxe de <strong>rest parameter (parâmetros rest)</strong> nos permite representar um número indefinido de argumentos como um array.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: js">function(a, b, ...theArgs) { + // ... +} +</pre> + +<h2 id="Descrição">Descrição</h2> + +<p>Se o último argumento nomeado de uma função tiver prefixo com <code>...</code>, ele irá se tornar um array em que os elemento de 0 (inclusive) até theArgs.length (exclusivo) são disponibilizados pelos argumentos atuais passados à função.</p> + +<p>No exemplo acima, <code>theArgs</code> irá coletar o terceiro argumento da função (porquê o primeiro é mapeado para <code>a</code>, e o segundo para <code>b</code>) e assim por diante em todos os argumentos consecutivos.</p> + +<h3 id="Diferença_entre_rest_parameters_e_arguments_object">Diferença entre <em>rest parameters</em> e <em><code>arguments</code> object</em></h3> + +<p>Há três diferenças principais entre <em>rest parameters</em> e os <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments"><code>arguments</code></a> objects:</p> + +<ul> + <li><em>rest parameters</em> são os únicos que não foram atribuidos a um nome separado, enquanto os <code>arguments</code> object contêm todos os argumentos passados para a função;</li> + <li>o objeto <code>arguments</code> não é um array, enquanto rest parameters são instâncias <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a>, isso significa que métodos como <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" title="Array sort method"><code>sort</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="Array map method"><code>map</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="Array forEach method"><code>forEach</code></a> ou <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method"><code>pop</code></a> podem ser aplicados diretamente;</li> + <li> o objeto <code>arguments</code> possui a funcionalidade adicional de especificar ele mesmo (como a propriedade <code>callee</code>). </li> +</ul> + +<h3 id="De_arguments_para_array">De arguments para array</h3> + +<p>Rest parameters foram criados para reduzir o <span id="result_box" lang="pt"><span>código padrão</span> <span>que</span> <span>foi induzida</span> <span>pelos argumentos</span></span></p> + +<pre class="brush: js">// Antes rest parameters, o seguinte codigo pode ser encontrado +function f(a, b){ + var args = Array.prototype.slice.call(arguments, f.length); + + // ... +} + +// esse é o equivalente + +function(a, b, ...args) { + +} +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Como <code>theArgs</code> é um array, você pode pegar número de elementos usando a propriedade <code>length</code>:</p> + +<pre class="brush: js">function fun1(...theArgs) { + console.log(theArgs.length); +} + +fun1(); // 0 +fun1(5); // 1 +fun1(5, 6, 7); // 3 +</pre> + +<p>No próximo exemplo, nós usamos o rest parâmetro para buscar argumentos do segundo parâmetro para o fim. Nós multiplicamos eles pelo primeiro parâmetro:</p> + +<pre class="brush: js">function multiply(multiplier, ...theArgs) { + return theArgs.map(function (element) { + return multiplier * element; + }); +} + +var arr = multiply(2, 1, 2, 3); +console.log(arr); // [2, 4, 6] +</pre> + +<p>O próximo exemplo mostra como você pode usar metodos do Array em rest params, mas não no objeto <code>arguments</code>:</p> + +<pre class="brush: js">function sortRestArgs(...theArgs) { + var sortedArgs = theArgs.sort(); + return sortedArgs; +} + +console.log(sortRestArgs(5,3,7,1)); // Exibe 1,3,5,7 + +function sortArguments() { + var sortedArgs = arguments.sort(); + return sortedArgs; // isso nunca irá ocorrer +} + +// throws a TypeError: arguments.sort is not a function +console.log(sortArguments(5,3,7,1)); +</pre> + +<p>a fim de usar o objeto <code>arguments</code>, você precisará converte-lo para um array antes.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade">Compatibilidade</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(47)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("15.0")}}</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>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(45)}}</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(47)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">Arguments object</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">Functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="spread operator">Spread Operator</a></li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Original proposal at ecmascript.org</a></li> + <li><a class="external" href="http://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/functions/set/index.html b/files/pt-br/web/javascript/reference/functions/set/index.html new file mode 100644 index 0000000000..0862565bee --- /dev/null +++ b/files/pt-br/web/javascript/reference/functions/set/index.html @@ -0,0 +1,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> |