aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/javascript/reference/global_objects/function/name/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/pt-br/web/javascript/reference/global_objects/function/name/index.html')
-rw-r--r--files/pt-br/web/javascript/reference/global_objects/function/name/index.html222
1 files changed, 222 insertions, 0 deletions
diff --git a/files/pt-br/web/javascript/reference/global_objects/function/name/index.html b/files/pt-br/web/javascript/reference/global_objects/function/name/index.html
new file mode 100644
index 0000000000..2ee74e0779
--- /dev/null
+++ b/files/pt-br/web/javascript/reference/global_objects/function/name/index.html
@@ -0,0 +1,222 @@
+---
+title: Function.name
+slug: Web/JavaScript/Reference/Global_Objects/Function/name
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/name
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">A propriedade somente-leitura <code><strong>name</strong></code> de um objeto {{jsxref("Function")}} indica o nome da função como especificado quando esta foi criada, ou <code>"anonymous"</code> para funções criadas anonimamente.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/function-name.html")}}</div>
+
+<p class="hidden">O código-fonte deste exemplo interativo está mantido em um repositório do GitHub. Se você gostaria de contribuir com o projeto de exemplos interativos, clone por favor <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie um <em>pull request</em>.</p>
+
+<div>{{js_property_attributes(0,0,1)}}<br>
+ </div>
+
+<div class="note">
+<p>Note que em implementações não-standard anteriores à ES2015 o atributo <code>configurable</code> tinha também o valor <code>false</code>.</p>
+</div>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Nome_de_declaração_da_função">Nome de declaração da função</h3>
+
+<p>A propriedade <code>name</code> retorna o nome de uma declaração de função.</p>
+
+<pre class="brush: js">function doSomething() {}
+doSomething.name; // "doSomething"
+</pre>
+
+<h3 id="Nome_do_construtor_da_função">Nome do construtor da função</h3>
+
+<p>Funções criadas com a sintaxe <code>new Function(...)</code> ou somente <code>Function(...)</code> criam objetos {{jsxref("Function")}} com o nome "anonymous".</p>
+
+<pre>(new Function).name; // "anonymous"</pre>
+
+<h3 id="Nomes_de_função_inferidos">Nomes de função inferidos</h3>
+
+<p>Variáveis e métodos podem inferir o nome de uma função anônima a partir de sua posição sintática (novo na ECMAScript 2015).</p>
+
+<pre class="brush: js">var f = function() {};
+var object = {
+ someMethod: function() {}
+};
+
+console.log(f.name); // "f"
+console.log(object.someMethod.name); // "someMethod"
+</pre>
+
+<p>Você pode definir uma função com um nome numa {{jsxref("Operators/Function", "expressão de função", "", 1)}}:</p>
+
+<pre class="brush: js">var object = {
+ someMethod: function object_someMethod() {}
+};
+console.log(object.someMethod.name); // grava o log "object_someMethod"
+
+try { object_someMethod } catch(e) { console.log(e); }
+// ReferenceError: object_someMethod is not defined
+</pre>
+
+<p>Você não pode mudar o nome de uma função, pois a propriedade é somente-leitura:</p>
+
+<div class="hidden">
+<p>O exemplo abaixo contradiz o que é dito no começo desta seção e não funciona como descrito.</p>
+</div>
+
+<pre class="brush: js">var object = {
+ // anonymous
+ someMethod: function() {}
+};
+
+object.someMethod.name = 'otherMethod';
+console.log(object.someMethod.name); // someMethod
+</pre>
+
+<p>Para mudá-lo, você poderia no entanto usar {{jsxref("Object.defineProperty()")}}.</p>
+
+<h3 id="Nomes_curtos_de_métodos">Nomes curtos de métodos</h3>
+
+<pre class="brush: js">var o = {
+ foo(){}
+};
+o.foo.name; // "foo";</pre>
+
+<h3 id="Nomes_de_funções_vinculadas">Nomes de funções vinculadas</h3>
+
+<p>{{jsxref("Function.bind()")}} produz uma função cujo nome é "bound " seguido do nome da função.</p>
+
+<pre class="brush: js">function foo() {};
+foo.bind({}).name; // "bound foo"
+</pre>
+
+<h3 id="Nomes_de_função_para_getters_e_setters">Nomes de função para <em>getters</em> e <em>setters</em></h3>
+
+<p>Ao usar propriedades acessórias <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></code> e <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></code>, "get" ou "set" aparecerão no nome da função.</p>
+
+<pre class="brush: js">var o = {
+ get foo(){},
+ set foo(x){}
+};
+
+var descriptor = Object.getOwnPropertyDescriptor(o, "foo");
+descriptor.get.name; // "get foo"
+descriptor.set.name; // "set foo";</pre>
+
+<h3 id="Nomes_de_funções_em_classes">Nomes de funções em classes</h3>
+
+<p>Você pode usar <code>obj.constructor.name</code> para checar a "classe" de um objeto (porém leia com atenção os avisos abaixo):</p>
+
+<pre class="brush: js">function Foo() {} // Sintaxe ES2015: class Foo {}
+
+var fooInstance = new Foo();
+console.log(fooInstance.constructor.name); // grava o log "Foo"
+</pre>
+
+<div class="warning">
+<p><strong>Aviso:</strong> O interpretador vai definir a propriedade  interna <code>Function.name</code> somente se uma função não tiver uma propriedade já com o nome <em>name</em> (veja a seção <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-setfunctionname">9.2.11 da ECMAScript2015 Language Specification</a>). Porém, a ES2015 especifica que a palavra-chave <em>static</em> de maneira que métodos estáticos serão definidos como OwnProperty da função construtora de classe (ECMAScript2015, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-runtime-semantics-classdefinitionevaluation">14.5.14.21.b</a> + <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-object-initializer-runtime-semantics-propertydefinitionevaluation">12.2.6.9</a>).</p>
+</div>
+
+<p>Portanto não podemos obter o nome de virtualmente qualquer classe com um método estático <code>name()</code>:</p>
+
+<pre class="brush: js">class Foo {
+ constructor() {}
+ static name() {}
+}
+</pre>
+
+<p>Com um método <code>static name()</code>, <code>Foo.name</code> não guarda mais o nome verdadeiro da classe mas uma referência ao objeto de função <code>name()</code>. A definição de classe acima, escrita em sintaxe ES2015, se comportará de maneira similar ao seguinte trecho de código em sintaxe ES5 no Chrome ou no Firefox:</p>
+
+<pre class="brush: js">function Foo() {}
+Object.defineProperty(Foo, 'name', { writable: true });
+Foo.name = function() {};
+</pre>
+
+<p>Tentar obter a classe de <code>fooInstance</code> via <code>fooInstance.constructor.name</code> não nos dará de maneira alguma o nome da classe, mas sim uma referência ao método estático da classe. Exemplo:</p>
+
+<pre class="brush: js">var fooInstance = new Foo();
+console.log(fooInstance.constructor.name); // grava o name() da função no log
+</pre>
+
+<p>Você pode ver também, a partir do exemplo de sintaxe ES5, que, no Chrome ou no Firefox, a nossa definição estática de <code>Foo.name</code> se torna <em>writable</em>. A predefinição interna na ausência de uma definição estática customizada é somente-leitura:</p>
+
+<pre class="brush: js">Foo.name = 'Hello';
+console.log(Foo.name); // logs "Hello" if class Foo has a static name() property but "Foo" if not.
+</pre>
+
+<p>Portanto, você não pode assumir que a propriedade interna <code>Function.name</code> sempre guardará um nome de classe..</p>
+
+<h3 id="Símbolos_como_nome_de_função">Símbolos como nome de função</h3>
+
+<p>Se um {{jsxref("Symbol")}} é usado como nome de função e o símbolo tem uma descrição, o nome do método será a descrição entre colchetes.</p>
+
+<pre>var sym1 = Symbol("foo");
+var sym2 = Symbol();
+var o = {
+ [sym1]: function(){},
+ [sym2]: function(){}
+};
+
+o[sym1].name; // "[foo]"
+o[sym2].name; // ""</pre>
+
+<h2 id="Compressores_e_minificadores_JavaScript">Compressores e minificadores JavaScript</h2>
+
+<div class="warning">
+<p><strong>Aviso:</strong> Tenha cuidado ao usar <code>Function.name</code> e transformações de código-fonte, como aquelas executadas por compressores (minificadores) ou obfuscadores de JavaScript. Estas ferramentas são comumente usadas como parte de processos de <em>build  </em>de JavaScript para reduzir os tamanhos de programas antes da implementação em produção. Tais transformações frequentemente mudam nomes de função durante o <em>build</em>.</p>
+</div>
+
+<p>Código fonte do tipo:</p>
+
+<pre class="brush: js">function Foo() {};
+var foo = new Foo();
+
+if (foo.constructor.name === 'Foo') {
+ console.log("'foo' is an instance of 'Foo'");
+} else {
+ console.log('Oops!');
+}
+</pre>
+
+<p>pode ser comprimido e se tornar:</p>
+
+<pre class="brush: js">function a() {};
+var b = new a();
+if (b.constructor.name === 'Foo') {
+ console.log("'foo' is an instance of 'Foo'");
+} else {
+ console.log('Oops!');
+}
+</pre>
+
+<p>Na versão descomprimida, o programa cai no bloco-verdade e grava o log <em>'foo' is an instance of 'Foo'</em>. Todavia, na versão comprimida ele se comporta diferentemente, e cai no bloco <code>else</code>. Se você depende de <code>Function.name</code>, como no exemplo acima, tenha certeza que seu processo de <em>build</em> não mude nomes de função, ou então não assuma que uma função terá um nome determinado.</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>{{SpecName('ES2015', '#sec-name', 'name')}}</td>
+ <td>{{Spec2('ES2015')}}</td>
+ <td>Definição inicial.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-function-instances-name', 'name')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<div>
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você gostaria de contribuir com os dados, confira por favor <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie uma <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Function.name")}}</p>
+</div>