diff options
Diffstat (limited to 'files/pt-br/web/javascript/guide/working_with_objects/index.html')
| -rw-r--r-- | files/pt-br/web/javascript/guide/working_with_objects/index.html | 494 |
1 files changed, 494 insertions, 0 deletions
diff --git a/files/pt-br/web/javascript/guide/working_with_objects/index.html b/files/pt-br/web/javascript/guide/working_with_objects/index.html new file mode 100644 index 0000000000..1dccaeef2e --- /dev/null +++ b/files/pt-br/web/javascript/guide/working_with_objects/index.html @@ -0,0 +1,494 @@ +--- +title: Trabalhando com objetos +slug: Web/JavaScript/Guide/Trabalhando_com_Objetos +tags: + - Comparando Objetos + - Contrutor + - Documento + - ECMAScript6 + - Guia(2) + - Iniciante + - JavaScript +translation_of: Web/JavaScript/Guide/Working_with_Objects +--- +<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="/en-US/docs/JavaScript/Guide/Statements#for...in_Statement" title="en-US/docs/JavaScript/Guide/Statements#for...in Statement">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><FORM></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 < lowval) || (obj.value > 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"><input type="text" name="age" size="3" + onChange="validate(this, 18, 99)"> +</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"><form name="myForm"> +<p><label>Nome do form:<input type="text" name="text1" value="Beluga"></label> +<p><input name="button1" type="button" value="Mostre o Nome do Form" + onclick="this.form.text1.value = this.form.name"> +</p> +</form></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> |