aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/javascript/reference/operators/object_initializer
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:49:58 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:49:58 +0100
commit68fc8e96a9629e73469ed457abd955e548ec670c (patch)
tree8529ab9fe63d011f23c7f22ab5a4a1c5563fcaa4 /files/pt-br/web/javascript/reference/operators/object_initializer
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-68fc8e96a9629e73469ed457abd955e548ec670c.tar.gz
translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.tar.bz2
translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.zip
unslug pt-br: move
Diffstat (limited to 'files/pt-br/web/javascript/reference/operators/object_initializer')
-rw-r--r--files/pt-br/web/javascript/reference/operators/object_initializer/index.html392
1 files changed, 392 insertions, 0 deletions
diff --git a/files/pt-br/web/javascript/reference/operators/object_initializer/index.html b/files/pt-br/web/javascript/reference/operators/object_initializer/index.html
new file mode 100644
index 0000000000..ac59b4e7f8
--- /dev/null
+++ b/files/pt-br/web/javascript/reference/operators/object_initializer/index.html
@@ -0,0 +1,392 @@
+---
+title: Inicializador de Objeto
+slug: Web/JavaScript/Reference/Operators/Inicializador_Objeto
+tags:
+ - ECMAScript 2015
+ - JSON
+ - JavaScript
+ - Literal
+ - Métodos
+ - Objeto
+ - Propriedades
+ - mutação
+translation_of: Web/JavaScript/Reference/Operators/Object_initializer
+---
+<div>{{JsSidebar("Operadores")}}</div>
+
+<p>Objetos podem ser inicializados utilizando <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>new Object()</code></a>,<code> <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code>, ou a notação <em>literal</em>. Um inicializador de objetos é uma lista de zero ou mais pares de <em>propriedade: valor</em>, separados por vírgula e fechado por um par de chaves (<code>{}</code>).</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush: js">var o = {};
+var o = { a: "foo", b: 42, c: {} };
+
+var a = "foo", b = 42, c = {};
+var o = { a: a, b: b, c: c };
+
+var o = {
+ <var>propriedade: function </var>([<var>parâmetros</var>]) {},
+ get <var>propriedade</var>() {},
+ set <var>propriedade</var>(<var>valor</var>) {},
+};
+</pre>
+
+<h3 id="Novas_notações_em_ECMAScript_2015">Novas notações em ECMAScript 2015</h3>
+
+<p>Por favor, verifique o suporte das anotações na tabela de compatibilidade. Em ambientes que não dão suporte às anotações, ocorrerá erros de sintaxe.</p>
+
+<pre class="brush: js">// // Abreviação em nomes de propriedades (ES2015)
+var a = "foo", b = 42, c = {};
+var o = { a, b, c };
+
+// // Abreviação em nomes de métodos (ES2015)
+var o = {
+ <var>property</var>([<var>parameters</var>]) {},
+ get <var>property</var>() {},
+ set <var>property</var>(<var>value</var>) {},
+};
+
+// Nomes de propriedades computados (ES2015)
+var prop = "foo";
+var o = {
+ [prop]: "hey",
+ ["b" + "ar"]: "there",
+};</pre>
+
+<h2 id="Descrição">Descrição</h2>
+
+<p>Um inicializador de objetos é uma expressão que descreve a inicialização de um {{jsxref("Object")}}. Objects consiste de <em>propriedades</em>, as quais descrevem um objeto. Os valores das propriedades de um objeto podem ser tipos de dados {{Glossary("primitivos")}} ou outros objetos .</p>
+
+<h3 id="Criando_objetos">Criando objetos</h3>
+
+<p>Um objeto vazio, sem propriedades, pode ser criado como: </p>
+
+<pre class="brush: js">var object = {};</pre>
+
+<p>Contudo, a vantagem em utilizar a notação <em>literal </em>ou o <em>inicializador</em> é a possibilidade de rapidamente criar objetos com propriedades dentro de chaves (<code>{}</code>). Você simplesmente cria uma lista de pares <em>chave: valor</em>, separados por vírgula. O código abaixo cria um objeto com três propriedades, sendo as chaves "foo", "age" e "baz", com seus respectivos valores, tipo string de valor "bar", tipo number de valor 42 e, por último, um outro objeto com seus respectivos pares de <em>chave: valor</em>. </p>
+
+<pre class="brush: js">var object = {
+ foo: "bar",
+ age: 42,
+ baz: { myProp: 12 },
+}</pre>
+
+<h3 id="Acessando_propriedades">Acessando propriedades</h3>
+
+<p>Uma vez que você criou um objeto, é interessante que possa ler ou alterá-lo. As propriedades de um objeto podem ser acessadas utilizando a notação de ponto ou colchetes. Veja <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Property_Accessors">assessores de propriedade</a> para mais informações.</p>
+
+<pre class="brush: js">object.foo; // "bar"
+object["age"]; // 42
+
+object.foo = "baz";
+</pre>
+
+<h3 id="Definições_de_propriedade">Definições de propriedade</h3>
+
+<p>Nós temos aprendido como descrever propriedades utilizando a sintaxe <em>inicializador</em>. No entanto, às vezes, há variáveis que queremos inserir em nosso objeto. Então teremos um código parecido como abaixo: </p>
+
+<pre class="brush: js">var a = "foo",
+ b = 42,
+ c = {};
+
+var o = {
+ a: a,
+ b: b,
+ c: c
+};</pre>
+
+<p>Com ECMAScript 2015, há uma notação mais curta que possibilita atingir o mesmo resultado: </p>
+
+<pre class="brush: js">var a = "foo",
+ b = 42,
+ c = {};
+
+// Abreviação em nomes de propriedades (ES2015)
+var o = { a, b, c };
+
+// Em outras palavras,
+console.log((o.a === { a }.a)); // true
+</pre>
+
+<h4 id="Duplicação_em_nomes_de_propriedades">Duplicação em nomes de propriedades</h4>
+
+<p>Quando se está utilizando o mesmo nome para suas propriedades, a última sobrescreverá as anteriores.</p>
+
+<pre class="brush: js">var a = {x: 1, x: 2};
+console.log(a); // { x: 2}
+</pre>
+
+<p>Em códigos ECMAScript 5 no modo estrito, duplicação em nomes de propriedades serão consideradas {{jsxref("SyntaxError")}}. Porém, com a introdução de "nomes de propriedades computadas", tornou-se possível a duplicação das propriedades em tempo de execução. Assim, ECMAScript 2015 removeu a restrição.</p>
+
+<pre class="brush: js">function haveES2015DuplicatePropertySemantics(){
+ "use strict";
+ try {
+ ({ prop: 1, prop: 2 });
+
+ // No error thrown, duplicate property names allowed in strict mode
+ return true;
+ } catch (e) {
+ // Error thrown, duplicates prohibited in strict mode
+ return false;
+ }
+}</pre>
+
+<h3 id="Definição_de_métodos">Definição de métodos</h3>
+
+<p>Uma propriedade de um objeto pode se referir à <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function">function</a>, ou aos métodos <a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/get">getter</a> ou <a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/set">setter</a>.</p>
+
+<pre class="brush: js">var o = {
+ <var>propriedade: function </var>([<var>parâmetros</var>]) {},
+ get <var>propriedade</var>() {},
+ set <var>propriedade</var>(<var>valor</var>) {},
+};</pre>
+
+<p>No ECMAScript 2015, uma notação abreviada está disponível, dispensando o uso da palavra reservada "function".</p>
+
+<pre class="brush: js">// Abreviações em nomes de métodos (ES2015)
+var o = {
+ <var>propriedade</var>([<var>parâmetros</var>]) {},
+ get <var>propriedade</var>() {},
+ set <var>propriedade</var>(<var>valor</var>) {},
+ * <var>gerador</var>() {}
+};</pre>
+
+<p>Com ECMAScript 2015, há uma forma concisa em criar propriedades cujo valor é uma função gerador. </p>
+
+<pre class="brush: js">var o = {
+ * <var>gerador</var>() {
+ ...........
+ }
+};</pre>
+
+<p>Mas em ECMAScript 5, você escreveria (lembrar que em ES5 não há geradores):</p>
+
+<pre class="brush: js">var o = {
+ generator<var>: function *</var>() {
+ ...........
+ }
+};</pre>
+
+<p>Para mais informações e exemplos, veja <a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/Definicoes_metodos">definições de método</a>.</p>
+
+<h3 id="Nomes_de_propriedades_computados">Nomes de propriedades computados</h3>
+
+<p>Começando com ECMAScript 2015, a sintaxe <em>inicializador</em> de objeto também suporta "nomes de propriedades computados". Isso permite que você possa inserir uma expressão dentro de colchetes <code>[]</code>, que será computada como o nome de uma propriedade. Isto é semelhante à notação de chaves utilizado em <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Property_Accessors">acessor de propriedade</a>, utilizado para ler a alterar as propriedades existentes em um objeto. Segue um exemplo utilizando a mesma sintaxe em objetos literais: </p>
+
+<pre class="brush: js">// Nomes de propriedades computados (ES2015)
+var i = 0;
+var a = {
+ ["foo" + ++i]: i,
+ ["foo" + ++i]: i,
+ ["foo" + ++i]: i
+};
+
+console.log(a.foo1); // 1
+console.log(a.foo2); // 2
+console.log(a.foo3); // 3
+
+var param = 'size';
+var config = {
+ [param]: 12,
+ ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+};
+
+console.log(config); // { size: 12, mobileSize: 4 }</pre>
+
+<h3 id="Mutação_Prototype">Mutação Prototype </h3>
+
+<p>Uma definição de propriedade na forma de  <code>__proto__: valor</code> or <code>"__proto__": valor</code> não cria uma propriedade com o nome  <code>__proto__</code>.  Inclusive, se o valor fornecido for um objeto ou <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>, muda o <code>[[Prototype]]</code> do objeto criado para o valor informado. (Se o valor fornecido não é um objeto ou null, o valor não será alterado.)</p>
+
+<pre class="brush: js">var obj1 = {};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+
+var obj2 = { __proto__: null };
+assert(Object.getPrototypeOf(obj2) === null);
+
+var protoObj = {};
+var obj3 = { "__proto__": protoObj };
+assert(Object.getPrototypeOf(obj3) === protoObj);
+
+var obj4 = { __proto__: "not an object or null" };
+assert(Object.getPrototypeOf(obj4) === Object.prototype);
+assert(!obj4.hasOwnProperty("__proto__"));
+</pre>
+
+<p>Apenas uma única mudança em prototype é permitida em um objeto: múltiplas mudanças gera erro de sintaxe. </p>
+
+<p>Definições de propriedade que não utilizam da notação de ":", não são consideradas mudanças de prototype: são definições de propriedades que se comportam de forma semelhante às definições utilizando qualquer outro nome. </p>
+
+<pre class="brush: js">var __proto__ = "variable";
+
+var obj1 = { __proto__ };
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+assert(obj1.hasOwnProperty("__proto__"));
+assert(obj1.__proto__ === "variable");
+
+var obj2 = { __proto__() { return "hello"; } };
+assert(obj2.__proto__() === "hello");
+
+var obj3 = { ["__prot" + "o__"]: 17 };
+assert(obj3.__proto__ === 17);
+</pre>
+
+<h2 id="Notação_de_objeto_literal_vs_JSON">Notação de objeto literal vs JSON</h2>
+
+<p>A notação de objeto literal não é a mesma de <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/pt-BR/docs/JSON">JSON</a>).  Mesmo que possuam semelhanças, há as seguintes diferenças:</p>
+
+<ul>
+ <li>JSON permite definições de propriedades utilizando apenas aspas duplas, como  <code>"propriedade": valor</code>.  E a definição não pode ser abreviada.</li>
+ <li>Os valores JSON podem ser apenas strings, numbers, arrays, <code>true</code>, <code>false</code>, <code>null</code>, ou outro objeto JSON.</li>
+ <li>Uma função como valor (veja "Métodos" acima) não pode ser atribuido em JSON.</li>
+ <li>Objetos como {{jsxref("Date")}} serão do tipo string após {{jsxref("JSON.parse()")}}.</li>
+ <li>{{jsxref("JSON.parse()")}} rejeitará "nomes de propriedades computados" e um erro será lançado.</li>
+</ul>
+
+<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('ES1')}}</td>
+ <td>{{Spec2('ES1')}}</td>
+ <td>Definição inicial.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
+ <td>{{Spec2('ES5.1')}}</td>
+ <td><a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/get">getter</a> e <a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/set">setter</a> adicionados.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-object-initializer', 'Object Initializer')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td>Abreviações de nomes em propriedades/métodos e nomes de propriedados computados foram adicionados.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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.0)}}</td>
+ <td>{{CompatGeckoDesktop("1.0")}}</td>
+ <td>1</td>
+ <td>1</td>
+ <td>1</td>
+ </tr>
+ <tr>
+ <td>Nomes de propriedades computados</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop("34")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>7.1</td>
+ </tr>
+ <tr>
+ <td>Abreviação em nomes de propriedades</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop("33")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td>Abreviação em nomes de métodos</td>
+ <td>{{CompatChrome(42.0)}}</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>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>Suporte básico</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoMobile("1.0")}}</td>
+ <td>1</td>
+ <td>1</td>
+ <td>1</td>
+ <td>{{CompatChrome(1.0)}}</td>
+ </tr>
+ <tr>
+ <td>Nomes de propriedades computados</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoMobile("34")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td>Abreviação em nomes de propriedades</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoMobile("33")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td>Abreviação em nomes de métodos</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatChrome(42.0)}}</td>
+ <td>{{CompatGeckoMobile("34")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatChrome(42.0)}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Assesores de propriedade</a></li>
+ <li><code><a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li>
+ <li><a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/Definicoes_metodos">Definições de métodos</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+</ul>