path: root/files/pt-br/web/javascript/guide/working_with_objects/index.html

---
title: Trabalhando com objetos
slug: Web/JavaScript/Guide/Working_with_Objects
tags:
  - Comparando Objetos
  - Contrutor
  - Documento
  - ECMAScript6
  - Guia(2)
  - Iniciante
  - JavaScript
translation_of: Web/JavaScript/Guide/Working_with_Objects
original_slug: Web/JavaScript/Guide/Trabalhando_com_Objetos
---
<p><strong>A linguagem JavaScript é projetada com base em um simples paradigma orientado a objeto. Um objeto é uma coleção de propriedades, e uma propriedade é uma associação entre um nome (ou <em>chave</em>) e um valor. Um valor de propriedade pode ser uma função, que é então considerada um <em>método</em> do objeto. Além dos objetos que são pré-definidos no browser, você pode definir seus próprios objetos.</strong></p>

<p><strong>Este capítulo descreve como usar objetos, propriedades, funções, e métodos, e como criar seus próprios objetos.</strong></p>

<h2 id="Visão_geral_de_objetos">Visão geral de objetos</h2>

<p>Objetos em JavaScript, assim como em muitas outras linguagens de programação, podem ser comparados com objetos na vida real. O conceito de objetos em JavaScript pode ser entendido com objetos tangíveis da vida real.</p>

<p>Em JavaScript, um objeto é uma entidade independente, com propriedades e tipos. Compare-o com uma xícara, por exemplo. Uma xícara é um objeto, com propriedades. Uma xícara tem uma cor, uma forma, peso, um material de composição, etc. Da mesma forma, objetos em JavaScript podem ter propriedades, que definem suas características.</p>

<h2 id="Objetos_e_propriedades">Objetos e propriedades</h2>

<p>Um objeto em JavaScript tem propriedades associadas a ele. Uma propriedade de um objeto pode ser explicada como uma variável que é ligada ao objeto. Propriedades de objetos são basicamente as mesmas que variáveis normais em JavaScript, exceto pelo fato de estarem ligadas a objetos. As propriedades de um objeto definem as características do objeto. Você acessa as propriedades de um objeto com uma simples notação de ponto:</p>

<div style="margin-right: 270px;">
<pre class="brush: js">nomeDoObjeto.nomeDaPropriedade
</pre>
</div>

<p>Como as variáveis em JavaScript, o nome do objeto (que poderia ser uma variável normal) e um nome de propriedade diferem em maiúsculas/minúsculas (por exemplo, cor e Cor são propriedades diferentes). Você pode definir uma propriedade atribuindo um valor a ela. Por exemplo, vamos criar um objeto chamado <code>meuCarro</code> e dar a ele propriedades chamadas <code>fabricacao</code>, <code>modelo</code>, e <code>ano</code>, conforme mostrado a seguir:</p>

<pre class="brush: js">var meuCarro = new Object();
meuCarro.fabricacao = "Ford";
meuCarro.modelo = "Mustang";
meuCarro.ano = 1969;
</pre>

<p>Propriedades não definidas de um objeto são {{jsxref("undefined")}} (e não {{jsxref("null")}}).</p>

<pre class="brush: js">meuCarro.semPropriedade; //undefined</pre>

<p>Propriedades de objetos em JavaScript podem também ser acessadas ou alteradas usando-se notação de colchetes. Objetos são às vezes chamados de <em>arrays associativos</em>, uma vez que cada propriedade é associada com um valor de string que pode ser usado para acessá-la. Então, por exemplo, você poderia acessar as propriedades do objeto <code>meuCarro</code> como se segue:</p>

<pre class="brush: js">meuCarro["fabricacao"] = "Ford";
meuCarro["modelo"] = "Mustang";
meuCarro["ano"] = 1969;
</pre>

<p>Um nome de propriedade de um objeto pode ser qualquer string JavaScript válida, ou qualquer coisa que possa ser convertida em uma string, incluindo uma string vazia. No entanto, qualquer nome e propriedade que não é um identificador JavaScript válido (por exemplo, um nome de propriedade que tem um espaço ou um hífen, ou que começa com um número) só pode ser acessado(a) usando-se a notação de colchetes. Essa notação é também muito útil quando nomes de propriedades devem ser determinados dinamicamente (quando o nome da propriedade não é determinado até o momento de execução). Exemplos são mostrados a seguir:</p>

<pre class="brush: js">var meuObj = new Object(),
    str = "minhaString",
    aleat = Math.random(),
    obj = new Object();

meuObj.tipo               = "Sintaxe de ponto";
meuObj["data de criacao"] = "String com espaco";
meuObj[str]               = "valor de String";
meuObj[aleat]             = "Numero Aleatorio";
meuObj[obj]               = "Objeto";
meuObj[""]                = "Mesmo uma string vazia";

console.log(meuObj);
</pre>

<p>Você pode também acessar propriedades usando um valor de string que está armazenado em uma variável:</p>

<div style="width: auto;">
<pre class="brush: js">var nomeDaPropriedade = "fabricacao";
meuCarro[nomeDaPropriedade] = "Ford";

nomeDaPropriedade = "modelo";
meuCarro[nomeDaPropriedade] = "Mustang";
</pre>
</div>

<p>Você pode usar a notação de colchetes com o comando <a class="internal" href="/pt-BR/docs/Web/JavaScript/Reference/Statements/for...in" title="pt-BR/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> para iterar por todas as propriedades enumeráveis de um objeto. Para ilustrar como isso funciona, a seguinte função mostra as propriedades de um objeto quando você passa o objeto e o nome do objeto como argumentos para a função:</p>

<pre class="brush: js">function mostrarProps(obj, nomeDoObj) {
  var resultado = "";
  for (var i in obj) {
    if (obj.hasOwnProperty(i)) {
        resultado += nomeDoObj + "." + i + " = " + obj[i] + "\n";
    }
  }
  return resultado;
}
</pre>

<p>Então, a chamada de função <code>mostrarProps(meuCarro, "meuCarro")</code> retornaria o seguinte:</p>

<pre>meuCarro.fabricacao = Ford
meuCarro.modelo = Mustang
meuCarro.ano = 1969</pre>

<h2 id="Objetos_tudo">Objetos: tudo</h2>

<p>Em JavaScript, quase tudo é um objeto. Todos os tipos primitivos - com exceção de <code>null</code> e <code>undefined</code> - são tratados como objetos. Eles podem receber propriedades (propriedades atribuídas de alguns tipos não são persistentes), e possuem todas as características de objetos.</p>

<h2 id="Enumerando_todas_as_propriedades_de_um_objeto">Enumerando todas as propriedades de um objeto</h2>

<p>Começando com a <a href="/en-US/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="en-US/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a>, há três formas nativas de se listar (ou "caminhar por") as propriedades de um objeto:</p>

<ul>
 <li><a href="/en-US/docs/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a> loops<br>
  Esse método caminha por todas as propriedades enumeráveis de um objeto e sua cadeia de protótipos</li>
 <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys" title="en-US/docs/JavaScript/Reference/Global Objects/Object/keys">Object.keys(o)</a><br>
  Esse método retorna um array com todos os nomes ("chaves") de propriedades próprios de um objeto <code>o</code> (mas não na cadeia de protótipos).</li>
 <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" title="en-US/docs/JavaScript/Reference/Global Objects/Object/getOwnPropertyNames">Object.getOwnPropertyNames(o)</a><br>
  Esse método retorna um array contendo todos os nomes de propriedades próprios (enumeráveis ou não) de um objeto <code>o</code>.</li>
</ul>

<p>Antes, na ECMAScript 5, não existia uma forma nativa de se listar todas as propriedades de um objeto. No entanto, isso pode ser feito com a seguinte função:</p>

<pre class="brush: js">function listarTodasAsPropriedades(o){
	var objectoASerInspecionado;
	var resultado = [];

	for(objectoASerInspecionado = o; objectoASerInspecionado !== null; objectoASerInspecionado = Object.getPrototypeOf(objectoASerInspecionado)){
		resultado = resultado.concat(Object.getOwnPropertyNames(objectoASerInspecionado));
	}

	return resultado;
}
</pre>

<p>Isso pode ser útil para revelar propriedades "escondidadas" (propriedades na cadeia de protótipos que não são acessíveis através do objeto, porque outra propriedade possui o mesmo nome anteriormente na cadeia de protótipos). A listagem de propriedades acessíveis só pode ser facilmente feita através da remoção de valores duplicados no array.</p>

<h2 id="Criando_novos_objetos">Criando novos objetos</h2>

<p>JavaScript possui um número de objetos pré-definidos. Além disso, você pode criar seus próprios objetos. Você pode criar um objeto usando um <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">objeto inicializador</a>. Alternativamente, você pode primeiro criar uma função construtora e depois instanciar um objeto usando aquela função e o operador <code>new</code>.</p>

<h3 id="Usando_inicializadores_de_objeto">Usando inicializadores de objeto</h3>

<p>Além de criar objetos usando uma função construtora, você pode criar objetos usando um <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">inicializador de objeto</a>. O uso de inicializadores de objeto é às vezes conhecido como criar objetos com notação literal. O termo "inicializador de objeto" é consistente com a terminologia usada por C++.</p>

<p>A sintaxe para um objeto usando-se um inicializador de objeto é:</p>

<pre class="brush: js">var obj = { propriedade_1:   valor_1,   // propriedade_# pode ser um identificador...
            2:            valor_2,   // ou um numero...
            // ...,
            "propriedade n": valor_n }; // ou uma string
</pre>

<p>onde <code>obj</code> é o nome do novo objeto, cada <code>propriedade_<em>i</em></code> é um identificador (um nome, um número, ou uma string literal), e cada <code>valor_<em>i</em></code> é uma expressão cujo valor é atribuído à <code>propriedade_<em>i</em></code>. O <code>obj</code> e a atribuição são opcionais; se você não precisa fazer referência a esse objeto em nenhum outro local, você não precisa atribuí-lo a uma variável. (Note que você pode precisar colocar o objeto literal entre parentêses se o objeto aparece onde um comando é esperado, de modo a não confundir o literal com uma declaração de bloco.)</p>

<p>Se um objeto é criado com um inicializador de objeto em um script de alto nível, JavaScript interpreta o objeto a cada vez que avalia uma expressão contendo o objeto literal. Além disso, um inicializador usado em uma função é criado toda vez que a função é chamada.</p>

<p>O seguinte comando cria um objeto e o atribui à variável <code>x</code> somente se a expressão <code>cond</code> é verdadeira.</p>

<pre class="brush: js">if (cond) var x = {hi: "there"};
</pre>

<p>O seguinte exemplo cria <code>minhaHonda</code> com três propriedades. Note que a propriedade <code>motor</code> é também um objeto com suas próprias propriedades.</p>

<pre class="brush: js">var minhaHonda = {cor: "vermelho", rodas: 4, motor: {cilindros: 4, tamanho: 2.2}};
</pre>

<p>Você pode também usar inicializadores de objeto para criar arrays. Veja <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals">arrays literais</a>.</p>

<h3 id="Usando_uma_função_construtora">Usando uma função construtora</h3>

<p>Alternativamente, você pode criar um objeto com estes dois passos:</p>

<ol>
 <li>Defina o tipo de objeto escrevendo uma função construtora. Há uma forte convenção, e com boa razão, de se usar uma letra inicial maiúscula.</li>
 <li>Crie uma instância do objeto com <code>new</code>.</li>
</ol>

<p>Para definir um tipo de objeto, crie uma função para o tipo de objeto que especifique seu nome, suas propriedades e seus métodos. Por exemplo, suponha que você queira criar um tipo objeto para carros. Você quer que esse tipo de objeto seja chamado <code>carro</code>, e você quer ele tenha propriedades de marca, modelo, e ano. Para fazer isto, você escreveria a seguinte função:</p>

<pre class="brush: js">function Carro(marca, modelo, ano) {
  this.marca = marca;
  this.modelo = modelo;
  this.ano = ano;
}
</pre>

<p>Note o uso de <code>this</code> para atribuir valores às propriedades do objeto com base nos valores passados para a função.</p>

<p>Agora você pode criar um objeto chamado <code>meucarro</code> como se segue:</p>

<pre class="brush: js">var meucarro = new Carro("Eagle", "Talon TSi", 1993);
</pre>

<p>Esse comando cria <code>meucarro</code> e atribui a ele valores especificados para suas propriedade. Então o valor de <code>meucarro.marca</code> é a string "Eagle", <code>meucarro.ano</code> é o inteiro 1993, e assim por diante.</p>

<p>Você pode criar qualquer número de objetos <code>carro</code> com o uso de <code>new</code>. Exemplo,</p>

<pre class="brush: js">var carroDeKen = new Carro("Nissan", "300ZX", 1992);
var carroDeVPG = new Carro("Mazda", "Miata", 1990);
</pre>

<p>Um objeto pode ter uma propriedade que por si só também é um objeto. Por exemplo, suponha que você define um objeto chamado <code>pessoa</code> como se segue:</p>

<pre class="brush: js">function Pessoa(nome, idade, sexo) {
  this.nome = nome;
  this.idade = idade;
  this.sexo = sexo;
}
</pre>

<p>e então você instancia dois novos objetos<code> pessoa</code> da seguinte forma:</p>

<pre class="brush: js">var jose = new Pessoa("Jose Silva", 33, "M");
var paulo = new Pessoa("Paulo Santos", 39, "M");
</pre>

<p>Então, você pode reescrever a definição de <code>carro</code> de modo a incluir uma propriedade <code>dono</code> que recebe um objeto <code>pessoa</code>, como se segue:</p>

<pre class="brush: js">function Carro(marca, modelo, ano, dono) {
  this.marca = marca;
  this.modelo = modelo;
  this.ano = ano;
  this.dono = dono;
}
</pre>

<p>Para instanciar os novos objetos, você então usa o seguinte:</p>

<pre class="brush: js">var carro1 = new Carro("Eagle", "Talon TSi", 1993, jose);
var carro2 = new Carro("Nissan", "300ZX", 1992, paulo);
</pre>

<p>Perceba que ao invés de passar uma string literal ou um valor inteiro na hora de criar os novos objetos, os comandos acima passam os objetos <code>jose</code> e <code>paulo</code> como os argumentos para os donos. Então se você quiser descobrir o nome do dono de <code>carro2</code>, você pode acessar a seguinte propriedade:</p>

<pre class="brush: js">carro2.dono
</pre>

<p>Note que você pode sempre adicionar uma propriedade a um objeto definido anteriormente. Por exemplo, o comando</p>

<pre class="brush: js">carro1.cor = "preto";
</pre>

<p>adiciona uma propriedade <code>cor</code> ao <code>carro1</code>, e dá a ele o valor <code>"preto."</code> No entanto, isso não afeta nenhum outro objeto. Para adicionar a nova propriedade a todos os objetos do mesmo tipo, você deve adicionar a propriedade na definição do tipo de objeto <code>carro</code>.</p>

<h3 id="Usando_o_método_Object.create">Usando o método Object.create</h3>

<p>Objetos podem também ser criados usando-se o método <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code>. Esse método pode ser muito útil, pois permite que você escolha o objeto protótipo para o objeto que você quer criar, sem a necessidade de se definir uma função construtora.</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Encapsulamento das propriedades e métodos de Animal</span>
<span class="keyword token">var</span> Animal <span class="operator token">=</span> <span class="punctuation token">{</span>
  tipo<span class="punctuation token">:</span> <span class="string token">"Invertebrados"</span><span class="punctuation token">,</span> <span class="comment token">// Propriedades de valores padrão</span>
  qualTipo <span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>  <span class="comment token">// Método que ira mostrar o tipo de Animal</span>
    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.tipo</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">// Cria um novo tipo de animal chamado animal1</span>
<span class="keyword token">var</span> animal1 <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span>Animal<span class="punctuation token">)</span><span class="punctuation token">;</span>
animal1<span class="punctuation token">.</span><span class="function token">qualTipo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Saída:Invertebrados</span>

<span class="comment token">// Cria um novo tipo de animal chamado Peixes</span>
<span class="keyword token">var</span> peixe <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span>Animal<span class="punctuation token">)</span><span class="punctuation token">;</span>
peixe<span class="punctuation token">.</span>tipo <span class="operator token">=</span> <span class="string token">"Peixes"</span><span class="punctuation token">;</span>
peixe<span class="punctuation token">.</span><span class="function token">qualTipo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Saída: Peixes</span></code></pre>

<h3 id="Herança">Herança</h3>

<p>Todos os objetos em JavaScript herdam de pelo menos um outro objeto. O objeto "pai" é conhecido como o protótipo, e as propriedades herdadas podem ser encontradas no objeto <code>prototype</code> do construtor.</p>

<h2 id="Indexando_Propriedades_de_Objetos">Indexando Propriedades de Objetos</h2>

<p>Você pode se referir a uma propriedade de um objeto pelo seu nome de propriedade ou pelo seu índice ordinal. Se você inicialmente definiu uma propriedade pelo nome, você deve sempre se referir a ela pelo nome, e se você inicialmente definir uma propriedade por um índice, você deve sempre se referir a ela pelo índice.</p>

<p>Esta restrição se aplica quando  você cria um objeto e suas propriedades com uma função construtora (como fizemos anteriormente com o <font face="Consolas, Liberation Mono, Courier, monospace">objeto do tipo carro</font>) e quando você define propriedades individuais explicitamente (por exemplo, <code>meuCarro.cor = "vermelho"</code>). Se você inicialmente definir uma propriedade do objeto com um índice, tal como <code>meuCarro[5] = "25 mpg"</code>, você pode subsequentemente referir-se á propriedade somente como <code>meuCarro[5]</code>.</p>

<p>A exceção a esta regra é a objetos refletidos a partir do HTML, como o conjunto de formulários. Você pode sempre se referir a objetos nessas matrizes por seu número de ordem (com base em onde eles aparecem no documento) ou seu nome (se definido). Por exemplo, se a segunda tag <code>&lt;FORM&gt;</code> em um  documento tem um atributo <code>NAME</code> de "meuFormulario", você pode se referir ao formulário como <code>document.forms[1]</code> ou <code>document.forms["meuFormulario"] </code>ou <code>document.meuFormulario</code>.</p>

<h2 id="Definindo_propriedades_para_um_tipo_de_objeto">Definindo propriedades para um tipo de objeto</h2>

<p>Você pode adicionar uma propriedade a um tipo de objeto definido anteriormente, utilizando a propriedade prototype. Esta define uma propriedade que é partilhada por todos os objetos do tipo especificado, em vez de apenas uma instância do objeto. O código a seguir adiciona uma propriedade <code>cor</code> para todos os objetos do tipo C<code>arro</code>, em seguida adiciona um valor a propriedade <code>cor</code> do objeto <code>carro1</code>.</p>

<pre class="brush: js">Carro.prototype.cor = null;
carro1.cor = "preto";
</pre>

<p>Consulte a <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype">propriedade</a> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype" title="en-US/docs/JavaScript/Reference/Global Objects/Function/prototype"><code>prototype</code></a> do objeto <code>Function </code>na <a href="/en-US/docs/JavaScript/Reference">Referência</a> <a href="/en-US/docs/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript</a>  para mais informações.</p>

<h2 id="Definindo_métodos">Definindo métodos</h2>

<p>Um <em>método</em> é uma função associada a um objeto, ou, simplesmente, um método é uma propriedade de um objeto que é uma função. Métodos são definidos da forma que as funções normais são definidas, exceto que eles tenham que ser atribuídos como propriedade de um objeto. São exemplos:</p>

<pre class="brush: js">nomeDoObjeto.nomedometodo = nome_da_funcao;

var meuObjeto = {
  meuMetodo: function(parametros) {
    // ...faça algo
  }
};
</pre>

<p>Onde <code>nomeDoObjeto</code> é um objeto existente, <code>nomedometodo</code> é o nome que você atribuiu ao método, e <code>nome_da_funcao</code> é o nome da função.</p>

<p>Em seguida, você pode chamar o método no contexto do objeto da seguinte forma:</p>

<pre class="brush: js">objeto.<code>nomedometodo</code>(parametros);
</pre>

<p>Você pode definir métodos para um tipo de objeto incluindo uma definição de metodo na função construtora do objeto. Por exemplo, você poderia definir uma função que iria formatar e mostrar as propriedades do objeto <code>carro</code> previamente definido; por exemplo,</p>

<pre class="brush: js">function mostreCarro() {
  var resultado = "Um belo " + this.ano + " " + this.fabricacao
    + " " + this.modelo;
  pretty_print(resultado);
}
</pre>

<p>onde <code>pretty_print</code> é uma função que mostra uma linha horizontal e uma string. Observe o uso de <code>this</code> para referenciar o objeto ao qual o método pertence.</p>

<p>Você pode fazer desta função um método de <code>carro,</code> adicionando seu estado à definição do objeto.</p>

<pre class="brush: js">this.mostreCarro = mostreCarro;
</pre>

<p>Assim, a definição completa de <code>carro</code> seria agora, parecida com essa:</p>

<pre class="brush: js">function Carro(fabricacao, modelo, ano, proprietario) {
  this.fabricacao = fabricacao;
  this.modelo = modelo;
  this.ano = ano;
  this.proprietario = proprietario;
  this.mostreCarro = mostreCarro;
}
</pre>

<p>Então você pode chamar o método <code>mostreCarro</code> para cada objeto seguinte:</p>

<pre class="brush: js">carro1.mostreCarro();
carro2.mostreCarro();
</pre>

<h2 id="Usando_this_para_referências_de_objetos">Usando <code>this</code> para referências de objetos</h2>

<p>JavaScript tem uma palavra-chave especial, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a>, que você pode usar dentro de um método para referenciar o objeto corrente. Por exemplo, suponha que você tenha uma função chamada <code>validate</code> que valida o <code>valor</code> da propriedade de um objeto, dado o objeto e os valores altos e baixos:</p>

<pre class="brush: js">function validate(obj, lowval, hival) {
  if ((obj.value &lt; lowval) || (obj.value &gt; hival))
    alert("Valor inválido!");
}
</pre>

<p>Então, você poderia chamar <code>validate</code> no manipulador de evento <code>onchange</code> em cada elemento do formulário, usando <code>this </code>para passar o elemento, como no exemplo a seguir:</p>

<pre class="brush: html">&lt;input type="text" name="age" size="3"
  onChange="validate(this, 18, 99)"&gt;
</pre>

<p>No geral, <code>this</code> referencia o objeto chamando um método.</p>

<p>Quando combinado com a propriedade <code>form</code> , <code>this</code> pode referenciar a forma original do objeto atual. No exemplo seguinte, o formulário <code>myForm</code> contém um objeto <code>Text</code> e um botão. Quando o usuário clica no botão, o valor do objeto <code>Text</code> é definido como nome do formulário. O manipulador de eventos <code>onclick</code> do botão usa <code>this.form</code> para referenciar a forma original, <code>myForm</code>.</p>

<pre class="brush: html">&lt;form name="myForm"&gt;
&lt;p&gt;&lt;label&gt;Nome do form:&lt;input type="text" name="text1" value="Beluga"&gt;&lt;/label&gt;
&lt;p&gt;&lt;input name="button1" type="button" value="Mostre o Nome do Form"
     onclick="this.form.text1.value = this.form.name"&gt;
&lt;/p&gt;
&lt;/form&gt;</pre>

<h2 id="Definindo_getters_e_setters">Definindo getters e setters</h2>

<p>Um <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> é um método que obtém o valor de uma propriedade específica. Um <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> é um método que define o valor de uma propriedade específica. Você pode definir getters e setters em qualquer objeto de núcleo pré-definido ou objeto definido pelo usuário que suporta a adição de novas propriedades. A sintaxe para definir getters e setters usa a sintaxe literal do objeto.</p>

<p>O código a seguir ilustra como getters e setters podem funcionar para um objeto<code> o </code>definido pelo usuário.</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> o <span class="operator token">=</span> <span class="punctuation token">{</span>
  a<span class="punctuation token">:</span> <span class="number token">7</span><span class="punctuation token">,</span>
  <span class="keyword token">get</span> <span class="function token">b</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">.</span>a <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span><span class="punctuation token">,</span>
  <span class="keyword token">set</span> <span class="function token">c</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="punctuation token">{</span>
    <span class="keyword token">this</span><span class="punctuation token">.</span>a <span class="operator token">=</span> x <span class="operator token">/</span> <span class="number token">2</span>
  <span class="punctuation token">}</span>
<span class="punctuation token">}</span><span class="punctuation token">;</span>

console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>o<span class="punctuation token">.</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 7</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>o<span class="punctuation token">.</span>b<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 8</span>
o<span class="punctuation token">.</span>c <span class="operator token">=</span> <span class="number token">50</span><span class="punctuation token">;</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>o<span class="punctuation token">.</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 25</span></code></pre>

<p>As propriedades do objeto <code>o</code> são:</p>

<ul>
 <li><code>o.a</code> — um número</li>
 <li><code>o.b</code> — um getter que retorna <code>o.a</code> + 1</li>
 <li><code>o.c</code> — um setter que define o valor de <code>o.a</code> pela metade do valor definindo para <code>o.c</code></li>
</ul>

<p>Observe que nomes de função de getters e setters definidos em um objeto literal usando "[gs]et <em>property</em>()" (ao contrário de <code>__define[GS]etter__</code> ) não são os próprios nomes dos getters, embora a sintaxe <code>[gs]et <em>propertyName</em>(){ }</code> possa  induzir ao erro e você pensar de outra forma. Para nomear uma função getter ou setter usando a sintaxe "[gs]et <em>property</em>()", define explicitamente um função nomeada programaticamente usando <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/Core JavaScript 1.5 Reference/Global
Objects/Object/defineProperty">Object.defineProperty</a></code> (ou o legado fallback <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineGetter" title="en-US/docs/Core JavaScript 1.5 Reference/Global
Objects/Object/defineGetter">Object.prototype.__defineGetter__</a></code>).</p>

<p>O código a seguir ilustra como getters e setters podem extender o protótipo <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code> para adicionar a propriedade <code>ano</code> para todas as instâncias de classes <code>Date</code> pré-definidas. Ele usa os métodos <code>getFullYear</code> e <code>setFullYear</code> existentes da classe <code>Date</code> para suportar o getter e setter da propriedade <code>ano</code>.</p>

<p>Estes estados definem um getter e setter para a propriedade <code>ano</code>:</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> d <span class="operator token">=</span> Date<span class="punctuation token">.</span>prototype<span class="punctuation token">;</span>
Object<span class="punctuation token">.</span><span class="function token">defineProperty</span><span class="punctuation token">(</span>d<span class="punctuation token">,</span> <span class="string token">"year"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
  <span class="keyword token">get</span><span class="punctuation token">:</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">return</span> <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">getFullYear</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">}</span><span class="punctuation token">,</span>
  <span class="keyword token">set</span><span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>y<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">setFullYear</span><span class="punctuation token">(</span>y<span class="punctuation token">)</span> <span class="punctuation token">}</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

<p>Estes estados usam o getter e setter em um objeto <code>Date</code>:</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> now <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Date</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>now<span class="punctuation token">.</span>year<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 2000</span>
now<span class="punctuation token">.</span>year <span class="operator token">=</span> <span class="number token">2001</span><span class="punctuation token">;</span> <span class="comment token">// 987617605170</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>now<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="comment token">// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001</span></code></pre>

<p>A principio, getters e setters podem ser ou</p>

<ul>
 <li>definidos usando <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers">objetos inicializadores</a>, ou</li>
 <li>adicionar posteriormente para qualquer objeto a qualquer tempo usando um método getter ou setter adicionado</li>
</ul>

<p>Ao definir getters e setters usando <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers">objetos inicializadores</a> tudo o que você precisa fazer é prefixar um método getter com <code>get</code> e um método setter com <code>set</code>. Claro, o método getter não deve esperar um parâmetro, enquanto o método setter espera exatamente um parâmetro (novo valor para definir). Por exemplo:</p>

<pre class="brush: js">var o = {
  a: 7,
  <strong>get</strong> b() { return this.a + 1; },
  <strong>set</strong> c(x) { this.a = x / 2; }
};
</pre>

<p>Getters e setters podem também ser adicionado em um objeto a qualquer hora depois da criação usando o método <code>Object.defineProperties</code>. O primeiro parâmetro deste método é o objeto no qual você quer definir o getter ou setter. O segundo parâmetro é um objeto cujos nomes das propriedades são os nomes getter ou setter, e cujo valores das propriedades são objetos para definição de funções getter ou setter. Aqui está um exemplo que define o mesmo getter e setter usado no exemplo anterior:<br>
  </p>

<pre class="brush: js">var o = { a:0 }

Object.defineProperties(o, {
    "b": { get: function () { return this.a + 1; } },
    "c": { set: function (x) { this.a = x / 2; } }
});

o.c = 10 // Roda o setter, que associa 10 / 2 (5) para a propriedade 'a'
console.log(o.b) // Roda o getter, que yields a + 1 ou 6
</pre>

<p>Escolher qual das duas formas depende do seu estilo de programação e tarefa na mão. Se você já vai para o inicializador de objeto ao definir um protótipo, provavelmente a maior parte do tempo escolherá a primeira forma. Esta forma é mais compacta e natural. No entanto, se você precisar adicionar getters e setters mais tarde - porque você não escreveu o protótipo ou objeto particular - então a segunda forma é a única possível. A segunda forma provavelmente melhor representa a natureza dinâmica do JavaScript - mas pode tornar o código difícil de ler e entender.</p>

<h2 id="Removendo_propriedades">Removendo propriedades</h2>

<p>Você pode remover uma propriedade não herdada usando o operador <code>delete</code>. O código a seguir mostra como remover uma propriedade.</p>

<pre class="brush: js">//Criando um novo objeto, myobj, com duas propriedades, a e b.
var myobj = new Object;
myobj.a = 5;
myobj.b = 12;

//Removendo a propriedade a, deixando myobj com apenas a propriedade b.
delete myobj.a;
console.log ("a" in myobj) // yields "false"
</pre>

<p>Você também pode usar <code>delete</code> para remover uma variável global se a <code>var</code> keyword não estiver sendo usada para declarar a variável:</p>

<pre class="brush: js">g = 17;
delete g;
</pre>

<h2 id="Comparando_Objetos">Comparando Objetos</h2>

<p>Em JavaScript, objetos são um tipo de referência. Dois objetos distintos nunca são iguais, mesmo que tenham as mesmas propriedades. Apenas comparando o mesmo objeto de referência com ele mesmo produz verdadeiro.</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Duas variáveis, dois objetos distintos com as mesmas propriedades</span>
<span class="keyword token">var</span> fruit <span class="operator token">=</span> <span class="punctuation token">{</span>name<span class="punctuation token">:</span> <span class="string token">"apple"</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> fruitbear <span class="operator token">=</span> <span class="punctuation token">{</span>name<span class="punctuation token">:</span> <span class="string token">"apple"</span><span class="punctuation token">}</span><span class="punctuation token">;</span>

fruit <span class="operator token">==</span> fruitbear <span class="comment token">// return false</span>
fruit <span class="operator token">===</span> fruitbear <span class="comment token">// return false</span></code></pre>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Duas variáveis, um único objeto</span>
<span class="keyword token">var</span> fruit <span class="operator token">=</span> <span class="punctuation token">{</span>name<span class="punctuation token">:</span> <span class="string token">"apple"</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> fruitbear <span class="operator token">=</span> fruit<span class="punctuation token">;</span>  <span class="comment token">// assign fruit object reference to fruitbear</span>

<span class="comment token">// Here fruit and fruitbear are pointing to same object</span>
fruit <span class="operator token">==</span> fruitbear <span class="comment token">// return true</span>
fruit <span class="operator token">===</span> fruitbear <span class="comment token">// return true</span></code></pre>

<p>Para mais informações sobre comparaçāo de operadores, veja <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Operadores de comparaçāo</a>.</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li>Para se aprofundar, leia sobre os <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">detalhes do modelo de objetos  javaScript</a>.</li>
 <li>Para saber mais sobre classes em ECMAScript6 (uma nova forma de criar objetos), veja o capítulo <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">JavaScript classes</a>.</li>
</ul>

<div>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div>