diff options
Diffstat (limited to 'files/pt-br/learn/javascript/objects')
8 files changed, 2100 insertions, 0 deletions
diff --git a/files/pt-br/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/pt-br/learn/javascript/objects/adding_bouncing_balls_features/index.html new file mode 100644 index 0000000000..b0e0c0d534 --- /dev/null +++ b/files/pt-br/learn/javascript/objects/adding_bouncing_balls_features/index.html @@ -0,0 +1,202 @@ +--- +title: Adicionando recursos à nossa demonstração de bolas pulantes +slug: Aprender/JavaScript/Objetos/Adding_bouncing_balls_features +translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">Nesta avaliação, espera-se que você use a demonstração de bolas saltantes do artigo anterior como ponto de partida e adicione alguns recursos novos e interessantes a ela.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Before attempting this assessment you should have already worked through all the articles in this module.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To test comprehension of JavaScript objects and object-oriented constructs</td> + </tr> + </tbody> +</table> + +<h2 id="Ponto_de_partida">Ponto de partida</h2> + +<p>Para iniciar essa avaliação, faça uma cópia local de <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index-finished.html">index-finished.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css">style.css</a>, e <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">main-finished.js</a> do nosso último artigo em um novo diretório em seu computador local.</p> + +<div class="note"> +<p><strong>Note</strong>: Alternatively, you could use a site like <a class="external external-icon" href="http://jsbin.com/">JSBin</a> or <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> to do your assessment. You could paste the HTML, CSS and JavaScript into one of these online editors. If the online editor you are using doesn't have separate JavaScript/CSS panels, feel free to put them inline <code><script></code>/<code><style></code> elements inside the HTML page.</p> +</div> + +<h2 id="Resumo_do_projeto">Resumo do projeto</h2> + +<p>Nossa demo com bola saltitante é divertida, mas agora queremos torná-la um pouco mais interativa, adicionando um círculo maligno controlado pelo usuário, que vai comer as bolas se elas forem capturadas. Também queremos testar suas habilidades de construção de objetos criando um objeto <code>Shape()</code> genérico do qual nossas bolas e círculo maligno podem herdar. Por fim, queremos adicionar um contador de pontuação para rastrear o número de bolas a serem capturadas.</p> + +<p>A imagem seguinte dá-lhe uma ideia do que deve ser o programa final:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13875/bouncing-evil-circle.png" style="display: block; margin: 0 auto;"></p> + +<ul> +</ul> + +<p>Para lhe dar mais uma ideia, dê uma olhada no <a href="http://mdn.github.io/learning-area/javascript/oojs/assessment/">exemplo finalizado</a> (não espreitar o código-fonte!)</p> + +<h2 id="Passos_para_concluir">Passos para concluir</h2> + +<p>As seções a seguir descrevem o que você precisa fazer.</p> + +<h3 id="Criando_nossos_novos_objetos">Criando nossos novos objetos</h3> + +<p>Primeiro de tudo, altere seu construtor <code>Ball()</code> existente para que ele se torne um construtor <code>Shape()</code> e adicione um novo construtor <code>Ball()</code>:</p> + +<ol> + <li>O construtor <code>Shape()</code> deve definir as propriedades <code>x</code>, <code>y</code>, <code>velX</code>, e <code>velY</code> da mesma maneira que o construtor <code>Ball()</code> fez originalmente, mas não as propriedades de <code>color</code> e <code>size</code>.</li> + <li>Também deve definir uma nova propriedade chamada <code>exists</code>, que é usada para rastrear se as bolas existem no programa (não foram comidas pelo círculo do mal). Este deve ser um booleano (<code>true</code>/<code>false</code>).</li> + <li>O construtor <code>Ball()</code> deve herdar as propriedades <code>x</code>, <code>y</code>, <code>velX</code>, <code>velY</code>, e <code>exists</code> do construtor <code>Shape()</code>.</li> + <li>Ele também deve definir uma propriedade <code>color</code> e uma <code>size</code>, como fez o construtor <code>Ball()</code> original.</li> + <li>Lembre-se de definir o <code>prototype</code> e o <code>constructor</code> do construtor <code>Ball()</code> adequadamente.</li> +</ol> + +<p>As definições do método ball <code>draw()</code>, <code>update()</code>, e <code>collisionDetect()</code> devem permanecer exatamente iguais às anteriores.</p> + +<p>Você também precisa adicionar um novo parâmetro à nova chamada de construtor <code>new Ball() ( ... )</code> — o parâmetro <code>exists</code> deve ser o quinto parâmetro, e deve receber um valor <code>true</code>.</p> + +<p>Neste ponto, tente recarregar o código — ele deve funcionar da mesma forma que antes, com nossos objetos redesenhados.</p> + +<h3 id="Definindo_EvilCircle()">Definindo EvilCircle()</h3> + +<p>Agora é hora de conhecer o cara mau — o <code>EvilCircle()</code>! Nosso jogo só envolverá um círculo maligno, mas ainda vamos defini-lo usando um construtor que herda de <code>Shape()</code> para lhe dar alguma prática. Você pode querer adicionar outro círculo ao aplicativo mais tarde, que pode ser controlado por outro jogador, ou ter vários círculos malignos controlados por computador. Você provavelmente não vai dominar o mundo com um único círculo maligno, mas fará por essa avaliação.</p> + +<p>O construtor <code>EvilCircle()</code> deve herdar <code>x</code>, <code>y</code>, <code>velX</code>, <code>velY</code>, e <code>exists</code> de <code>Shape()</code>, mas <code>velX</code> e <code>velY</code> devem sempre ser iguais a 20.</p> + +<p>Você deveria fazer algo como <code>Shape.call(this, x, y, 20, 20, exists);</code></p> + +<p>Ele também deve definir suas próprias propriedades, da seguinte maneira:</p> + +<ul> + <li><code>color</code> — <code>'white'</code></li> + <li><code>size</code> — <code>10</code></li> +</ul> + +<p>Novamente, lembre-se de definir suas propriedades herdadas como parâmetros no construtor e defina as propriedades <code>prototype</code> e <code>constructor</code> corretamente.</p> + +<h3 id="Definindo_os_métodos_de_EvilCircle()">Definindo os métodos de EvilCircle()</h3> + +<p><code>EvilCircle()</code> deve ter quatro métodos, conforme descrito abaixo.</p> + +<h4 id="draw()"><code>draw()</code></h4> + +<p>Este método tem o mesmo propósito que o método <code>draw()</code> de <code>Ball()</code>: Ele desenha a instância do objeto na tela. Ele funcionará de maneira muito semelhante, portanto, você pode começar copiando a definição <code>Ball.prototype.draw</code>. Você deve então fazer as seguintes alterações:</p> + +<ul> + <li>Nós queremos que o círculo do mal não seja preenchido, mas apenas tenha uma linha externa (traço). Você pode conseguir isso atualizando <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> e <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code> para <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle">strokeStyle</a></code> e <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/stroke">stroke()</a></code>.</li> + <li>Também queremos tornar o traço um pouco mais espesso, para que você possa ver o círculo maligno com mais facilidade. Isso pode ser obtido definindo um valor para <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth">lineWidth</a></code> em algum lugar após a chamada <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code> (3 será suficiente).</li> +</ul> + +<h4 id="checkBounds()"><code>checkBounds()</code></h4> + +<p>Este método fará a mesma coisa que a primeira parte da função <code>update()</code> do <code>Ball()</code> — olhe para ver se o círculo do mal vai sair da borda da tela, e pare de fazer isso. Novamente, você pode simplesmente copiar a definição de <code>Ball.prototype.update</code>, mas há algumas alterações que você deve fazer:</p> + +<ul> + <li>Livre-se das duas últimas linhas - não queremos atualizar automaticamente a posição do círculo maligno em todos os quadros, pois estaremos mudando isso de alguma outra forma, como você verá abaixo.</li> + <li>Dentro das instruções <code>if()</code>, se os testes retornam true, não queremos atualizar o <code>velX</code>/<code>velY</code>; Em vez disso, queremos alterar o valor de <code>x</code>/<code>y</code> para que o círculo maligno seja devolvido na tela um pouco. Adicionar ou subtrair (conforme apropriado) a propriedade <code>size</code> do círculo maligno faria sentido.</li> +</ul> + +<h4 id="setControls()"><code>setControls()</code></h4> + +<p>Esse método adicionará um ouvinte de evento <code>onkeydown</code> ao objeto <code>window</code> para que, quando determinadas teclas do teclado forem pressionadas, possamos mover o círculo maligno ao redor. O bloco de código a seguir deve ser colocado dentro da definição do método:</p> + +<pre class="brush: js">var _this = this; +window.onkeydown = function(e) { + if (e.keyCode === 65) { + _this.x -= _this.velX; + } else if (e.keyCode === 68) { + _this.x += _this.velX; + } else if (e.keyCode === 87) { + _this.y -= _this.velY; + } else if (e.keyCode === 83) { + _this.y += _this.velY; + } + }</pre> + +<p>Assim, quando uma tecla é pressionada, a propriedade <a href="/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a> é consultada para ver qual tecla é pressionada. Se for um dos quatro representados pelos códigos de teclas especificados, o círculo maligno se moverá para a esquerda / direita / para cima / para baixo.</p> + +<ul> + <li>Para um ponto de bônus, deixe-nos saber a quais chaves os códigos de teclas específicos estão mapeados.</li> + <li>Para outro ponto de bônus, você pode nos dizer por que precisamos definir <code>var _this = this;</code> na posição em que está? É algo a ver com o escopo da função.</li> +</ul> + +<h4 id="collisionDetect()"><code>collisionDetect()</code></h4> + +<p>Este método irá agir de forma muito semelhante ao método<code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> </span></font></code><code>collisionDetect()</code> do <code>Ball()</code>, então você pode usar uma cópia disso como base deste novo método. Mas há algumas diferenças:</p> + +<ul> + <li>Na declaração <code>if</code> externa, você não precisa mais verificar se a bola atual na iteração é igual à bola que está fazendo a verificação - porque ela não é mais uma bola, é o círculo do mal! Em vez disso, você precisa fazer um teste para ver se a bola que está sendo checada existe (com qual propriedade você poderia fazer isso?). Se não existe, já foi comido pelo círculo do mal, por isso não há necessidade de verificá-lo novamente.</li> + <li>Na instrução <code>if</code> interna, você não quer mais que os objetos mudem de cor quando uma colisão é detectada — em vez disso, você quer definir quaisquer bolas que colidam com o círculo maligno para não existir mais (novamente, como você pensa? d fazer isso?).</li> +</ul> + +<h3 id="Trazendo_o_círculo_do_mal_para_o_programa">Trazendo o círculo do mal para o programa</h3> + +<p>Agora nós definimos o círculo do mal, precisamos realmente fazer isso aparecer em nossa cena. Para fazer isso, você precisa fazer algumas alterações na função <code>loop()</code>.</p> + +<ul> + <li>Primeiro de tudo, crie uma nova instância de objeto do círculo do mal (especificando os parâmetros necessários) e, em seguida, chame seu método <code>setControls()</code>. Você só precisa fazer essas duas coisas uma vez, não em todas as iterações do loop.</li> + <li>No ponto em que você percorre todas as bolas e chama as funções <code>draw()</code>, <code>update()</code>, e <code>collisionDetect()</code> para cada uma, faça com que essas funções sejam chamadas apenas se a bola atual existir.</li> + <li>Chame os métodos <code>draw()</code>, <code>checkBounds()</code>, e <code>collisionDetect()</code> da instância do mal ball em cada iteração do loop.</li> +</ul> + +<h3 id="Implementando_o_contador_de_pontuação">Implementando o contador de pontuação</h3> + +<p>Para implementar o contador de pontuação, siga os seguintes passos:</p> + +<ol> + <li>No seu arquivo HTML, adicione um elemento {{HTMLElement("p")}} logo abaixo do elemento {{HTMLElement("h1")}} contendo o texto "Contagem de bolas:".</li> + <li>No seu arquivo CSS, adicione a seguinte regra na parte inferior: + <pre class="brush: css">p { + position: absolute; + margin: 0; + top: 35px; + right: 5px; + color: #aaa; +}</pre> + </li> + <li>Em seu JavaScript, faça as seguintes atualizações: + <ul> + <li>Crie uma variável que armazene uma referência ao parágrafo.</li> + <li>Mantenha uma contagem do número de bolas na tela de alguma forma.</li> + <li>Incrementar a contagem e exibir o número atualizado de bolas cada vez que uma bola é adicionada à cena.</li> + <li>Decrementar a contagem e exibir o número atualizado de bolas cada vez que o círculo maligno come uma bola (faz com que ele não exista).</li> + </ul> + </li> +</ol> + +<h2 id="Dicas_e_sugestões">Dicas e sugestões</h2> + +<ul> + <li>Essa avaliação é bastante desafiadora. Tome cada passo devagar e com cuidado.</li> + <li>Pode ser uma idéia manter uma cópia separada da demo depois que você fizer com que cada estágio funcione, para que você possa consultá-la caso se encontre em apuros mais tarde.</li> +</ul> + +<h2 id="Avaliação">Avaliação</h2> + +<p>Se você está seguindo esta avaliação como parte de um curso organizado, você deve poder dar seu trabalho ao seu professor / mentor para marcação. Se você é auto-didata, então você pode obter o guia de marcação com bastante facilidade, perguntando no tópico de <a href="https://discourse.mozilla.org/t/adding-features-to-our-bouncing-balls-demo-assessment/24689">discussão para este exercício</a>, ou no canal de <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC da <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Tente o exercício primeiro — não há nada a ganhar com a trapaça!</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</p> + +<p> </p> + +<h2 id="Neste_módulo">Neste módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li> +</ul> + +<p> </p> diff --git a/files/pt-br/learn/javascript/objects/basics/index.html b/files/pt-br/learn/javascript/objects/basics/index.html new file mode 100644 index 0000000000..ef9cb18c95 --- /dev/null +++ b/files/pt-br/learn/javascript/objects/basics/index.html @@ -0,0 +1,258 @@ +--- +title: O básico sobre objetos JavaScript +slug: Aprender/JavaScript/Objetos/Básico +translation_of: Learn/JavaScript/Objects/Basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">Neste artigo, veremos a sintaxe fundamental de objetos JavaScript e revisitaremos alguns recursos JavaScript vistos anteriormente no curso, reiterando o fato de que muitos dos recursos que você já utilizou são objetos.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requisitos:</th> + <td>Interação básica com o computador, entendimento básico de HTML e CSS, familiaridade com o básico de JavaScript (ver <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Elementos construtivos</a>).</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Entender a teoria básica por trás da programação orientada a objetos, como isso se relaciona com o JavaScript ("quase tudo é objeto"), e como começar a trabalhar com objetos JavaScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Objeto_noções_básicas">Objeto, noções básicas</h2> + +<p>Um objeto é uma coleção de dados e/ou funcionalidades relacionadas (que geralmente consistem em diversas variáveis e funções — que são chamadas de propriedades e métodos quando estão dentro de objetos). Vamos trabalhar com um exemplo para entender como eles são.</p> + +<p>Para começar, faça uma cópia do nosso arquivo <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a>. Isto contém muito pouco — um elemento {{HTMLElement("script")}} para escrevermos nosso código-fonte. Vamos usar isto como base para explorar a sintaxe básica do objeto. Ao trabalhar com este exemplo, você deve ter seu <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">console de ferramentas de desenvolvedor JavaScript</a> aberto e pronto para digitar alguns comandos.</p> + +<p>Como acontece com muitas coisas em JavaScript, a criação de um objeto geralmente começa com a definição e a inicialização de uma variável. Tente digitar o código a seguir no arquivo que você baixou, salve e atualize:</p> + +<pre class="brush: js notranslate">var pessoa = {};</pre> + +<p>Se você inserir <code>pessoa</code> no seu console JS e pressionar o botão, deverá obter o seguinte resultado:</p> + +<pre class="brush: js notranslate">[object Object]</pre> + +<p>Parabéns, você acabou de criar seu primeiro objeto. Tarefa concluída! Mas este é um objeto vazio, então não podemos fazer muita coisa com isso. Vamos atualizar nosso objeto para ficar assim:</p> + +<pre class="brush: js notranslate">var pessoa = { + nome: ['Bob', 'Smith'], + idade: 32, + sexo: 'masculino', + interesses: ['música', 'esquiar'], + bio: function() { + alert(this.nome[0] + ' ' + this.nome[1] + ' tem ' + this.idade + ' anos de idade. Ele gosta de ' + this.interesses[0] + ' e ' + this.interesses[1] + '.'); + }, + saudacao: function() { + alert('Oi! Eu sou ' + this.nome[0] + '.'); + } +}; +</pre> + +<p>Depois de salvar e atualizar, tente inserir alguns dos itens a seguir no console JavaScript no devtools do seu navegador:</p> + +<pre class="brush: js notranslate">pessoa.nome +pessoa.nome[0] +pessoa.idade +pessoa.interesses[1] +pessoa.bio() +pessoa.saudacao()</pre> + +<p>Agora você tem alguns dados e funcionalidades dentro de seu objeto e é capaz de acessá-los com uma sintaxe simples e agradável!</p> + +<div class="note"> +<p><strong>Nota</strong>: Se você está tendo problemas para fazer isto funcionar, tente comparar seu código com a nossa versão — veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (ou <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">veja um exemplo funcionando</a>). O exemplo lhe dará uma tela em branco, mas tudo bem — novamente, abra seu devtools e tente digitar os comandos acima para ver a estrutura do objeto.</p> +</div> + +<p>Então, o que está acontecendo? Bem, um objeto é composto de vários membros, cada um com um nome (ex.: <code>nome</code> e <code>idade</code> vistos acima), e um valor (ex.: <code>['Bob', 'Smith']</code> e <code>32</code>). Cada par nome/valor deve ser separado por uma vírgula e o nome e valor, em cada caso, separados por dois pontos. A sintaxe sempre segue esse padrão:</p> + +<pre class="brush: js notranslate">var nomeDoObjeto = { + nomeMembro1: valorMembro1, + nomeMembro2: valorMembro2, + nomeMembro3: valorMembro3 +};</pre> + +<p>O valor de um membro do objeto pode ser praticamente qualquer coisa. Em nosso objeto pessoa, temos uma string, um número, dois arrays e duas functions. Os primeiros quatro são data items (dados) e são referenciados como <strong>propriedades</strong> do objeto. Enquanto os dois últimos ítens são funções que permitem que o objeto faça algo com esses dados. São chamados de <strong>métodos </strong>do objeto.</p> + +<p>Um objeto como esse é chamado de <strong>objeto literal</strong> — ao pé da letra, escrevemos o conteúdo do objeto conforme o criamos. Isto está em contraste com objetos instanciados de classes, que veremos mais adiante.</p> + +<p>É muito comum criar um objeto usando um objeto literal quando você deseja transferir uma série de itens de dados relacionados estruturados de alguma maneira, por exemplo, enviando uma solicitação para o servidor para ser colocado em um banco de dados. Enviar um único objeto é muito mais eficiente do que enviar vários itens individualmente, e é mais fácil trabalhar com um array, quando você deseja identificar itens individuais pelo nome.</p> + +<h2 id="Notação_de_ponto">Notação de ponto</h2> + +<p>Acima, você acessou as propriedades de objetos e métodos usando <strong>notação de ponto</strong>. O objeto nome (pessoa) atua como <strong>namespace </strong>(espaço de nomes) — ele deve ser digitado primeiro para que você acesse qualquer coisa <strong>encapsulada </strong>dentro do objeto. Depois você escreve um ponto, então o item que quer acessar — isso pode ser o nome de uma simples propriedade, um item de um array ou a chamada para um dos métodos do objeto, por exemplo: </p> + +<pre class="brush: js notranslate">pessoa.idade +pessoa.interesse[1] +pessoa.bio()</pre> + +<h3 id="Sub-namespaces">Sub-namespaces</h3> + +<p>É até possível fazer o valor de um membro de um objeto ser outro objeto. Por exemplo, tente alterar o nome do membro de:</p> + +<pre class="brush: js notranslate">nome: ['Bob', 'Smith'],</pre> + +<p>para</p> + +<pre class="brush: js notranslate">nome : { + primeiro: 'Bob', + ultimo: 'Smith' +},</pre> + +<p>Aqui estamos efetivamente criando um <strong>sub-namespace</strong>. Parece difícil, mas não é — para acessar esses itens você apenas precisa encadear mais um passo ao final de outro ponto. Tente isso aqui no console:</p> + +<pre class="brush: js notranslate">pessoa.nome.primeiro +pessoa.nome.ultimo</pre> + +<p><strong>Importante</strong>: Nesse ponto você também precisará revisar seus métodos e mudar quaisquer instâncias de</p> + +<pre class="brush: js notranslate">nome[0] +nome[1]</pre> + +<p>para</p> + +<pre class="brush: js notranslate">nome.primeiro +nome.ultimo</pre> + +<p>Caso contrário seus métodos não funcionarão.</p> + +<h2 id="Notação_de_colchetes">Notação de colchetes</h2> + +<p>Há outra forma de acessar propriedades do objeto — usando notação de colchetes. Ao invés desses:</p> + +<pre class="brush: js notranslate">pessoa.idade +pessoa.nome.primeiro</pre> + +<p>Você pode usar:</p> + +<pre class="brush: js notranslate">pessoa['idade'] +pessoa['nome']['primeiro']</pre> + +<p>Fica muito parecido com a maneira que acessamos itens de um array, e é basicamente a mesma coisa, só que ao invés de usarmos um número de índice para selecionar um item, usamos o nome associado a cada valor. Não é por menos que objetos às vezes são chamados de <strong>arrays associativos</strong> — eles mapeiam strings a valores do mesmo modo que arrays mapeiam números a valores.</p> + +<h2 id="Setando_membros_do_objeto">Setando membros do objeto</h2> + +<p>Até agora nós apenas procuramos receber (ou <strong>apanhar</strong>) membros de objetos — podemos também <strong>setar </strong>(atualizar) o valor de membros de objetos simplesmente declarando o membro que queremos setar (usando notação de ponto ou colchete), tipo assim:</p> + +<pre class="brush: js notranslate">pessoa.idade = 45; +pessoa['nome']['ultimo'] = 'Cratchit';</pre> + +<p>Tente escrever as linhas acima e então apanhar seus membros novamente para ver como mudaram. Assim:</p> + +<pre class="brush: js notranslate">pessoa.idade +pessoa['nome']['ultimo']</pre> + +<p>Não podemos apenas atualizar valores existentes de propriedades e métodos; podemos também criar membros completamente novos. Tente isso aqui no console:</p> + +<pre class="brush: js notranslate">pessoa['olhos'] = 'castanho'. +pessoa.despedida = function() { alert( "Adeus a todos!" ); }</pre> + +<p>Podemos testar nossos novos membros:</p> + +<pre class="brush: js notranslate">pessoa['olhos']; +pessoa.despedida();</pre> + +<p>Um aspecto útil de notação de colchetes é que ela pode ser usadada não apenas para setar valores dinamicamente, mas também nomes de membros. Vamos dizer que queremos que usuários possam armazenar tipos de valores personalizados em seus dados de 'pessoa', digitando o nome e o valor do membro em dois inputs de texto. Podemos obter esses valores dessa forma:</p> + +<pre class="brush: js notranslate">var myDataName = nameInput.value; +var myDataValue = nameValue.value;</pre> + +<p>Podemos, então, adicionar esse novo nome e valor ao objeto <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">pessoa</span></font> assim:</p> + +<pre class="brush: js notranslate">pessoa[myDataName] = myDataValue;</pre> + +<p>Para testar isso, tente adicionar as seguinte linhas em seu código, abaixo do fechamento da chaves do objeto <code>pessoa</code> :</p> + +<pre class="brush: js notranslate">var myDataName = 'altura'; +var myDataValue = '1.75m'; +pessoa[myDataName] = myDataValue;</pre> + +<p>Agora tente salvar e atualizar, entrando o seguinte no seu input de texto:</p> + +<pre class="brush: js notranslate">pessoa.altura</pre> + +<p>Adicionar uma propriedade a um objeto usando o método acima não é possível com a notação ponto, que só aceita um nome de membro literal, não aceita valor de variável apontando para um nome.</p> + +<h2 id="O_que_é_o_this">O que é o "this"?</h2> + +<p>Você pode ter reparado algo levemente estranho em nossos métodos. Olhe esse aqui, por exemplo:</p> + +<pre class="brush: js notranslate">saudacao: function(){ + alert("Oi! Meu nome é " + this.nome.primeiro + "."); +}</pre> + +<p>Você deve estar se perguntando o que é o "this". A palavra-chave <code>this</code> se refere ao objeto atual em que o código está sendo escrito — nesse caso o <code>this</code> se refere a <code>pessoa</code>. Então por que simplesmente não escrever <code>pessoa</code>? Como verá no artigo <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Orientaçã a objeto em JavaScript para iniciantes</a>, quando começamos a criar funções construtoras, etc, o <code>this</code> é muito útil — sempre lhe assegurará que os valores corretos estão sendo usados quando o contexto de um mebro muda (exemplo: duas instâncias diferentes do objeto <code>pessoa</code> podem ter diferentes nomes, mas vão querer usar seu próprio nome ao usar a saudação).</p> + +<p>Vamos ilustrar o que queremos dizer com um par de objetos pessoa:</p> + +<pre class="brush: js notranslate">var pessoa1 = { + nome: 'Chris', + saudacao: function() { + alert('Oi! Meu nome é ' + this.nome + '.'); + } +} + +var pessoa2 = { + nome: 'Brian', + saudacao: function() { + alert('Oi! Meu nome é ' + this.nome + '.'); + } +} </pre> + +<p>Neste caso, <code>pessoa1.saudacao()</code><strong> </strong>gerará "Oi! Meu nome é Chris."; No entanto, <code>pessoa2.saudacao()</code><strong> </strong>retornará "Oi! Meu nome é Brian.", mesmo que os códigos dos métodos sejam idênticos. Como dissemos antes, o <code>this</code> é igual ao código do objeto dentro dele — não é exatamente útil quando estamos escrevendo objetos literais na mão, mas é realmente incrível quando adicionamos objetos gerados dinamicamente (por exemplo usando construtores). Tudo ficará mais claro mais para frente.</p> + +<h2 id="Você_vem_usando_objetos_o_tempo_todo">Você vem usando objetos o tempo todo</h2> + +<p>Enquanto passava por esses exemplos, você provavelmente andou pensando que essa notação de ponto que estamos usando é muito familiar. Isso é porque você vem usando isso durante todo o curso! Todas as vezes que trabalhamos num exemplo que usa uma API interna do navegador ou objetos Javascript, estamos usando objetos, porque esses recursos são construídos usando exatamente o mesmo tipo de estrutura de objetos que vimos aqui, embora mais complexos do que nossos exemplos básicos.</p> + +<p>Então quando usamos métodos de strings como:</p> + +<pre class="brush: js notranslate">minhaString.split(',');</pre> + +<p>Estamos usando um método disponível na instância da class <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. Toda vez que você cria uma string em seu código, essa string é automaticamente criada como uma instância de <code>String</code>, e, portanto, possui vários métodos e propriedades comuns que estão disponíveis para ela.</p> + +<p>Quando você acessa o document object model usando linhas como estas:</p> + +<pre class="brush: js notranslate">var minhaDiv = document.createElement('div'); +var meuVideo = document.querySelector('video');</pre> + +<p>Você está usando métodos disponíveis na instância da class <code><a href="/en-US/docs/Web/API/Document">Document</a></code>. Cada vez que a página é recarrecada, uma instância de <code>Document</code> é criada, chamando <code>document</code>, que representa a estrutura inteira da página, conteúdo e outros recursos como sua URL. Novamente, isso significa que ela tem vários métodos e propriedades disponíveis nela.</p> + +<p>O mesmo pode ser dito de basicamente qualquer outro objeto/API embutido que esteja usando — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, etc.</p> + +<p>Note que Objetos/APIs embutidos nem sempre criam instâncias de objetos automaticamente. Por exemplo, a <a href="/en-US/docs/Web/API/Notifications_API">API de Notificações </a>— que permite que navegadores modernos disparem notificações de sistema — requerem que você inicialize uma nova instância de objeto usando o construtor para cada notificação que queira disparar. Tente entrar o seguinte no seu console Javascript:</p> + +<pre class="brush: js notranslate">var minhaNotificacao = new Notification('Hello!');</pre> + +<p>Novamente, olharemos constructores num artigo mais na frente.</p> + +<div class="note"> +<p><strong>Nota</strong>: É útil pensar sobre como os objetos se comunicam <strong>passando mensagens</strong> - quando um objeto precisa de outro objeto para realizar algum tipo de ação, ele freqüentemente enviará uma mensagem para outro objeto através de um de seus métodos e aguardará uma resposta, que reconhecemos como um valor de retorno.</p> +</div> + +<h2 id="Teste_suas_habilidades_!">Teste suas habilidades !</h2> + +<p>Você chegou ao fim desse artigo,entretanto você consegue lembrar as informações mais importantes? Você pode encontrar mais testes para verificar se você consolidou as informações antes que você siga adiante — veja <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object_basics">Test your skills: Object basics</a>.</p> + +<h2 id="Resumo">Resumo</h2> + +<p>Parabéns, você chegou ao final de nosso primeiro artigo sobre objetos JS - agora você deve ter uma boa ideia de como trabalhar com objetos em Javascript - incluindo criar seus próprio objetos simples. Você também deve perceber que objetos são muito úteis como estruturas para armazenar dados e funcionalidades relacionadas - se tentar rastrear todas as propriedades e métodos do nosso objeto <code>pessoa</code> como variáveis e funções separadas, isso seria ineficiente e frustrante e correríamos o risco de termos outras variáveis e funções com o mesmo nome. Objetos nos permite manter informações guardadas em segurança em seus próprios pacotes, fora de perigo.</p> + +<p>No próximo artigo vamos começar a ver a teoria de programação orientada a objetos (OOP) e em como suas técnicas podem ser usadas em Javascript.</p> + +<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p> + +<h2 id="Nesse_módulo">Nesse módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Noções Básicas de Objetos</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Orientação a objetos Javascript para iniciantes</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Protótipos de Objetos</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Herança no Javascript</a></li> + <li><a href="/pt-BR/docs/Aprender/JavaScript/Objetos/JSON">Trabalhando com JSON</a></li> + <li><a href="/pt-BR/docs/Aprender/JavaScript/Objetos/Object_building_practice">Prática de construção de Objetos</a></li> + <li><a href="/pt-BR/docs/Aprender/JavaScript/Objetos/Adding_bouncing_balls_features">Adicionando recursos à nossa demonstração de bolas pulantes</a></li> +</ul> diff --git a/files/pt-br/learn/javascript/objects/index.html b/files/pt-br/learn/javascript/objects/index.html new file mode 100644 index 0000000000..4c19a1956b --- /dev/null +++ b/files/pt-br/learn/javascript/objects/index.html @@ -0,0 +1,44 @@ +--- +title: Introdução a objetos em Javascript +slug: Aprender/JavaScript/Objetos +tags: + - Iniciante + - JavaScript + - Objetos +translation_of: Learn/JavaScript/Objects +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Em JavaScript, quase tudo é objeto. Desde as funcionalidades padrão, como strings e arrays, até as APIs para navegadores baseadas na linguagem. Até você pode criar seus próprios objetos. Você pode encapsular funções e variáveis relacionadas de uma forma eficiente. Os objetos agem como uma espécie de manipuladores de dados. Compreender a natureza da orientação a objetos do JavaScript é crucial para aprofundar os conhecimentos acerca da linguagem. Por isso, nós elaboramos esse módulo para auxiliá-lo. Ensinaremos a teoria de objetos em detalhes. Crie seus próprios objetos!</p> + +<p>Antes de iniciar este módulo, você deve possuir alguma familiaridade com HTML e CSS. Se não possui, antes de continuar os estudos dos Objetos em Javascript, indicamos os módulos <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Introdução ao HTML</a> e <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introdução ao CSS</a> .</p> + +<p>Você precisa possuir também alguma familiaridade com os conceitos básicos de Javascript. Para isso indicamos o módulo <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeitos Passos: JavaScript</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Blocos de Construção do JavaScript</a>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Se você está trabalhando em um computador/tablet/outros equipamentos , ao qual não é possível criar seus próprios arquivos , você pode testar (em grande parte) os nossos códigos de exemplo, em um editor de código online , tal como o JSBin ou o Thimble .</p> +</div> + +<h2 id="Guias">Guias</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Objetos/B%C3%A1sico">Objetos: O básico.</a></dt> + <dd>No primeiro artigo sobre objetos em Javascript, vamos analisar a sintaxe básica de objetos e rever algumas caracterísitcas. Nós já notamos, como mencionado anteriomente, que muitas funcionalidades que você já teve algum contato são, na verdade, Objetos .</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">JavaScript Orientado a Objetos para iniciantes</a></dt> + <dd>Com pelo menos o básico, agora vamos focar na Orientação a Objetos JavaScript (OOJS) — este artigo cobre uma visão básica da teoria da Programação Orientada a Objetos (POO). Depois iremos explorar como o JavaScript emula classes de objetos via funções construtoras e como criar instâncias de objetos.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Prototipação de Objetos</a></dt> + <dd>Prototypes é o mecanismo pelo qual os objetos JavaScript herdam características de outros e como eles funcionam de uma forma diferente dos mecanismos de herança de linguagens de programação clássicas. Neste artigo, vamos explorar essas diferenças, explicar como a cadeia de protótipos trabalha e perceber como a propriedade prototype pode ser usada para adicionar métodos a contrutores existentes.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Herança em JavaScript</a></dt> + <dd>Com a parte central da OOJS já explicada, este artigo mostra como criar classes de objetos "filhos" (construtores) que herdam características das suas classes "pais". Nós daremos ainda algumas dicas sobre quando e onde você pode usar OOJS.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Trabalhando com dados JSON</a></dt> + <dd>JavaScript Object Notation (JSON) é um formato padronizado para representar estruturas de dados em objetos JavaScript, que é comunmente usado para representar e transmitir dados em sites da web (i.e. enviar alguma informação do serviror para o cliente, para ser exibido na página). Neste artigo vamos mostrar o que você precisa para trabalhar com JSON usando JavaScript, inclusive acesso a itens de dados num objeto JSON. Além disso, mostraremos como criar seu próprio JSON.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Prática de Construção de Objetos</a></dt> + <dd>No artigo anterior, nós vimos toda a parte essencial da teoria de Objetos em JavaScript, além de detalhes de sintaxe, fornecendo assim uma base sólida para você seguir adiante. No presente artigo, vamos nos aprofundar com exercícios práticos na construção de objetos personalizados. Faremos algo divertido e colorido — algumas bolas coloridas saltitantes!</dd> +</dl> + +<h2 id="Aprender_mais...">Aprender mais...</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Acrescentando funcionalidades a nossa demo de bolas saltitantes </a></dt> + <dd>Nesse "aprenda mais...", incentivamos você a usar a demo das bolas saltitantes do artigo anterior como ponto de partida para acrescentar algumas novas e interessantes funcionalidades.</dd> +</dl> diff --git a/files/pt-br/learn/javascript/objects/inheritance/index.html b/files/pt-br/learn/javascript/objects/inheritance/index.html new file mode 100644 index 0000000000..81acc88a92 --- /dev/null +++ b/files/pt-br/learn/javascript/objects/inheritance/index.html @@ -0,0 +1,402 @@ +--- +title: Herança em JavaScript +slug: Aprender/JavaScript/Objetos/Herança +translation_of: Learn/JavaScript/Objects/Inheritance +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">Com a maior parte dos detalhes principais do OOJS agora explicados, este artigo mostra como criar classes de objetos "child" (construtores) que herdam recursos de suas classes "parent". Além disso, apresentamos alguns conselhos sobre quando e onde você pode usar o OOJS e veja como as classes são tratadas na sintaxe moderna do ECMAScript.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requisitos:</th> + <td>Conhecimento básico de computação, conhecimento básico de HTML e CSS, familiaridade com com o básico de Javascript (veja <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Construindo blocos</a>) e OOJS básico (veja <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introdução a objetos</a>).</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Entender como é possível implementar a herança em Javascript.</td> + </tr> + </tbody> +</table> + +<h2 id="Herança_Prototipada">Herança Prototipada</h2> + +<p>Até agora vimos alguma herança em ação — vimos como funcionam as cadeias de protótipos e como os membros são herdados subindo em uma cadeia. Mas principalmente isso envolveu funções internas do navegador. Como criamos um objeto em JavaScript que herda de outro objeto?</p> + +<p>Vamos explorar como fazer isso com um exemplo concreto.</p> + +<h2 id="Começando">Começando</h2> + +<p>Primeiro de tudo, faça uma cópia local do arquivo <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a> (veja também <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">ao vivo</a>). Aqui dentro você encontrará o mesmo exemplo de construtor <code>Person()</code> que utilizamos durante todo o módulo, com uma pequena diferença — definimos apenas as propriedades dentro do construtor:</p> + +<pre class="brush: js">function Person(first, last, age, gender, interests) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; +};</pre> + +<p>Os métodos são <em>todos </em>definidos no protótipo do construtor. Por exemplo:</p> + +<pre class="brush: js">Person.prototype.greeting = function() { + alert('Hi! I\'m ' + this.name.first + '.'); +};</pre> + +<div class="note"> +<p><strong>Nota</strong>: No código fonte, você também verá os métodos <code>bio()</code> e <code>farewell()</code> definidos. Depois você verá como eles podem ser herdados por outros construtores.</p> +</div> + +<p>Digamos que quiséssemos criar uma classe <code>Teacher</code>, como a que descrevemos em nossa definição inicial orientada a objetos, que herda todos os membros de <code>Person</code>, mas também inclui:</p> + +<ol> + <li>Uma nova propriedade, <code>subject</code> — isso irá conter o assunto que o professor ensina.</li> + <li>Um método <code>greeting()</code> atualizado, que soa um pouco mais formal do que o método padrão <code>greeting()</code> — mais adequado para um professor que se dirige a alguns alunos da escola.</li> +</ol> + +<h2 id="Definindo_uma_função_construtora_Teacher">Definindo uma função construtora Teacher()</h2> + +<p>A primeira coisa que precisamos fazer é criar um construtor <code>Teacher()</code> — adicione o seguinte abaixo do código existente:</p> + +<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) { + Person.call(this, first, last, age, gender, interests); + + this.subject = subject; +}</pre> + +<p>Isto parece similar ao construtor Person de várias maneiras, mas há algo estranho aqui que nós não vimos antes — a função <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code>. Esta função basicamente permite chamar uma função definida em outro lugar, mas no contexto atual. O primeiro parâmetro especifica o valor <code>this</code> que você deseja usar ao executar a função, e os outros parâmetros são aqueles que devem ser passados para a função quando ela é invocada.</p> + +<p>Nós queremos que o construtor <code>Teacher()</code> pegue os mesmos parâmetros que o construtor <code>Person()</code> de onde ele está herdando, então especificamos todos eles como parâmetros na chamada <code>call()</code>.</p> + +<p>A última linha dentro do construtor simplesmente define a nova propriedade <code>subject</code> que os professores terão, que pessoas genéricas não possuem.</p> + +<p>Como nota, poderíamos simplesmente ter feito isso:</p> + +<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + this.subject = subject; +}</pre> + +<p>Mas isso é apenas redefinir as propriedades de novo, não herdá-las de <code>Person()</code>, de modo que ela derrota o ponto que estamos tentando fazer. Também leva mais linhas de código.</p> + +<h3 id="Herdando_de_um_construtor_sem_parâmetros">Herdando de um construtor sem parâmetros</h3> + +<p>Observe que, se o construtor do qual você está herdando não tomar seus valores de propriedade de parâmetros, não será necessário especificá-los como argumentos adicionais em <code>call()</code>. Então, por exemplo, se você tivesse algo realmente simples assim:</p> + +<pre class="brush: js">function Brick() { + this.width = 10; + this.height = 20; +}</pre> + +<p>Você pode herdar as propriedades <code>width</code> e <code>height</code> fazendo isso (assim como as outras etapas descritas abaixo, é claro):</p> + +<pre class="brush: js">function BlueGlassBrick() { + Brick.call(this); + + this.opacity = 0.5; + this.color = 'blue'; +}</pre> + +<p>Observe que apenas especificamos <code>this</code> dentro de <code>call()</code> — nenhum outro parâmetro é necessário, já que não estamos herdando propriedades do pai que são configuradas por meio de parâmetros.</p> + +<h2 id="Definindo_o_protótipo_e_referência_de_construtor_do_Teacher">Definindo o protótipo e referência de construtor do Teacher()</h2> + +<p>Tudo está bem até agora, mas nós temos um problema. Nós definimos um novo construtor, e ele tem uma propriedade <code>prototype</code>, que por padrão apenas contém uma referência à própria função construtora. Ele não contém os métodos da propriedade <code>prototype</code> do construtor Person. Para ver isso, insira <code>Object.getOwnPropertyNames(Teacher.prototype)</code> no campo de entrada de texto ou no seu console JavaScript. Em seguida, insira-o novamente, substituindo <code>Teacher</code> por <code>Person</code>. O novo construtor também não herda esses métodos. Para ver isso, compare as saídas de <code>Person.prototype.greeting</code> e <code>Teacher.prototype.greeting</code>. Precisamos obter <code>Teacher()</code> para herdar os métodos definidos no protótipo <code>Person()</code>. Então, como fazemos isso?</p> + +<ol> + <li>Adicione a seguinte linha abaixo da sua adição anterior: + <pre class="brush: js">Teacher.prototype = Object.create(Person.prototype);</pre> + Aqui nosso amigo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> vem para o resgate novamente. Nesse caso, estamos usando para criar um novo objeto e torná-lo o valor de <code>Teacher.prototype</code>. O novo objeto tem <code>Person.prototype</code> como seu protótipo e, portanto, herdará, se e quando necessário, todos os métodos disponíveis no <code>Person.prototype</code>.</li> + <li>Precisamos fazer mais uma coisa antes de prosseguirmos. Depois de adicionar a última linha, a propriedade <code>constructor</code> de <code>Teacher.</code><code>prototype</code> agora é igual a <code>Person()</code>, porque apenas definimos <code>Teacher.prototype</code> para fazer referência a um objeto que herda suas propriedades de <code>Person.prototype</code>! Tente salvar seu código, carregar a página em um navegador e inserir <code>Teacher.prototype.constructor</code> no console para verificar.</li> + <li>Isso pode se tornar um problema, então precisamos definir isso corretamente. Você pode fazer isso voltando ao seu código-fonte e adicionando a seguinte linha na parte inferior: + <pre class="brush: js">Object.defineProperty(Teacher.prototype, 'constructor', { + value: Teacher, + enumerable: false, // so that it does not appear in 'for in' loop + writable: true });</pre> + </li> + <li>Agora, se você salvar e atualizar, entrar em <code>Teacher.prototype.constructor</code> deve retornar <code>Teacher()</code>, conforme desejado, além de estarmos herdando de <code>Person()</code>!</li> +</ol> + +<h2 id="Dar_a_Teacher_uma_nova_função_greeting">Dar a Teacher() uma nova função greeting() </h2> + +<p>Para finalizar nosso código, precisamos definir uma nova função <code>greeting()</code> no construtor <code>Teacher()</code>.</p> + +<p>A maneira mais fácil de fazer isso é defini-lo no protótipo do <code>Teacher()</code> — adicione o seguinte na parte inferior do seu código:</p> + +<pre class="brush: js">Teacher.prototype.greeting = function() { + var prefix; + + if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') { + prefix = 'Mr.'; + } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') { + prefix = 'Mrs.'; + } else { + prefix = 'Mx.'; + } + + alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.'); +};</pre> + +<p>Isso alerta a saudação do professor, que também usa um prefixo de nome apropriado para seu gênero, elaborado usando uma instrução condicional.</p> + +<h2 id="Testando_o_exemplo">Testando o exemplo</h2> + +<p>Agora que você digitou todo o código, tente criar uma instância de objeto do <code>Teacher()</code> colocando o seguinte na parte inferior do seu JavaScript (ou algo semelhante à sua escolha):</p> + +<pre class="brush: js">var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre> + +<p>Agora salve e atualize e tente acessar as propriedades e os métodos do novo objeto <code>teacher1</code>, por exemplo:</p> + +<pre class="brush: js">teacher1.name.first; +teacher1.interests[0]; +teacher1.bio(); +teacher1.subject; +teacher1.greeting(); +teacher1.farewell();</pre> + +<p>Tudo isso deve funcionar bem. As consultas nas linhas 1, 2, 3 e 6 acessam membros herdados do construtor genérico <code>Person()</code> (class). A consulta na linha 4 acessa um membro que está disponível somente no construtor mais especializado <code>Teacher()</code> (class). A consulta na linha 5 teria acessado um membro herdado de <code>Person()</code>, exceto pelo fato de que <code>Teacher()</code> tem seu próprio membro com o mesmo nome, portanto, a consulta acessa esse membro.</p> + +<div class="note"> +<p><strong>Note</strong>: If you have trouble getting this to work, compare your code to our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html">finished version</a> (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">running live</a> also).</p> +</div> + +<p>A técnica que abordamos aqui não é a única maneira de criar classes herdadas em JavaScript, mas funciona bem e dá uma boa idéia sobre como implementar a herança em JavaScript.</p> + +<p>Você também pode estar interessado em conferir alguns dos novos recursos {{glossary("ECMAScript")}} que nos permitem fazer herança mais claramente em JavaScript (veja <a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a>). Nós não cobrimos esses aqui, pois eles ainda não são suportados amplamente pelos navegadores. Todas as outras construções de código que discutimos neste conjunto de artigos são suportadas desde o IE9 ou anterior, e existem maneiras de obter suporte anterior a isso.</p> + +<p>Uma maneira comum é usar uma biblioteca JavaScript — a maioria das opções populares tem um conjunto fácil de funcionalidade disponível para fazer herança com mais facilidade e rapidez. <a href="http://coffeescript.org/#classes">CoffeeScript</a> por exemplo, fornece <code>class</code>, <code>extends</code>, etc.</p> + +<h2 id="Um_exercício_adicional">Um exercício adicional</h2> + +<p>Em nossa <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">seção de teoria OOP</a>, incluímos também uma classe <code>Student</code> como um conceito, que herda todos os recursos de <code>Person</code>, e também tem um método <code>greeting()</code> diferente de <code>Person</code> que é muito mais informal do que a saudação do <code>Teacher</code>. Dê uma olhada na aparência da saudação do aluno nessa seção e tente implementar seu próprio construtor <code>Student()</code> que herda todos os recursos de <code>Person()</code>, e implemente a função <code>greeting()</code> diferente.</p> + +<div class="note"> +<p><strong>Note</strong>: If you have trouble getting this to work, have a look at our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html">finished version</a> (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">running live</a> also).</p> +</div> + +<h2 id="Sumário_de_membro_do_objeto">Sumário de membro do objeto</h2> + +<p>Resumindo, você basicamente tem três tipos de propriedade / método para se preocupar:</p> + +<ol> + <li>Aqueles definidos dentro de uma função construtora que são dadas a instâncias de objetos. Estes são bastante fáceis de detectar — em seu próprio código personalizado, eles são os membros definidos dentro de um construtor usando as linhas <code>this.x = x</code> ; no código do navegador, eles são os membros disponíveis apenas para instâncias de objetos (geralmente criados chamando um construtor usando a palavra-chave <code>new</code>, por exemplo, <code>var myInstance = new myConstructor()</code>).</li> + <li>Aqueles definidos diretamente no próprio construtor, que estão disponíveis apenas no construtor. Geralmente, eles estão disponíveis apenas em objetos de navegador internos e são reconhecidos por serem encadeados diretamente em um construtor, não em uma instância. Por exemplo, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>.</li> + <li>Aqueles definidos no protótipo de um construtor, que são herdados por todas as instâncias e herdam as classes de objetos. Estes incluem qualquer membro definido na propriedade de protótipo de um Construtor, por ex. <code>myConstructor.prototype.x()</code>.</li> +</ol> + +<p>Se você não tem certeza de qual é qual, não se preocupe com isso ainda — você ainda está aprendendo e a familiaridade virá com a prática.</p> + +<h2 id="Classes_ECMAScript_2015">Classes ECMAScript 2015</h2> + +<p>O ECMAScript 2015 introduz a <a href="/en-US/docs/Web/JavaScript/Reference/Classes">sintaxe de classe</a> em JavaScript como uma maneira de escrever classes reutilizáveis usando uma sintaxe mais fácil e mais limpa, que é mais semelhante a classes em C ++ ou Java. Nesta seção, converteremos os exemplos Pessoa e Professor da herança protótipo para as classes, para mostrar como é feito.</p> + +<div class="note"> +<p><strong>Nota</strong>: Essa forma moderna de escrever classes é suportada em todos os navegadores modernos, mas ainda vale a pena saber como a herança prototípica subjacente, caso você trabalhe em um projeto que exija suporte a um navegador que não suporte essa sintaxe (mais notavelmente o Internet Explorer) .</p> +</div> + +<p>Vejamos uma versão reescrita do exemplo Person, estilo de classe:</p> + +<pre class="brush: js">class Person { + constructor(first, last, age, gender, interests) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + } + + greeting() { + console.log(`Hi! I'm ${this.name.first}`); + }; + + farewell() { + console.log(`${this.name.first} has left the building. Bye for now!`); + }; +} +</pre> + +<p>A declaração <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class</a> indica que estamos criando uma nova classe. Dentro deste bloco, definimos todos os recursos da classe:</p> + +<ul> + <li>O método <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor()</a></code> define a função construtora que representa nossa classe <code>Person</code>.</li> + <li><code>greeting()</code> e <code>farewell()</code> são métodos de classe. Quaisquer métodos que você deseja associar à classe são definidos dentro dela, após o construtor. Neste exemplo, usamos <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">template literals</a> em vez de concatenação de string para facilitar a leitura do código.</li> +</ul> + +<p>Agora podemos instanciar instâncias de objeto usando o operador <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a>, da mesma maneira que fizemos antes:</p> + +<pre class="brush: js">let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']); +han.greeting(); +// Hi! I'm Han + +let leia = new Person('Leia', 'Organa', 19, 'female', ['Government']); +leia.farewell(); +// Leia has left the building. Bye for now +</pre> + +<div class="note"> +<p><strong>Nota</strong>: Sob o capô, suas classes estão sendo convertidas em modelos de herança protótipos — isso é apenas açúcar sintático. Mas tenho certeza que você concordará que é mais fácil escrever.</p> +</div> + +<h3 id="Herança_com_sintaxe_de_classe">Herança com sintaxe de classe</h3> + +<p>Acima nós criamos uma classe para representar uma pessoa. Eles têm uma série de atributos que são comuns a todas as pessoas; Nesta seção, criaremos nossa classe especializada <code>Teacher</code>, tornando-a herdada de <code>Person</code> usando a sintaxe de classe moderna. Isso é chamado de criação de uma subclasse ou subclasse.</p> + +<p>Para criar uma subclasse, usamos a palavra-chave <a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a> para informar ao JavaScript a classe na qual queremos basear nossa classe.</p> + +<pre class="brush: js">class Teacher extends Person { + constructor(first, last, age, gender, interests, subject, grade) { + this.name = { + first, + last + }; + + this.age = age; + this.gender = gender; + this.interests = interests; + // subject and grade are specific to Teacher + this.subject = subject; + this.grade = grade; + } +}</pre> + +<p>Podemos tornar o código mais legível definindo o operador <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code> </a>como o primeiro item dentro do <code>constructor()</code>. Isso chamará o construtor da classe pai e herdará os membros que especificarmos como parâmetros de <code>super()</code>, desde que sejam definidos lá:</p> + +<pre class="brush: js">class Teacher extends Person { + constructor(first, last, age, gender, interests, subject, grade) { + super(first, last, age, gender, interests); + + // subject and grade are specific to Teacher + this.subject = subject; + this.grade = grade; + } +} +</pre> + +<p>Quando instanciamos instâncias de objeto <code>Teacher</code> , podemos agora chamar métodos e propriedades definidos em <code>Teacher</code> e <code>Person</code>, como seria de esperar:</p> + +<pre class="brush: js">let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5); +snape.greeting(); // Hi! I'm Severus. +snape.farewell(); // Severus has left the building. Bye for now. +snape.age // 58 +snape.subject; // Dark arts +</pre> + +<p>Como fizemos com Teachers, poderíamos criar outras subclasses de <code>Person</code> para torná-las mais especializadas sem modificar a classe base.</p> + +<div class="note"> +<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-class-inheritance.html">es2015-class-inheritance.html</a> (<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-class-inheritance.html">see it live also</a>).</p> +</div> + +<h2 id="Getters_e_Setters">Getters e Setters</h2> + +<p>Pode haver momentos em que queremos alterar os valores de um atributo nas classes que criamos ou não sabemos qual será o valor final de um atributo. Usando o exemplo <code>Teacher</code>, podemos não saber o assunto que o professor ensinará antes de criá-lo, ou o assunto pode mudar entre os termos.</p> + +<p>Podemos lidar com essas situações com getters e setters.</p> + +<p>Vamos melhorar a classe Professor com getters e setters. A aula começa da mesma forma que foi a última vez que olhamos para ela.</p> + +<p>Os getters e setters trabalham em pares. Um getter retorna o valor atual da variável e seu setter correspondente altera o valor da variável para o que ela define.</p> + +<p>A classe <code>Teacher</code> modificada é assim:</p> + +<pre class="brush: js">class Teacher extends Person { + constructor(first, last, age, gender, interests, subject, grade) { + super(first, last, age, gender, interests); + // subject and grade are specific to Teacher + this._subject = subject; + this.grade = grade; + } + + get subject() { + return this._subject; + } + + set subject(newSubject) { + this._subject = newSubject; + } +} +</pre> + +<p>Em nossa classe acima, temos um getter e setter para a propriedade <code>subject</code>. Usamos <strong><code>_</code> </strong> para criar um valor separado no qual armazenar nossa propriedade de nome. Sem usar essa convenção, obteríamos erros toda vez que chamássemos get ou set. Neste ponto:</p> + +<ul> + <li>Para mostrar o valor atual da propriedade <code>_subject</code> do objeto <code>snape</code> , podemos usar o método getter <code>snape.subject</code>.</li> + <li>Para atribuir um novo valor à propriedade <code>_subject</code> , podemos usar o método setter <code>snape.subject="new value"</code>.</li> +</ul> + +<p>O exemplo abaixo mostra os dois recursos em ação:</p> + +<pre class="brush: js">// Check the default value +console.log(snape.subject) // Returns "Dark arts" + +// Change the value +snape.subject="Balloon animals" // Sets _subject to "Balloon animals" + +// Check it again and see if it matches the new value +console.log(snape.subject) // Returns "Balloon animals" +</pre> + +<div class="note"> +<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-getters-setters.html">es2015-getters-setters.html</a> (<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-getters-setters.html">see it live also</a>).</p> +</div> + +<h2 id="Quando_você_usaria_a_herança_em_JavaScript">Quando você usaria a herança em JavaScript?</h2> + +<p>Particularmente após este último artigo, você pode estar pensando "woo, isso é complicado". Bem, você está certo. Protótipos e herança representam alguns dos aspectos mais complexos do JavaScript, mas muito do poder e flexibilidade do JavaScript vem de sua estrutura e herança de objetos, e vale a pena entender como ele funciona.</p> + +<p>De certa forma, você usa herança o tempo todo. Sempre que você usa vários recursos de uma API da Web ou métodos / propriedades definidos em um objeto de navegador interno que você chama em suas cadeias de caracteres, matrizes, etc., você está implicitamente usando herança.</p> + +<p>Em termos de usar a herança em seu próprio código, você provavelmente não a usará com frequência, principalmente no começo e em pequenos projetos. É uma perda de tempo usar objetos e herança apenas por causa dela quando você não precisa deles. Mas à medida que suas bases de código aumentam, é mais provável que você encontre uma necessidade para isso. Se você estiver começando a criar vários objetos com recursos semelhantes, criar um tipo de objeto genérico para conter toda a funcionalidade compartilhada e herdar esses recursos em tipos de objetos mais especializados pode ser conveniente e útil.</p> + +<div class="note"> +<p><strong>Nota</strong>: Por causa da maneira como o JavaScript funciona, com a cadeia de protótipos, etc., o compartilhamento de funcionalidade entre objetos é frequentemente chamado de <strong>delegação</strong>. Os objetos especializados delegam a funcionalidade a um tipo de objeto genérico.</p> +</div> + +<p>Ao usar a herança, você é aconselhado a não ter muitos níveis de herança, e manter um controle cuidadoso de onde você define seus métodos e propriedades. É possível começar a escrever código que modifica temporariamente os protótipos dos objetos do navegador interno, mas você não deve fazer isso a menos que tenha um bom motivo. Demasiada herança pode levar a confusão sem fim, e dor infinita quando você tenta depurar esse código.</p> + +<p>Em última análise, os objetos são apenas outra forma de reutilização de código, como funções ou loops, com seus próprios papéis e vantagens específicos. Se você estiver criando um monte de variáveis e funções relacionadas e quiser rastreá-las todas juntas e empacotá-las perfeitamente, um objeto é uma boa ideia. Objetos também são muito úteis quando você quer passar uma coleção de dados de um lugar para outro. Ambas as coisas podem ser alcançadas sem o uso de construtores ou herança. Se você precisa apenas de uma única instância de um objeto, provavelmente é melhor usar apenas um literal de objeto e certamente não precisa de herança.</p> + +<h2 id="Alternativas_para_estender_a_cadeia_de_protótipos">Alternativas para estender a cadeia de protótipos</h2> + +<p>Em JavaScript, existem várias maneiras diferentes de estender o protótipo de um objeto além do que mostramos acima. Para saber mais sobre as outras formas, visite nosso artigo <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Different_ways_to_create_objects_and_the_resulting_prototype_chain">Herança e a cadeia de protótipos</a>.</p> + +<h2 id="Sumário">Sumário</h2> + +<p>Este artigo cobriu o restante da teoria e sintaxe central do OOJS que achamos que você deveria saber agora. Neste ponto, você deve entender os princípios de objeto e OOP JavaScript, protótipos e herança prototypal, como criar classes (construtores) e instâncias de objetos, adicionar recursos a classes e criar subclasses que herdam de outras classes.</p> + +<p>No próximo artigo, veremos como trabalhar com JavaScript Object Notation (JSON), um formato comum de troca de dados escrito usando objetos JavaScript.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="http://www.objectplayground.com/">ObjectPlayground.com</a> — Um site de aprendizado interativo realmente útil para aprender sobre objetos.</li> + <li><a href="https://www.manning.com/books/secrets-of-the-javascript-ninja-second-edition">Segredos Ninja de JavaScript</a>, Capítulo 7 - Um bom livro sobre conceitos e técnicas avançadas de JavaScript, por John Resig, Bear Bibeault e Josip Maras. O Capítulo 7 aborda aspectos de protótipos e herança muito bem; Você provavelmente pode rastrear uma cópia impressa ou on-line com bastante facilidade.</li> + <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes">Você não sabe JS: this & Object Prototypes</a> — Parte da excelente série de manuais de JavaScript de Kyle Simpson, o Capítulo 5, em particular, analisa os protótipos com muito mais detalhes do que fazemos aqui. Nós apresentamos uma visão simplificada nesta série de artigos destinados a iniciantes, enquanto Kyle entra em grande profundidade e fornece uma imagem mais complexa, mas mais precisa.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li> +</ul> diff --git a/files/pt-br/learn/javascript/objects/json/index.html b/files/pt-br/learn/javascript/objects/json/index.html new file mode 100644 index 0000000000..e10e3e27a6 --- /dev/null +++ b/files/pt-br/learn/javascript/objects/json/index.html @@ -0,0 +1,350 @@ +--- +title: Trabalhando com JSON +slug: Aprender/JavaScript/Objetos/JSON +tags: + - JSON + - JavaScript + - assíncrono +translation_of: Learn/JavaScript/Objects/JSON +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">JavaScript Object Notation (JSON) é um formato baseado em texto padrão para representar dados estruturados com base na sintaxe do objeto JavaScript. É comumente usado para transmitir dados em aplicativos da Web (por exemplo, enviar alguns dados do servidor para o cliente, para que possam ser exibidos em uma página da Web ou vice-versa). Você se deparará com isso com bastante frequência, portanto, neste artigo, oferecemos tudo o que você precisa para trabalhar com o JSON usando JavaScript, incluindo a análise do JSON para que você possa acessar os dados dentro dele e criar o JSON.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requisitos</th> + <td> + <p>Conhecimento básico em informática, conhecimento básico de HTML e CSS, conhecimento básico de JavaScript veja <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos</a> e <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">Construindo blocos</a>) e o básico de OOJS (veja <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introdução a objetos</a>).</p> + </td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td> + <p>Para entender como trabalhar com dados armazenados em JSON e criar seus próprios objetos JSON.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Não_sério_o_que_é_o_JSON">Não, sério, o que é o JSON?</h2> + +<p>{{glossary("JSON")}} é um formato de dados baseado em texto seguindo a sintaxe do objeto JavaScript, que foi popularizada por <a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Douglas Crockford</a>. Mesmo que se assemelhe à sintaxe literal do objeto JavaScript, ele pode ser usado independentemente do JavaScript, e muitos ambientes de programação possuem a capacidade de ler (analisar) e gerar JSON</p> + +<p>O JSON existe como uma string — útil quando você deseja transmitir dados por uma rede. Ele precisa ser convertido em um objeto JavaScript nativo quando você quiser acessar os dados. Isso não é um grande problema — o JavaScript fornece um objeto <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> global que possui métodos disponíveis para conversão entre os dois.</p> + +<div class="note"> +<p><strong>Nota</strong>: Converter uma string em um objeto nativo é chamado de análise, enquanto a conversão de um objeto nativo em uma string para que possa ser transmitida pela rede é chamada de <em>stringification</em>.</p> +</div> + +<p>Um objeto JSON pode ser armazenado em seu próprio arquivo, que é basicamente apenas um arquivo de texto com uma extensão de <code>.json</code>, e um {{glossary("MIME type")}} de <code>application/json</code>.</p> + +<h3 id="Estrutura_JSON">Estrutura JSON</h3> + +<p>Conforme descrito acima, um JSON é uma string cujo formato se parece muito com o formato literal do objeto JavaScript. Você pode incluir os mesmos tipos de dados básicos dentro do JSON, como em um objeto JavaScript padrão — strings, números, matrizes, booleanos e outros literais de objeto. Isso permite que você construa uma hierarquia de dados, assim:</p> + +<pre class="brush: json">{ + "squadName": "Super hero squad", + "homeTown": "Metro City", + "formed": 2016, + "secretBase": "Super tower", + "active": true, + "members": [ + { + "name": "Molecule Man", + "age": 29, + "secretIdentity": "Dan Jukes", + "powers": [ + "Radiation resistance", + "Turning tiny", + "Radiation blast" + ] + }, + { + "name": "Madame Uppercut", + "age": 39, + "secretIdentity": "Jane Wilson", + "powers": [ + "Million tonne punch", + "Damage resistance", + "Superhuman reflexes" + ] + }, + { + "name": "Eternal Flame", + "age": 1000000, + "secretIdentity": "Unknown", + "powers": [ + "Immortality", + "Heat Immunity", + "Inferno", + "Teleportation", + "Interdimensional travel" + ] + } + ] +}</pre> + +<p>Se nós carregássemos esse objeto em um programa JavaScript, analisado em uma variável chamada <code>superHeroes</code> por exemplo, poderíamos então acessar os dados dentro dele usando a mesma notação dot / bracket que observamos no artigo básico do objeto <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">JavaScript</a>. Por exemplo:</p> + +<pre class="brush: js">superHeroes.homeTown +superHeroes['active']</pre> + +<p>Para acessar os dados mais abaixo na hierarquia, basta encadear os nomes de propriedades e os índices de array necessários juntos. Por exemplo, para acessar o terceiro superpoder do segundo herói listado na lista de membros, você faria isso:</p> + +<pre class="brush: js">superHeroes['members'][1]['powers'][2]</pre> + +<ol> + <li>Primeiro temos o nome da variável — <code>superHeroes</code>.</li> + <li>Por dentro, queremos acessar a propriedade dos <code>members</code>, então usamos <code>["members"]</code>.</li> + <li><code>members</code> contém uma matriz preenchida por objetos. Queremos acessar o segundo objeto dentro da matriz, então usamos <code>[1]</code>.</li> + <li>Dentro deste objeto, queremos acessar a propriedade <code>powers</code>, então usamos <code>["powers"]</code>.</li> + <li>Dentro da propriedade <code>powers</code> está um array contendo os superpoderes do herói selecionado. Nós queremos o terceiro, então nós usamos<br> + <code>[2]</code>.</li> +</ol> + +<div class="note"> +<p>Nota: Nós fizemos o JSON visto acima disponível dentro de uma variável em nosso exemplo JSONTest.html (veja o código fonte). Tente carregar isso e depois acessar os dados dentro da variável pelo console JavaScript do seu navegador.</p> +</div> + +<h3 id="Matrizes_como_JSON">Matrizes como JSON</h3> + +<p>Acima, mencionamos que o texto JSON basicamente se parece com um objeto JavaScript, e isso é basicamente correto. A razão pela qual dissemos "principalmente certo" é que uma matriz também é válida como JSON, por exemplo:</p> + +<pre class="brush: json">[ + { + "name": "Molecule Man", + "age": 29, + "secretIdentity": "Dan Jukes", + "powers": [ + "Radiation resistance", + "Turning tiny", + "Radiation blast" + ] + }, + { + "name": "Madame Uppercut", + "age": 39, + "secretIdentity": "Jane Wilson", + "powers": [ + "Million tonne punch", + "Damage resistance", + "Superhuman reflexes" + ] + } +]</pre> + +<p>O código acima é um JSON perfeitamente válido. Você teria que acessar itens de matriz (em sua versão analisada) iniciando com um índice de matriz, por exemplo <code>[0]["powers"][0]</code>.</p> + +<h3 id="Outras_notas">Outras notas</h3> + +<ul> + <li>O JSON é puramente um formato de dados — contém apenas propriedades, sem métodos.</li> + <li>JSON requer aspas duplas para serem usadas em torno de strings e nomes de propriedades. Aspas simples não são válidas.</li> + <li>Mesmo uma única vírgula ou cólon perdidos podem fazer com que um arquivo JSON dê errado e não funcione. Você deve ter o cuidado de validar quaisquer dados que você esteja tentando usar (embora o JSON gerado por computador seja menos provável de incluir erros, desde que o programa gerador esteja funcionando corretamente). Você pode validar o JSON usando um aplicativo como o <a href="http://jsonlint.com/">JSONLint</a>.</li> + <li>O JSON pode realmente assumir a forma de qualquer tipo de dados que seja válido para inclusão dentro do JSON, não apenas matrizes ou objetos. Por exemplo, uma única string ou número seria um objeto JSON válido.</li> + <li>Ao contrário do código JavaScript no qual as propriedades do objeto podem estar sem aspas, em JSON, somente strings entre aspas podem ser usadas como propriedades.</li> +</ul> + +<h2 id="Aprendizado_ativo_trabalhando_por_meio_de_um_exemplo_de_JSON">Aprendizado ativo: trabalhando por meio de um exemplo de JSON</h2> + +<p>Então, vamos trabalhar em um exemplo para mostrar como poderíamos usar alguns dados JSON em um site.</p> + +<h3 id="Começando">Começando</h3> + +<p>Para começar, faça cópias locais de nossos arquivos <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html">heroes.html</a> e <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css">style.css</a>. O último contém alguns CSS simples para estilizar nossa página, enquanto o primeiro contém um HTML muito simples:</p> + +<pre class="brush: html"><header> +</header> + +<section> +</section></pre> + +<p>Mais um elemento {{HTMLElement("script")}} para conter o código JavaScript que escreveremos neste exercício. No momento, ele contém apenas duas linhas, que pegam referências aos elementos {{HTMLElement("header")}} e {{HTMLElement("section")}} e os armazenam em variáveis:</p> + +<pre class="brush: js">var header = document.querySelector('header'); +var section = document.querySelector('section');</pre> + +<p>Disponibilizamos nossos dados JSON em nosso GitHub, em<a href="https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json</a>.</p> + +<p>Vamos carregá-lo em nossa página e usar algumas manipulações de DOM nifty para exibi-lo, assim:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13857/json-superheroes.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Obtendo_o_JSON">Obtendo o JSON</h3> + +<p>Para obter o JSON, vamos usar uma API chamada {{domxref("XMLHttpRequest")}} (geralmente chamada de XHR). Esse é um objeto JavaScript muito útil que nos permite fazer solicitações de rede para recuperar recursos de um servidor via JavaScript (por exemplo, imagens, texto, JSON e até trechos de código HTML), o que significa que podemos atualizar pequenas seções de conteúdo sem ter que recarregar todo página. Isso levou a páginas da Web mais responsivas e parece empolgante, mas está além do escopo deste artigo ensinar isso com muito mais detalhes.</p> + +<ol> + <li>Para começar, vamos armazenar a URL do JSON que queremos recuperar em uma variável. Adicione o seguinte na parte inferior do seu código JavaScript: + <pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';</pre> + </li> + <li>Para criar uma solicitação, precisamos criar uma nova instância de objeto de solicitação a partir do construtor <code>XMLHttpRequest</code> usando a palavra-chave <code>new</code>. Adicione o seguinte abaixo sua última linha: + <pre class="brush: js">var request = new XMLHttpRequest();</pre> + </li> + <li>Agora precisamos abrir uma nova solicitação usando o método <code><a href="/en-US/docs/Web/API/XMLHttpRequest/open">open()</a></code> . Adicione a seguinte linha: + <pre class="brush: js">request.open('GET', requestURL);</pre> + + <p>Isso leva pelo menos dois parâmetros — existem outros parâmetros opcionais disponíveis. Nós só precisamos dos dois obrigatórios para este exemplo simples:</p> + + <ul> + <li>O método HTTP a ser usado ao fazer a solicitação de rede. Neste caso, <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> é bom, pois estamos apenas recuperando alguns dados simples.</li> + <li>O URL para fazer a solicitação — esta é a URL do arquivo JSON que armazenamos anteriormente.</li> + </ul> + </li> + <li>Em seguida, adicione as duas linhas a seguir — aqui estamos definindo o <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> como JSON, para que o XHR saiba que o servidor retornará o JSON e que isso deve ser convertido nos bastidores em um objeto JavaScript. Em seguida, enviamos a solicitação com o método <code><a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a></code>: + <pre class="brush: js">request.responseType = 'json'; +request.send();</pre> + </li> + <li>A última parte desta seção envolve aguardar a resposta retornar do servidor e, em seguida, lidar com ela. Adicione o seguinte código abaixo do seu código anterior: + <pre class="brush: js">request.onload = function() { + var superHeroes = request.response; + populateHeader(superHeroes); + showHeroes(superHeroes); +}</pre> + </li> +</ol> + +<p>Aqui estamos armazenando a resposta ao nosso pedido (disponível na propriedade <code><a href="/en-US/docs/Web/API/XMLHttpRequest/response">response</a></code>) em uma variável chamada <code>superHeroes</code>; essa variável agora conterá o objeto JavaScript com base no JSON! Então, estamos passando esse objeto para duas chamadas de função — a primeira preencherá o <<code>header></code> com os dados corretos, enquanto a segunda criará uma ficha de informações para cada herói da equipe e a inserirá na <code><section></code>.</p> + +<p>Envolvemos o código em um manipulador de eventos que é executado quando o evento de carregamento é acionado no objeto de solicitação (consulte <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) — isso ocorre porque o evento load é acionado quando a resposta é retornada com sucesso; Fazê-lo desta forma garante que <code>request.response</code> estará definitivamente disponível quando chegarmos a tentar fazer algo com ele.</p> + +<h3 id="Preenchendo_o_Cabeçalho">Preenchendo o Cabeçalho</h3> + +<p>Agora, recuperamos os dados JSON e os convertemos em um objeto JavaScript, vamos usá-lo escrevendo as duas funções mencionadas acima. Primeiro de tudo, adicione a seguinte definição de função abaixo do código anterior:</p> + +<pre class="brush: js">function populateHeader(jsonObj) { + var myH1 = document.createElement('h1'); + myH1.textContent = jsonObj['squadName']; + header.appendChild(myH1); + + var myPara = document.createElement('p'); + myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed']; + header.appendChild(myPara); +}</pre> + +<p>Nós chamamos o parâmetro <code>jsonObj</code>, para nos lembrarmos que esse objeto JavaScript foi originado do JSON. Aqui, primeiro criamos um elemento {{HTMLElement("h1")}} como <code><a href="/en-US/docs/Web/API/Document/createElement">createElement()</a></code>, definimos seu <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> para igualar a propriedade <code>squadName</code> do objeto e, em seguida, o adicionamos ao cabeçalho usando <code><a href="/en-US/docs/Web/API/Node/appendChild">appendChild()</a></code>. Em seguida, fazemos uma operação muito semelhante com um parágrafo: criá-lo, definir seu conteúdo de texto e anexá-lo ao cabeçalho. A única diferença é que seu texto é definido como uma string concatenada contendo as propriedades <code>homeTown</code> e <code>formed</code> do objeto.</p> + +<h3 id="Criando_os_cartões_de_informações_do_herói">Criando os cartões de informações do herói</h3> + +<p>Em seguida, adicione a seguinte função na parte inferior do código, que cria e exibe as cartas de super-heróis:</p> + +<pre class="brush: js">function showHeroes(jsonObj) { + var heroes = jsonObj['members']; + + for (var i = 0; i < heroes.length; i++) { + var myArticle = document.createElement('article'); + var myH2 = document.createElement('h2'); + var myPara1 = document.createElement('p'); + var myPara2 = document.createElement('p'); + var myPara3 = document.createElement('p'); + var myList = document.createElement('ul'); + + myH2.textContent = heroes[i].name; + myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity; + myPara2.textContent = 'Age: ' + heroes[i].age; + myPara3.textContent = 'Superpowers:'; + + var superPowers = heroes[i].powers; + for (var j = 0; j < superPowers.length; j++) { + var listItem = document.createElement('li'); + listItem.textContent = superPowers[j]; + myList.appendChild(listItem); + } + + myArticle.appendChild(myH2); + myArticle.appendChild(myPara1); + myArticle.appendChild(myPara2); + myArticle.appendChild(myPara3); + myArticle.appendChild(myList); + + section.appendChild(myArticle); + } +}</pre> + +<p>Para começar, armazenamos a propriedade <code>members</code> do objeto JavaScript em uma nova variável. Esta matriz contém vários objetos que contêm as informações para cada herói.</p> + +<p>Em seguida, usamos um<a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop"> loop for</a> para percorrer cada objeto na matriz. Para cada um, nós:</p> + +<ol> + <li>Criamos vários novos elementos: um <code><ar</code><code>ticle></code>, um <code><h2></code>, três <code><p></code>s, e um <code><ul></code>.</li> + <li>Definimos o <h2> para conter o <code>name</code> do herói atual.</li> + <li>Preenchemos os três parágrafos com sua <code>secretIdentity</code>, <code>age</code>, e uma linha dizendo "Superpoderes:" para introduzir as informações na lista.</li> + <li>Armazenamos a propriedade <code>powers</code> em outra nova variável chamada <code>superPowers</code> — isso contém uma matriz que lista os superpoderes do herói atual.</li> + <li>Usamos outro loop <code>for</code> para percorrer os superpoderes do herói atual — para cada um criamos um elemento <code><li></code> colocamos o super poder dentro dele e colocamos o <code>listItem</code> dentro do elemento <code><ul></code> (<code>myList</code>) usando <code>appendChild()</code>.</li> + <li>A última coisa que fizemos foi acrescentar os <code><h2></code>, <code><p></code>s, e <code><ul></code> dentro do <code><article></code> (<code>myArticle</code>), depois acrescentar o <code><article></code> dentro do <code><section></code>. A ordem em que as coisas são anexadas é importante, pois essa é a ordem em que elas serão exibidas dentro do HTML.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Se você está com problemas pegue um exemplo para trabalhar, tente nosso código fonte <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> (veja isso <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">ao vivo</a> também.)</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Se você está tendo problemas para seguir a notação ponto / colchete que estamos usando para acessar o objeto JavaScript, pode ajudar a abrir o arquivo <a href="http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">superheroes.json</a> em outra guia ou em seu editor de texto, e consultá-lo enquanto observa nosso JavaScript. Você também pode consultar o artigo sobre conceitos <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">O básico de objetos JavaScript</a> para obter mais informações sobre a notação de pontos e colchetes.</p> +</div> + +<h2 id="Conversão_entre_objetos_e_texto">Conversão entre objetos e texto</h2> + +<p>O exemplo acima foi simples em termos de acesso ao objeto JavaScript, porque definimos a solicitação XHR para converter a resposta JSON diretamente em um objeto JavaScript usando:</p> + +<pre class="brush: js">request.responseType = 'json';</pre> + +<p>Mas às vezes não temos muita sorte — às vezes recebemos uma string JSON bruta e precisaremos convertê-la em um objeto por conta própria. E quando queremos enviar um objeto JavaScript pela rede, precisamos convertê-lo em JSON (uma string) antes de enviá-lo. Felizmente, esses dois problemas são tão comuns no desenvolvimento da Web que um objeto <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> interno está disponível nos navegadores, o que contém os dois métodos a seguir:</p> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">parse()</a></code>: Aceita uma string JSON como um parâmetro e retorna o objeto JavaScript correspondente.</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringify()</a></code>: Aceita um objeto como um parâmetro e retorna o formato equivalente de string JSON.</li> +</ul> + +<p>Você pode ver o primeiro em ação em nosso exemplo <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html">heroes-finished-json-parse.html</a> (veja o <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html">source code</a>) — isso faz exatamente a mesma coisa que o exemplo que construímos anteriormente, exceto pelo fato de configurarmos o XHR para retornar texto JSON bruto, em seguida, usado <code>parse()</code> para convertê-lo em um objeto JavaScript real. O trecho principal do código está aqui:</p> + +<pre class="brush: js">request.open('GET', requestURL); +request.responseType = 'text'; // now we're getting a string! +request.send(); + +request.onload = function() { + var superHeroesText = request.response; // get the string from the response + var superHeroes = JSON.parse(superHeroesText); // convert it to an object + populateHeader(superHeroes); + showHeroes(superHeroes); +}</pre> + +<p>Como você pode imaginar, <code>stringify()</code> funciona da maneira oposta. Tente inserir as seguintes linhas no console JavaScript de seu navegador, uma por uma, para vê-lo em ação:</p> + +<pre class="brush: js">var myJSON = { "name": "Chris", "age": "38" }; +myJSON +var myString = JSON.stringify(myJSON); +myString</pre> + +<p>Aqui estamos criando um objeto JavaScript, em seguida, verificando o que ele contém, convertendo-o em uma string JSON usando <code>stringify()</code> — salvando o valor de retorno em uma nova variável — e, em seguida, verificando-o novamente.</p> + +<h2 id="Sumário">Sumário</h2> + +<p>Neste artigo, fornecemos um guia simples para usar o JSON em seus programas, incluindo como criar e analisar o JSON e como acessar dados bloqueados nele. No próximo artigo começaremos a analisar o JavaScript orientado a objetos.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/JSON">Objeto JSON página de refência</a></li> + <li><a href="/pt-BR/docs/Web/API/XMLHttpRequest">Objeto XMLHttpRequest página de refência</a></li> + <li><a href="/pt-BR/docs/Web/API/XMLHttpRequest/Usando_XMLHttpRequest">Usando XMLHttpRequest</a></li> + <li><a href="/pt-BR/docs/Web/HTTP/Methods">Métodos de requisição HTTP</a></li> + <li><a href="http://json.org">Site oficial JSON com o link para o padrão ECMA</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</p> + +<h2 id="Nesse_módulo">Nesse módulo</h2> + +<ul> + <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Basics">O básico de objetos</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Object-oriented_JS">Orientação a objetos em JavaScript para iniciantes</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Object_prototypes">Protótipos de objetos</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Inheritance">Herança em JavaScript</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/JSON">Trabalhando com dados em JSON</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Object_building_practice">Prática de construção de objetos</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adicionando melhorias para nossa demo bolas saltitantes</a></li> +</ul> diff --git a/files/pt-br/learn/javascript/objects/object-oriented_js/index.html b/files/pt-br/learn/javascript/objects/object-oriented_js/index.html new file mode 100644 index 0000000000..7772eec5cf --- /dev/null +++ b/files/pt-br/learn/javascript/objects/object-oriented_js/index.html @@ -0,0 +1,275 @@ +--- +title: JavaScript orientado a objetos para iniciantes +slug: Aprender/JavaScript/Objetos/Object-oriented_JS +translation_of: Learn/JavaScript/Objects/Object-oriented_JS +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">Com o básico fora do caminho, agora vamos nos concentrar no JavaScript orientado a objetos (OOJS) — Este artigo apresenta uma visão básica da teoria de programação orientada a objeto (OOP), em seguida, explora como o JavaScript emula as classes de objetos através de funções de construtor e como criar instâncias de objeto.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requisitos:</th> + <td>Alfabetização básica em informática, um entendimento básico de HTML e CSS, familiaridade com o básico do JavaScript (consulte <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Blocos de construção</a>) e noções básicas do OOJS (consulte <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introdução aos objetos</a>).</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Para entender a teoria básica por trás da programação orientada a objetos, como isso se relaciona com JavaScript ("tudo é um objeto") e como criar construtores e instâncias de objetos.</td> + </tr> + </tbody> +</table> + +<h2 id="Programação_orientada_a_objetos_-_o_básico">Programação orientada a objetos - o básico</h2> + +<p>Para começar, vamos dar uma visão simplista e de alto nível do que é programação orientada a objeto (OOP). Dizemos simplista, porque a OOP pode rapidamente se tornar muito complicada, e dar a ela um tratamento completo agora provavelmente confundiria mais do que ajuda. A idéia básica da OOP é que usamos objetos para modelar coisas do mundo real que queremos representar dentro de nossos programas, e / ou fornecer uma maneira simples de acessar funcionalidades que de outra forma seriam difíceis ou impossíveis de usar.</p> + +<p>Os objetos podem conter dados e códigos relacionados, que representam informações sobre o que você está tentando modelar e a funcionalidade ou o comportamento que você deseja ter. Dados de objeto (e muitas vezes, funções também) podem ser armazenados ordenadamente (a palavra oficial é <strong>encapsulados</strong>) dentro de um pacote de objetos (que pode ser dado um nome específico para se referir, que é às vezes chamado de <strong>namespace</strong>), tornando fácil de estruturar e acessar; objetos também são comumente usados como armazenamentos de dados que podem ser facilmente enviados pela rede.</p> + +<h3 id="Definindo_um_modelo_de_objeto">Definindo um modelo de objeto</h3> + +<p>Vamos considerar um programa simples que exibe informações sobre os alunos e professores de uma escola. Aqui vamos olhar para a teoria OOP em geral, não no contexto de qualquer linguagem de programação específica.</p> + +<p>Para começar, poderíamos retornar ao nosso tipo de objeto Person do nosso <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">primeiro artigo de objetos</a>, que define os dados genéricos e a funcionalidade de uma pessoa. Há muitas coisas que você poderia saber sobre uma pessoa (endereço, altura, tamanho do sapato, perfil de DNA, número de passaporte, traços de personalidade significativos ...), mas neste caso estamos interessados apenas em mostrar seu nome, idade, sexo e interesses, e também queremos ser capazes de escrever uma breve introdução sobre eles com base nesses dados e fazê-los dizer oi. Isso é conhecido como <strong>abstração</strong> — criando um modelo simples de uma coisa mais complexa, que representa seus aspectos mais importantes de uma forma que é fácil trabalhar com os objetivos do nosso programa.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13889/person-diagram.png" style="display: block; height: 219px; margin: 0px auto; width: 610px;"></p> + +<h3 id="Criando_objetos_reais">Criando objetos reais</h3> + +<p>De nossa classe, podemos criar <strong>instâncias de objeto</strong> — objetos que contêm os dados e a funcionalidade definidos na classe. Da nossa classe Person, podemos criar algumas pessoas reais:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15163/MDN-Graphics-instantiation-2-fixed.png" style="display: block; height: 702px; margin: 0px auto; width: 695px;"></p> + +<p>Quando uma instância de objeto é criada a partir de uma classe, a <strong>função construtora</strong> da classe é executada para criá-la. Esse processo de criação de uma instância de objeto de uma classe é chamado de <strong>instanciação</strong> — a instância do objeto é <strong>instanciada </strong>a partir da classe.</p> + +<h3 id="Classes_especialistas">Classes especialistas</h3> + +<p>Neste caso, não queremos pessoas genéricas — queremos professores e alunos, que são tipos mais específicos de pessoas. Em OOP, podemos criar novas classes com base em outras classes — essas novas <strong>classes filhas</strong> podem <strong>herdar </strong>os recursos de dados e código de sua <strong>classe pai</strong>, para que você possa reutilizar a funcionalidade comum a todos os tipos de objetos em vez de duplicá-los. Onde a funcionalidade difere entre as classes, você pode definir recursos especializados diretamente sobre eles, conforme necessário.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13881/MDN-Graphics-inherited-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> + +<p>Isso é realmente útil — professores e alunos compartilham muitos recursos comuns, como nome, sexo e idade, por isso é conveniente definir apenas esses recursos uma vez. Você também pode definir o mesmo recurso separadamente em classes diferentes, já que cada definição desse recurso estará em um namespace diferente. Por exemplo, a saudação de um aluno pode estar no formato "Yo, I'm [firstName]" (por exemplo, <em>Yo, I'm Sam</em>), enquanto um professor pode usar algo mais formal, como "Olá, meu nome é [Prefixo [lastName], e eu ensino [Subject]. " (por exemplo <em>Olá, Meu nome é Mr Griffiths, e eu ensino Química</em>).</p> + +<div class="note"> +<p><strong>Nota</strong>: A palavra chique para a capacidade de múltiplos tipos de objeto de implementar a mesma funcionalidade é o <strong>polimorfismo</strong>. Apenas no caso de você estar se perguntando.</p> +</div> + +<p>Agora você pode criar instâncias de objetos de suas classes filhas. Por exemplo:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13885/MDN-Graphics-instantiation-teacher-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> + +<p>No restante do artigo, começaremos a analisar como a teoria da POO pode ser colocada em prática no JavaScript.</p> + +<h2 id="Construtores_e_instâncias_de_objeto">Construtores e instâncias de objeto</h2> + +<p>O JavaScript usa funções especiais chamadas <strong>funções construtoras</strong> para definir objetos e seus recursos. Eles são úteis porque muitas vezes você encontrará situações em que não sabe quantos objetos estará criando; Os construtores fornecem os meios para criar quantos objetos forem necessários de forma eficaz, anexando dados e funções a eles, conforme necessário.</p> + +<p>Vamos explorar a criação de classes por meio de construtores e criar instâncias de objeto a partir deles em JavaScript. Primeiro de tudo, gostaríamos que você fizesse uma nova cópia local do arquivo <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> que vimos em nosso primeiro artigo Objetos.</p> + +<h3 id="Um_exemplo_simples">Um exemplo simples</h3> + +<ol> + <li>Vamos começar observando como você pode definir uma pessoa com uma função normal. Adicione esta função dentro do elemento <code>script</code>: + + <pre class="brush: js">function createNewPerson(name) { + var obj = {}; + obj.name = name; + obj.greeting = function() { + alert('Hi! I\'m ' + obj.name + '.'); + }; + return obj; +}</pre> + </li> + <li>Agora você pode criar uma nova pessoa chamando essa função — tente as seguintes linhas no console JavaScript do seu navegador: + <pre class="brush: js">var salva = createNewPerson('Salva'); +salva.name; +salva.greeting();</pre> + Isso funciona bem o suficiente, mas é um pouco prolixo; Se sabemos que queremos criar um objeto, por que precisamos criar explicitamente um novo objeto vazio e devolvê-lo? Felizmente, o JavaScript nos fornece um atalho útil, na forma de funções de construtor — vamos criar um agora!</li> + <li>Substitua sua função anterior pelo seguinte: + <pre class="brush: js">function Person(name) { + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; +}</pre> + </li> +</ol> + +<p>A função de construtor é a versão do JavaScript de uma classe. Você notará que ela tem todos os recursos que você espera em uma função, embora ela não retorne nada ou crie explicitamente um objeto — ela basicamente define propriedades e métodos. Você verá a palavra-chave <code>this</code> sendo usada aqui também — é basicamente dizer que sempre que uma dessas instâncias de objeto é criada, a propriedade <code>name</code> do objeto será igual ao valor do nome passado à chamada do construtor, e o método <code>greeting()</code> usará o valor do nome passado para a chamada do construtor também.</p> + +<div class="note"> +<p><strong>Nota</strong>: Um nome de função de construtor geralmente começa com uma letra maiúscula — essa convenção é usada para tornar as funções do construtor mais fáceis de reconhecer no código.</p> +</div> + +<p>Então, como podemos chamar um construtor para criar alguns objetos?</p> + +<ol> + <li>Adicione as seguintes linhas abaixo da sua adição de código anterior: + <pre class="brush: js">var person1 = new Person('Bob'); +var person2 = new Person('Sarah');</pre> + </li> + <li>Salve seu código e recarregue-o no navegador e tente inserir as seguintes linhas em seu console JS: + <pre class="brush: js">person1.name +person1.greeting() +person2.name +person2.greeting()</pre> + </li> +</ol> + +<p>Legal! Você verá agora que temos dois novos objetos na página, cada um deles armazenado em um namespace diferente — quando você acessa suas propriedades e métodos, é necessário iniciar chamadas com <code>person1</code> ou <code>person2</code>; a funcionalidade contida é cuidadosamente empacotada para que não entre em conflito com outras funcionalidades. Eles, no entanto, têm a mesma propriedade de <code>name</code> e o método <code>greeting()</code> disponível. Observe que eles estão usando seu próprio valor de <code>name</code> que foi atribuído a eles quando foram criados; Esta é uma razão pela qual é muito importante usar <code>this</code>, então eles usarão seus próprios valores e não algum outro valor.</p> + +<p>Vamos ver novamente as chamadas do construtor:</p> + +<pre class="brush: js">var person1 = new Person('Bob'); +var person2 = new Person('Sarah');</pre> + +<p>Em cada caso, a palavra-chave <code>new</code> é usada para informar ao navegador que queremos criar uma nova instância de objeto, seguida pelo nome da função com seus parâmetros obrigatórios contidos entre parênteses, e o resultado é armazenado em uma variável — muito semelhante a como uma função padrão é chamada. Cada instância é criada de acordo com esta definição:</p> + +<pre class="brush: js">function Person(name) { + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; +}</pre> + +<p>Após a criação dos novos objetos, as variáveis <code>person1</code> e <code>person2</code> contêm os seguintes objetos:</p> + +<pre class="brush: js">{ + name: 'Bob', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +{ + name: 'Sarah', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +}</pre> + +<p>Note que quando estamos chamando nossa função de construtor, estamos definindo <code>greeting()</code> toda vez, o que não é ideal. Para evitar isso, podemos definir funções no protótipo, que veremos mais adiante.</p> + +<h3 id="Criando_nosso_construtor_acabado">Criando nosso construtor acabado</h3> + +<p>O exemplo que vimos acima foi apenas um exemplo simples para começarmos. Vamos agora começar e criar nossa função final do construtor <code>Person()</code>.</p> + +<ol> + <li>Remova o código que você inseriu até agora e inclua este construtor de substituição — isso é exatamente o mesmo que o exemplo simples em princípio, com um pouco mais de complexidade: + <pre class="brush: js">function Person(first, last, age, gender, interests) { + this.name = { + 'first': first, + 'last' : last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + this.bio = function() { + alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); + }; + this.greeting = function() { + alert('Hi! I\'m ' + this.name.first + '.'); + }; +}</pre> + </li> + <li>Agora adicione a seguinte linha abaixo, para criar uma instância de objeto a partir dela: + <pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> + </li> +</ol> + +<p>Agora você verá que pode acessar as propriedades e os métodos exatamente como fizemos anteriormente — Tente isso no seu console JS:</p> + +<pre class="brush: js">person1['age'] +person1.interests[1] +person1.bio() +// etc.</pre> + +<div class="note"> +<p><strong>Nota</strong>: Se você está tendo problemas para fazer isso funcionar, tente comparar seu código com a nossa versão — veja o código em <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a> (também <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">você pode ve-lo sendo executado aqui</a>).</p> +</div> + +<h3 id="Exercícios_adicionais">Exercícios adicionais</h3> + +<p>Para começar, tente adicionar mais algumas linhas de criação de objetos e tente obter e configurar os membros das instâncias de objetos resultantes.</p> + +<p>Além disso, há alguns problemas com nosso método <code>bio()</code> — a saída sempre inclui o pronome "Ele", mesmo que sua pessoa seja do sexo feminino ou alguma outra classificação de gênero preferida. E a biografia incluirá apenas dois interesses, mesmo que mais sejam listados na matriz <code>interests</code>. Você pode descobrir como corrigir isso na definição de classe (construtor)? Você pode colocar qualquer código que você gosta dentro de um construtor (você provavelmente precisará de alguns condicionais e um loop). Pense em como as sentenças devem ser estruturadas de maneira diferente dependendo do gênero e dependendo se o número de interesses listados é 1, 2 ou mais de 2.</p> + +<div class="note"> +<p><strong>Note</strong>: If you get stuck, we have provided an <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">answer inside our GitHub repo</a> (<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">see it live</a>) — try writing it yourself first though!</p> +</div> + +<h2 id="Outras_maneiras_de_criar_instâncias_de_objeto">Outras maneiras de criar instâncias de objeto</h2> + +<p>Até agora, vimos duas maneiras diferentes de criar uma instância de objeto — <a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">declarar um literal de objeto</a>, e usar uma função de construtor (veja acima).</p> + +<p>Isso faz sentido, mas existem outras maneiras — queremos familiarizá-lo com essas informações caso você as encontre em suas viagens pela Web.</p> + +<h3 id="O_construtor_Object">O construtor Object() </h3> + +<p>Primeiro de tudo, você pode usar o construtor <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object()</a></code> para criar um novo objeto. Sim, até objetos genéricos possuem um construtor, o que gera um objeto vazio.</p> + +<ol> + <li>Tente inserir isso no console JavaScript do seu navegador: + <pre class="brush: js">var person1 = new Object();</pre> + </li> + <li>Isso armazena um objeto vazio na variável <code>person1</code>. Você pode adicionar propriedades e métodos a esse objeto usando a notação de pontos ou colchetes conforme desejado; tente estes exemplos no seu console: + <pre class="brush: js">person1.name = 'Chris'; +person1['age'] = 38; +person1.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); +};</pre> + </li> + <li>Você também pode passar um literal de objeto para o construtor <code>Object()</code> como um parâmetro, para preenchê-lo com propriedades / métodos. Tente isso no seu console JS: + <pre class="brush: js">var person1 = new Object({ + name: 'Chris', + age: 38, + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +});</pre> + </li> +</ol> + +<h3 id="Usando_o_método_create">Usando o método create()</h3> + +<p>Os construtores podem ajudá-lo a fornecer seu pedido de código — você pode criar construtores em um único local e, em seguida, criar instâncias conforme necessário, e fica claro de onde eles vieram.</p> + +<p>No entanto, algumas pessoas preferem criar instâncias de objeto sem primeiro criar construtores, especialmente se estiverem criando apenas algumas instâncias de um objeto. JavaScript tem um método embutido chamado <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> que permite que você faça isso. Com ele, você pode criar um novo objeto com base em qualquer objeto existente.</p> + +<ol> + <li>Com o exercício concluído das seções anteriores carregadas no navegador, tente isso no seu console JavaScript: + <pre class="brush: js">var person2 = Object.create(person1);</pre> + </li> + <li>Agora tente estes: + <pre class="brush: js">person2.name +person2.greeting()</pre> + </li> +</ol> + +<p>Você verá que a <code>person2</code> foi criada com base na <code>person1</code> — ela tem as mesmas propriedades e métodos disponíveis para ela.</p> + +<p>Uma limitação do <code>create()</code> é que o IE8 não o suporta. Então os construtores são mais efetivos se você quiser que funcione em navegadores antigos.</p> + +<p>Vamos explorar os efeitos de <code>create()</code> em mais detalhes posteriormente.</p> + +<h2 id="Sumário">Sumário</h2> + +<p>Este artigo forneceu uma visão simplificada da teoria orientada a objetos — isso não é toda a história, mas dá uma idéia do que estamos lidando aqui. Além disso, começamos a analisar diferentes maneiras de gerar instâncias de objetos.</p> + +<p>No próximo artigo, vamos explorar os protótipos de objetos JavaScript.</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</p> + +<h2 id="Neste_módulo">Neste módulo</h2> + +<ul> + <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Basics">O básico de objetos</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Object-oriented_JS">Orientação a objetos em JavaScript para iniciantes</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Object_prototypes">Protótipos de objetos</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Inheritance">Herença em JavaScript</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/JSON">Trabalhando com dados em JSON</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Object_building_practice">Prática de construção de objetos</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adicionando melhorias no nossa demo bolas saltitantes</a></li> +</ul> diff --git a/files/pt-br/learn/javascript/objects/object_building_practice/index.html b/files/pt-br/learn/javascript/objects/object_building_practice/index.html new file mode 100644 index 0000000000..4c4ab6c629 --- /dev/null +++ b/files/pt-br/learn/javascript/objects/object_building_practice/index.html @@ -0,0 +1,300 @@ +--- +title: Prática de construção de objetos +slug: Aprender/JavaScript/Objetos/Object_building_practice +translation_of: Learn/JavaScript/Objects/Object_building_practice +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">Nos artigos anteriores, analisamos todos os detalhes essenciais da teoria e da sintaxe do objeto JavaScript, fornecendo uma base sólida para começar. Neste artigo, vamos mergulhar em um exercício prático, dando a você mais prática na construção de objetos JavaScript personalizados, com um resultado divertido e colorido.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Conhecimentos básicos de informática, conhecimento básico de HTML e CSS, familiaridade com o básico de JavaScript (veja <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) e o básico de OOJS (veja <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>Adiquirir alguma prática no uso de objetos e técnicas de orientação a objetos num contexto real.</td> + </tr> + </tbody> +</table> + +<h2 id="Vamos_saltitar_algumas_bolas">Vamos saltitar algumas bolas</h2> + +<p>Neste artigo, vamos escrever uma demo clássica de "bolas saltitantes", para mostrar o quão úteis os objetos podem ser em JavaScript. Nossas bolinhas vão saltar pela tela e mudam de cor quando se tocam. O exemplo acabado vai parecer um pouco assim:<img alt="" src="https://mdn.mozillademos.org/files/13865/bouncing-balls.png" style="display: block; height: 614px; margin: 0px auto; width: 800px;"></p> + +<ol> +</ol> + +<p>Este exemplo fará uso da <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Canvas API</a>, para desenhar as bolas na tela, e da <a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a> API para animar toda a exibição — você não precisa ter nenhum conhecimento prévio dessas APIs e esperamos que, no momento em que você terminar este artigo, você esteja interessado em explorá-los mais. Ao longo do caminho, faremos uso de alguns objetos bacanas, e mostraremos algumas técnicas legais, como bolas quicando nas paredes, e verificando se elas se chocaram (também conhecidas como <strong>detecção de colisão</strong>).</p> + +<h2 id="Começando">Começando</h2> + +<p>Para começar, faça cópias locais de nossos arquivos <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index.html">index.html</a></code>, <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css">style.css</a></code>, e <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main.js">main.js</a></code>. Estes contêm o seguinte, respectivamente:</p> + +<ol> + <li>Um documento HTML muito simples com um elemento {{HTMLElement("h1")}}, um elemento {{HTMLElement("canvas")}} para desenhar nossas bolas e elementos para aplicar nosso CSS e JavaScript em nosso HTML.</li> + <li>Alguns estilos muito simples, que servem principalmente para estilizar e posicionar o <code><h1></code>, e se livrar de qualquer barra de rolagem ou margem ao redor da borda da página (para que fique bonito e arrumado).</li> + <li>Algum JavaScript que serve para configurar o elemento <code><canvas></code> e fornecer uma função geral que vamos usar.</li> +</ol> + +<p>A primeira parte do script é assim:</p> + +<pre class="brush: js">const canvas = document.querySelector('canvas'); + +const ctx = canvas.getContext('2d'); + +const width = canvas.width = window.innerWidth; +const height = canvas.height = window.innerHeight;</pre> + +<p>Esse script obtém uma referência ao elemento <code><canvas></code> e, em seguida, chama o método <code><a href="/en-US/docs/Web/API/HTMLCanvasElement/getContext">getContext()</a></code> para nos fornecer um contexto no qual podemos começar a desenhar. A variável resultante (<code>ctx</code>) é o objeto que representa diretamente a área de desenho da tela e nos permite desenhar formas 2D nela.</p> + +<p>Em seguida, definimos variáveis chamadas <code>width</code> e <code>height</code>, e a largura e altura do elemento canvas (representado pelas propriedades <code>canvas.width</code> e <code>canvas.height</code>) para igualar a largura e a altura da viewport do navegador (a área em que a página da Web aparece — isso pode ser obtido das propriedades {{domxref("Window.innerWidth")}} e {{domxref("Window.innerHeight")}} ).</p> + +<p>Você verá aqui que estamos encadeando várias tarefas juntas, para que as variáveis sejam todas mais rápidas — isso é perfeitamente aceitável.</p> + +<p>A última parte do script inicial é a seguinte:</p> + +<pre class="brush: js">function random(min, max) { + const num = Math.floor(Math.random() * (max - min + 1)) + min; + return num; +}</pre> + +<p>Essa função usa dois números como argumentos e retorna um número aleatório no intervalo entre os dois.</p> + +<h2 id="Modelando_uma_bola_no_nosso_programa">Modelando uma bola no nosso programa</h2> + +<p>Nosso programa contará com muitas bolas saltando ao redor da tela. Como todas essas bolas se comportarão da mesma maneira, faz sentido representá-las com um objeto. Vamos começar adicionando o construtor a seguir ao final do código.</p> + +<pre class="brush: js">function Ball(x, y, velX, velY, color, size) { + this.x = x; + this.y = y; + this.velX = velX; + this.velY = velY; + this.color = color; + this.size = size; +}</pre> + +<p>Aqui incluímos alguns parâmetros que definem as propriedades que cada bola precisa para funcionar em nosso programa:</p> + +<ul> + <li>coordenadas <code>x</code> e <code>y</code> — coordenadas horizontal e vertical onde a bola vai começar na tela. Isso pode variar entre 0 (canto superior esquerdo) à largura e altura da janela de visualização do navegador (canto inferior direito).</li> + <li>velocidade horizontal e vertical (<code>velX</code> e <code>velY</code>) — cada bola recebe uma velocidade horizontal e vertical; em termos reais, esses valores serão adicionados regularmente aos valores das coordenadas <code>x</code>/<code>y</code> quando começarmos a animar as bolas, para movê-las tanto em cada quadro.</li> + <li><code>color</code> — cada bola recebe uma cor.</li> + <li><code>size</code> — cada bola recebe um tamanho — este será o seu raio, em pixels.</li> +</ul> + +<p>Isso classifica as propriedades, mas e os métodos? Queremos realmente fazer com que nossas bolas façam algo em nosso programa.</p> + +<h3 id="Desenhando_a_bola">Desenhando a bola</h3> + +<p>Primeiro adicione o seguinte método <code>draw()</code> ao <code>prototype</code> do <code>Ball()</code>:</p> + +<pre class="brush: js">Ball.prototype.draw = function() { + ctx.beginPath(); + ctx.fillStyle = this.color; + ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); + ctx.fill(); +}</pre> + +<p>Usando esta função, podemos dizer a nossa bola para desenhar-se na tela, chamando uma série de membros do contexto de tela 2D que definimos anteriormente (<code>ctx</code>). O contexto é como o papel, e agora queremos comandar nossa caneta para desenhar algo nela:</p> + +<ul> + <li>Primeiro, usamos <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code> para declarar que queremos desenhar uma forma no papel.</li> + <li>Em seguida, usamos <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> para definir a cor que queremos que a forma seja — nós a definimos como a propriedade <code>color</code> da nossa bola.</li> + <li>Em seguida, usamos o método <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/arc">arc()</a></code> para traçar uma forma de arco no papel. Seus parâmetros são: + <ul> + <li>A posição <code>x</code> e <code>y</code> do centro do arco — estamos especificando as propriedades <code>x</code> e <code>y</code> da nossa bola.</li> + <li>O raio do nosso arco — estamos especificando a propriedade <code>size</code> da nossa bola.</li> + <li>Os dois últimos parâmetros especificam o número inicial e final de graus em volta do círculo em que o arco é desenhado entre eles. Aqui nós especificamos 0 graus e <code>2 * PI</code>, que é o equivalente a 360 graus em radianos (irritantemente, você tem que especificar isso em radianos). Isso nos dá um círculo completo. Se você tivesse especificado apenas <code>1 * PI</code>, você obteria um semicírculo (180 graus).</li> + </ul> + </li> + <li>Por último, usamos o método <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code>, que basicamente diz "terminar de desenhar o caminho que começamos com <code>beginPath()</code>, e preencher a área que ocupa com a cor que especificamos anteriormente em <code>fillStyle</code>."</li> +</ul> + +<p>Você pode começar a testar seu objeto já.</p> + +<ol> + <li>Salve o código até o momento e carregue o arquivo HTML em um navegador.</li> + <li>Abra o console JavaScript do navegador e, em seguida, atualize a página para que o tamanho da tela mude para a viewport menor visível deixada quando o console for aberto.</li> + <li>Digite o seguinte para criar uma nova instância de bola: + <pre class="brush: js">let testBall = new Ball(50, 100, 4, 4, 'blue', 10);</pre> + </li> + <li>Tente chamar seus membros: + <pre class="brush: js">testBall.x +testBall.size +testBall.color +testBall.draw()</pre> + </li> + <li>Quando você entra na última linha, você deve ver a bola se desenhando em algum lugar na sua tela.</li> +</ol> + +<h3 id="Atualizando_os_dados_da_bola">Atualizando os dados da bola</h3> + +<p>Podemos desenhar a bola na posição, mas para começar a mover a bola, precisamos de uma função de atualização de algum tipo. Adicione o seguinte código na parte inferior do seu arquivo JavaScript, para adicionar um método <code>update()</code> ao <code>prototype</code> do <code>Ball()</code>:</p> + +<pre class="brush: js">Ball.prototype.update = function() { + if ((this.x + this.size) >= width) { + this.velX = -(this.velX); + } + + if ((this.x - this.size) <= 0) { + this.velX = -(this.velX); + } + + if ((this.y + this.size) >= height) { + this.velY = -(this.velY); + } + + if ((this.y - this.size) <= 0) { + this.velY = -(this.velY); + } + + this.x += this.velX; + this.y += this.velY; +}</pre> + +<p>As primeiras quatro partes da função verificam se a bola atingiu a borda da tela. Se tiver, invertemos a polaridade da velocidade relevante para fazer a bola viajar na direção oposta. Assim, por exemplo, se a bola estava viajando para cima (positivo <code>velY</code>), então a velocidade vertical é alterada de forma que ela comece a viajar para baixo (negativo <code>velY</code>).</p> + +<p>Nos quatro casos, estamos verificando se:</p> + +<ul> + <li>Se a coordenada <code>x</code> é maior que a largura da tela (a bola está saindo da borda direita).</li> + <li>Se a coordenada <code>x</code> é menor que 0 (a bola está saindo da borda esquerda).</li> + <li>Se a coordenada <code>y</code> é maior que a altura da tela (a bola está saindo da borda inferior).</li> + <li>Se a coordenada <code>y</code> é menor que 0 (a bola está saindo da borda superior).</li> +</ul> + +<p>Em cada caso, estamos incluindo o <code>size</code> da bola no cálculo, porque as coordenadas <code>x</code>/<code>y</code> estão no centro da bola, mas queremos que a borda da bola saia do perímetro — não queremos a bola para fique no meio da tela antes de quicar de volta.</p> + +<p>As duas últimas linhas adicionam o valor <code>velX</code> à coordenada <code>x</code>, e o valor <code>velY</code> à coordenada <code>y</code> — a bola é efitivamente movida cada vez que este método é chamado.</p> + +<p>Isso é o que será feito por ora; vamos continuar com alguma animação!</p> + +<h2 id="Animando_a_bola">Animando a bola</h2> + +<p>Agora vamos tornar isso divertido. Vamos começar a adicionar bolas à tela e a animá-las.</p> + +<ol> + <li>Primeiro, precisamos de um lugar para armazenar todas as nossas bolas. O array a seguir fará esse trabalho — adicione-o ao final do seu código agora: + <pre class="brush: js">let balls = [];</pre> + + <p>Todos os programas que animam as coisas geralmente envolvem um loop de animação, que serve para atualizar as informações no programa e renderizar a visualização resultante em cada quadro da animação; esta é a base para a maioria dos jogos e outros programas.</p> + </li> + <li>Adicione o seguinte ao final do seu código agora: + <pre class="brush: js">function loop() { + ctx.fillStyle = 'rgba(0, 0, 0, 0.25)'; + ctx.fillRect(0, 0, width, height); + + while (balls.length < 25) { + let size = random(10,20); + let ball = new Ball( + // ball position always drawn at least one ball width + // away from the edge of the canvas, to avoid drawing errors + random(0 + size,width - size), + random(0 + size,height - size), + random(-7,7), + random(-7,7), + 'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')', + size + ); + balls.push(ball); + } + + for (let i = 0; i < balls.length; i++) { + balls[i].draw(); + balls[i].update(); + } + + requestAnimationFrame(loop); +}</pre> + + <p>Nossa função <code>loop()</code> faz o seguinte:</p> + + <ul> + <li>Define a cor de preenchimento da tela como preto semitransparente e desenha um retângulo com a cor em toda a largura e altura da tela, usando <code>fillRect()</code> (os quatro parâmetros fornecem uma coordenada de início e uma largura e altura para o retângulo desenhado ). Isso serve para encobrir o desenho do quadro anterior antes que o próximo seja desenhado. Se você não fizer isso, você verá apenas longas cobras se movimentando ao redor da tela, em vez de mover as bolas! A cor do preenchimento é definida como semitransparente, <code>rgba(0,0,0,0.25)</code>, para permitir que os poucos quadros anteriores brilhem levemente, produzindo as pequenas trilhas atrás das bolas à medida que elas se movem. Se você mudou 0,25 para 1, você não vai mais vê-los. Tente variar esse número para ver o efeito que ele tem.</li> + <li>Cria uma nova instância de nossa <code>Ball()</code> usando valores aleatórios gerados com a nossa função <code>random()</code> então <code>push()</code>para o final de nosso array de bolas, mas somente enquanto o número de bolas no array é menor que 25. Então quando temos 25 bolas na tela, não aparecem mais bolas. Você pode tentar variar o número em<code>balls.length < 25</code> para obter mais ou menos bolas na tela. Dependendo de quanto poder de processamento seu computador / navegador possui, especificar vários milhares de bolas pode retardar bastante a animação!</li> + <li>Faz um loop em todas as <code>balls</code> no array de bolas e executa a função <code>draw()</code> e <code>update()</code> de cada bola para desenhar cada uma delas na tela, depois faz as atualizações necessárias para a posição e a velocidade no tempo para o próximo quadro.</li> + <li>Executa a função novamente usando o método <code>requestAnimationFrame()</code> — quando esse método é executado constantemente e passa o mesmo nome de função, ele executará essa função um número definido de vezes por segundo para criar uma animação suave. Isso geralmente é feito de forma recursiva — o que significa que a função está chamando a si mesma toda vez que é executada, portanto, ela será executada repetidas vezes.</li> + </ul> + </li> + <li>Por último mas não menos importante, adicione a seguinte linha à parte inferior do seu código — precisamos chamar a função uma vez para iniciar a animação. + <pre class="brush: js">loop();</pre> + </li> +</ol> + +<p>É isso para o básico — tente salvar e atualizar para testar suas bolas quicando!</p> + +<h2 id="Adicionando_detecção_de_colisão">Adicionando detecção de colisão</h2> + +<p>Agora, para um pouco de diversão, vamos adicionar alguma detecção de colisão ao nosso programa, para que nossas bolas saibam quando bateram em outra bola.</p> + +<ol> + <li>Primeiro de tudo, adicione a seguinte definição de método abaixo onde você definiu o método <code>update()</code> (ou seja, o bloco <code>Ball.prototype.update</code>). + + <pre class="brush: js">Ball.prototype.collisionDetect = function() { + for (let j = 0; j < balls.length; j++) { + if (!(this === balls[j])) { + const dx = this.x - balls[j].x; + const dy = this.y - balls[j].y; + const distance = Math.sqrt(dx * dx + dy * dy); + + if (distance < this.size + balls[j].size) { + balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')'; + } + } + } +}</pre> + + <p>Esse método é um pouco complexo, então não se preocupe se você não entender exatamente como isso funciona agora. Uma explicação a seguir:</p> + + <ul> + <li>Para cada bola, precisamos checar todas as outras bolas para ver se ela colidiu com a bola atual. Para fazer isso, abrimos outro loop <code>for</code> para percorrer todas as bolas no array <code>balls[]</code>.</li> + <li>Imediatamente dentro de nosso loop for, usamos uma instrução <code>if</code> para verificar se a bola atual em loop é a mesma bola que estamos verificando no momento. Não queremos verificar se uma bola colidiu consigo mesma! Para fazer isso, verificamos se a bola atual (ou seja, a bola cujo método collisionDetect está sendo invocado) é a mesma que a bola de loop (ou seja, a bola que está sendo referenciada pela iteração atual do loop for no collisionDetect método). Nós então usamos <code>!</code> para negar a verificação, para que o código dentro da instrução if seja executado apenas se eles não forem iguais.</li> + <li>Em seguida, usamos um algoritmo comum para verificar a colisão de dois círculos. Estamos basicamente verificando se alguma das áreas dos dois círculos se sobrepõe. Isso é explicado ainda mais na <a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a>.</li> + <li>Se uma colisão for detectada, o código dentro da instrução <code>if</code> interna será executado. Neste caso, estamos apenas definindo a propriedade <code>color</code> de ambos os círculos para uma nova cor aleatória. Poderíamos ter feito algo muito mais complexo, como fazer com que as bolas saltassem umas das outras de forma realista, mas isso teria sido muito mais complexo de implementar. Para essas simulações físicas, os desenvolvedores tendem a usar jogos ou bibliotecas físicas, como <a href="http://wellcaffeinated.net/PhysicsJS/">PhysicsJS</a>, <a href="http://brm.io/matter-js/">matter.js</a>, <a href="http://phaser.io/">Phaser</a>, etc.</li> + </ul> + </li> + <li>Você também precisa chamar esse método em cada quadro da animação. Adicione o seguinte abaixo do <code>balls[i].update();</code>: + <pre class="brush: js">balls[i].collisionDetect();</pre> + </li> + <li>Salve e atualize a demonstração novamente, e você verá suas bolas mudando de cor quando colidirem!</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you have trouble getting this example to work, try comparing your JavaScript code against our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">finished version</a> (also see it <a href="http://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html">running live</a>).</p> +</div> + +<h2 id="Sumário">Sumário</h2> + +<p>Esperamos que você tenha se divertido escrevendo seu próprio exemplo de bolas saltitantes aleatórias do mundo real, usando várias técnicas orientadas a objetos e objetos de todo o módulo! Isso deve ter lhe dado alguma prática útil no uso de objetos e um bom contexto do mundo real.</p> + +<p>É isso para artigos de objetos — tudo o que resta agora é para você testar suas habilidades na avaliação de objetos.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> — um guia para iniciantes sobre o uso de telas (canvas) 2D .</li> + <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></li> + <li><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></li> + <li><a href="/en-US/docs/Games/Techniques/3D_collision_detection">3D collision detection</a></li> + <li><a href="/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">2D breakout game using pure JavaScript</a> — um ótimo tutorial para iniciantes que mostra como criar um jogo 2D.</li> + <li><a href="/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser">2D breakout game using Phaser</a> — explica conceitos básicos da criação de um jogo 2D utilizando uma biblioteca JavaScript.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li> +</ul> diff --git a/files/pt-br/learn/javascript/objects/object_prototypes/index.html b/files/pt-br/learn/javascript/objects/object_prototypes/index.html new file mode 100644 index 0000000000..c574781301 --- /dev/null +++ b/files/pt-br/learn/javascript/objects/object_prototypes/index.html @@ -0,0 +1,269 @@ +--- +title: Protótipos de objetos +slug: Aprender/JavaScript/Objetos/Object_prototypes +translation_of: Learn/JavaScript/Objects/Object_prototypes +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">Protótipos são o mecanismo pelo qual objetos JavaScript herdam recursos uns dos outros. Neste artigo, explicamos como as cadeias de protótipos funcionam e observamos como a propriedade prototype pode ser usada para adicionar métodos aos construtores existentes.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requisitos:</th> + <td>Entender como funções em JavaScript funcionam, familiaridade com o básico de JavaScript (veja <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeiros Passos</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Elementos Construtivos</a>), e o básico de Orientação a Objetos em JavaScript (veja <a href="/pt-BR/docs/Aprender/JavaScript/Objetos">Introdução a Objetos</a>).</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Entender protótipos de objetos JavaScript, como a cadeia de protótipos funciona, e como adicionar novos métodos à propriedade <em>prototype.</em></td> + </tr> + </tbody> +</table> + +<h2 id="Uma_linguagem_baseada_em_protótipos">Uma linguagem baseada em protótipos?</h2> + +<p>O JavaScript é frequentemente descrito como uma <strong>linguagem baseada em protótipos</strong> — para fornecer herança, os objetos podem ter um <strong>objeto de protótipo</strong>, que atua como um objeto de modelo do qual herda métodos e propriedades. O objeto de protótipo de um objeto também pode ter um objeto de protótipo, do qual herda métodos e propriedades, e assim por diante. Isso geralmente é chamado de <strong>cadeia de protótipos</strong> e explica por que objetos diferentes têm propriedades e métodos definidos em outros objetos disponíveis para eles.</p> + +<p>Bem, para ser exato, as propriedades e os métodos são definidos na propriedade <code>prototype</code> nas funções construtoras dos Objetos, não nas próprias instâncias do objeto.</p> + +<p>Em JavaScript, é feito um link entre a instância do objeto e seu protótipo (sua propriedade <code>__proto__</code>, que é derivada da propriedade <code>prototype</code> no construtor), e as propriedades e os métodos são encontrados percorrendo a cadeia de protótipos.</p> + +<div class="note"> +<p><strong>Note:</strong> É importante entender que há uma distinção entre o protótipo de um objeto (que está disponível por meio de <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf">Object.getPrototypeOf(obj)</a></code>, ou por meio da propriedade <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code> ) e a propriedade <code>prototype</code> em funções construtoras. O primeiro é a propriedade em cada instância e o último é a propriedade no construtor. Ou seja, <code>Object.getPrototypeOf(new Foobar())</code> efere-se ao mesmo objeto que <code>Foobar.prototype</code>.</p> +</div> + +<p>Vejamos um exemplo para tornar isso um pouco mais claro.</p> + +<h2 id="Noções_básicas_sobre_objetos_de_protótipo">Noções básicas sobre objetos de protótipo</h2> + +<p>Aqui voltaremos ao exemplo em que terminamos de escrever nosso construtor <code>Person()</code> — carregamos o exemplo em seu navegador. Se você ainda não o conseguiu trabalhar no último artigo, use nosso exemplo <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> (veja também o <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">código-fonte</a>).</p> + +<p>Neste exemplo, definimos uma função construtora, assim:</p> + +<pre class="brush: js">function Person(first, last, age, gender, interests) { + + // property and method definitions + this.first = first; + this.last = last; +//... +}</pre> + +<p>Nós criamos então uma instância de objeto como esta:</p> + +<pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> + +<p>Se você digitar "<code>person1.</code>" em seu console JavaScript, você deve ver o navegador tentar concluir automaticamente isso com os nomes de membros disponíveis neste objeto:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13853/object-available-members.png" style="display: block; margin: 0 auto;"></p> + +<p>Nesta lista, você verá os membros definidos no construtor de <code>person1</code>'s constructor — <code>Person()</code> — <code>name</code>, <code>age</code>, <code>gender</code>, <code>interests</code>, <code>bio</code>, e <code>greeting</code>. No entanto, você também verá alguns outros membros — <code>watch</code>, <code>valueOf</code>, etc — estes estão definidos no objeto de protótipo do <code>Person()</code>, que é <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13891/MDN-Graphics-person-person-object-2.png" style="display: block; height: 150px; margin: 0px auto; width: 700px;"></p> + +<p>O que acontece se você chamar um método em <code>person1</code>, que é realmente definido em <code>Object</code>? Por exemplo:</p> + +<pre class="brush: js">person1.valueOf()</pre> + +<p>Este método — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">Object.valueOf()</a></code> é herdado por <code>person1</code> porque seu construtor é <code>Person()</code>, e o protótipo de <code>Person()</code> é <code>Object()</code>. <code>valueOf()</code> retorna o valor do objeto em que é chamado — experimente e veja! Nesse caso, o que acontece é:</p> + +<ul> + <li>O navegador verifica inicialmente se o objeto <code>person1</code> tem um método <code>valueOf()</code> disponível nele, conforme definido em seu construtor, <code>Person()</code>.</li> + <li>Se não tem, então o navegador verifica se o objeto (<code>Object()</code>) de protótipo do construtor <code>Person()</code> tem um método <code>valueOf()</code> disponível, então ele é chamado, e tudo está bem!</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Queremos reiterar que os métodos e as propriedades <strong>não </strong>são copiados de um objeto para outro na cadeia de protótipos — eles são acessados ao percorrer a cadeia como descrito acima.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Não existe uma maneira oficial de acessar diretamente o objeto protótipo de um objeto — os "links" entre os itens da cadeia são definidos em uma propriedade interna, chamada de <code>[[prototype]]</code> na especificação da linguagem JavaScript (veja {{glossary("ECMAScript")}}). A maioria dos navegadores modernos, no entanto, tem uma propriedade disponível neles chamada <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code> (que é sublinhada em ambos os lados), que contém o objeto de protótipo do construtor do objeto. Por exemplo, tente <code>person1.__proto__</code> and <code>person1.__proto__.__proto__</code> para ver como a cadeia se parece no código!</p> + +<p>Desde ECMAScript 2015 você pode acessar o objeto protótipo de um objeto indiretamente via <code>Object.getPrototypeOf(obj)</code>.</p> +</div> + +<h2 id="A_propriedade_prototype_Onde_os_membros_herdados_são_definidos">A propriedade prototype: Onde os membros herdados são definidos</h2> + +<p>Então, onde estão as propriedades e os métodos herdados definidos? Se você observar a página de referência do <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>, verá, à esquerda, um grande número de propriedades e métodos — muito mais do que o número de membros herdados que vimos disponíveis no objeto <code>person1</code>. Alguns são herdados e outros não — por que isso acontece?</p> + +<p>Como mencionado acima, os herdados são os definidos na propriedade <code>prototype</code> (você poderia chamá-lo de um subespaço de nomes) — ou seja, aqueles que começam com <code>Object.prototype.</code>, e não os que começam com apenas <code>Object.</code> O valor da propriedade <code>prototype</code> é um objeto, que é basicamente um bucket para armazenar propriedades e métodos que queremos que sejam herdados por objetos mais abaixo na cadeia de protótipos.</p> + +<p>Portanto, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch">Object.prototype.watch()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">Object.prototype.valueOf()</a></code>, etc., estão disponíveis para qualquer tipo de objeto que herda de <code>Object.prototype</code>, incluindo novas instâncias de objeto criadas a partir do construtor <code>Person()</code>.</p> + +<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>, e outros membros não definidos dentro do bloco <code>prototype</code> não são herdados por instâncias de objetos ou tipos de objetos que herdam de <code>Object.prototype</code>. Eles são métodos / propriedades disponíveis apenas no próprio construtor <code>Object()</code>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Isso parece estranho — como você pode ter um método definido em um construtor, que é em si uma função? Bem, uma função também é um tipo de objeto — veja a referência do construtor <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code> se você não acredita em nós.</p> +</div> + +<ol> + <li>Você pode conferir as propriedades de protótipo existentes para si mesmo — volte ao nosso exemplo anterior e tente inserir o seguinte no console JavaScript: + <pre class="brush: js">Person.prototype</pre> + </li> + <li>A saída não mostrará muito porque não definimos nada no protótipo do nosso construtor personalizado! Por padrão, o <code>prototype</code> de um construtor sempre começa vazio. Agora tente o seguinte: + <pre class="brush: js">Object.prototype</pre> + </li> +</ol> + +<p>Você verá um grande número de métodos definidos na propriedade <code>prototype</code> do <code>Object</code>, que estão disponíveis em objetos que herdam <code>Object</code>, como mostrado anteriormente.</p> + +<p>Você verá outros exemplos de herança de cadeia de protótipos em todo o JavaScript — tente procurar os métodos e propriedades definidos no protótipo dos objetos globais <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code>, e <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, por exemplo. Estes todos têm um número de membros definidos em seu protótipo, e é por isso que, por exemplo, quando você cria uma string, como esta:</p> + +<pre class="brush: js">var myString = 'This is my string.';</pre> + +<p><code>myString</code> imediatamente tem vários métodos úteis disponíveis, como <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split">split()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">indexOf()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a></code>, etc.</p> + +<div class="note"> +<p><strong>Nota</strong>: Vale a pena ler nosso guia mais aprofundado sobre <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Using_prototypes_in_JavaScript">Como usar protótipos em JavaScript</a>, uma vez que você tenha entendido esta seção e queira saber mais. Esta seção é intencionalmente simplificada para tornar esses conceitos um pouco mais fáceis de entender quando você os conhecer pela primeira vez.</p> +</div> + +<div class="warning"> +<p><strong>Importante</strong>: A propriedade <code>prototype</code> é uma das partes com o nome mais confuso do JavaScript — você pode pensar que <code>this</code> aponta para o objeto de protótipo do objeto atual, mas não (esse é um objeto interno que pode ser acessado por <code>__proto__</code>, lembra?) . Em vez disso, <code>prototype</code> é uma propriedade que contém um objeto no qual você define os membros que deseja herdar.</p> +</div> + +<h2 id="Revisitando_create">Revisitando create()</h2> + +<p>Anteriormente mostramos como o método <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code> pode ser usado para criar uma nova instância de objeto.</p> + +<ol> + <li>Por exemplo, tente isso no console JavaScript do seu exemplo anterior: + <pre class="brush: js">var person2 = Object.create(person1);</pre> + </li> + <li>O que <code>create()</code> realmente faz é criar um novo objeto a partir de um objeto de protótipo especificado. Aqui, <code>person2</code> está sendo criado usando <code>person1</code> como um objeto de protótipo. Você pode verificar isso inserindo o seguinte no console: + <pre class="brush: js">person2.__proto__</pre> + </li> +</ol> + +<p>Isso retornará o <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">person1</span></font>.</p> + +<h2 id="A_propriedade_do_construtor">A propriedade do construtor</h2> + +<p>Toda função de construtor possui uma propriedade prototype cujo valor é um objeto que contém uma propriedade <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code>. Esta propriedade construtora aponta para a função construtora original. Como você verá na próxima seção, as propriedades definidas na propriedade Person.prototype (ou, em geral, na propriedade prototype de uma função construtora, que é um objeto, conforme mencionado na seção acima) tornam-se disponíveis para todos os objetos de instância criados usando Construtor Person(). Portanto, a propriedade constructor também está disponível para os objetos person1 e person2.</p> + +<ol> + <li>Por exemplo, tente estes comandos no console: + <pre class="brush: js">person1.constructor +person2.constructor</pre> + + <p>Estes devem retornar o construtor <code>Person()</code>, pois contém a definição original dessas instâncias.</p> + + <p>Um truque inteligente é que você pode colocar parênteses no final da propriedade do <code>constructor</code> (contendo quaisquer parâmetros necessários) para criar outra instância de objeto daquele construtor. O construtor é uma função depois de tudo, então pode ser chamado usando parênteses; você só precisa incluir a palavra-chave <code>new</code> para especificar que deseja usar a função como um construtor.</p> + </li> + <li>Tente isso no console: + <pre class="brush: js">var person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);</pre> + </li> + <li>Agora tente acessar os recursos do seu novo objeto, por exemplo: + <pre class="brush: js">person3.name.first +person3.age +person3.bio()</pre> + </li> +</ol> + +<p>Isso funciona bem. Você não precisará usá-lo com frequência, mas pode ser realmente útil quando você deseja criar uma nova instância e não tem uma referência ao construtor original facilmente disponível por algum motivo.</p> + +<p>A propriedade do <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code> tem outros usos. Por exemplo, se você tiver uma instância de objeto e desejar retornar o nome do construtor do qual ela é uma instância, use o seguinte:</p> + +<pre class="brush: js">instanceName.constructor.name</pre> + +<p>Tente isso, por exemplo:</p> + +<pre class="brush: js">person1.constructor.name +</pre> + +<div class="note"> +<p><strong>Nota</strong>: O valor de <code>constructor.name</code> pode mudar (devido à herança prototípica, ligação, pré-processadores, transpilers, etc.), portanto, para exemplos mais complexos, você desejará usar o operador <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></code>. </p> +</div> + +<ol> +</ol> + +<h2 id="Modificando_Protótipos">Modificando Protótipos</h2> + +<p>Vamos dar uma olhada em um exemplo de modificação da propriedade <code>prototype</code> de uma função construtora — os métodos adicionados ao protótipo estão então disponíveis em todas as instâncias de objeto criadas a partir do construtor. Neste ponto, finalmente adicionaremos algo ao protótipo do nosso construtor <code>Person()</code>.</p> + +<ol> + <li>Volte para o nosso exemplo de <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> e faça uma cópia local do <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">código-fonte</a>. Abaixo do JavaScript existente, adicione o seguinte código, que adiciona um novo método à propriedade <code>prototype</code> do construtor: + + <pre class="brush: js">Person.prototype.farewell = function() { + alert(this.name.first + ' has left the building. Bye for now!'); +};</pre> + </li> + <li>Salve o código e carregue a página no navegador e tente inserir o seguinte na entrada de texto: + <pre class="brush: js">person1.farewell();</pre> + </li> +</ol> + +<p>Você deve receber uma mensagem de alerta, mostrando o nome da pessoa, conforme definido dentro do construtor. Isso é realmente útil, mas o que é ainda mais útil é que toda a cadeia de herança foi atualizada dinamicamente, disponibilizando automaticamente esse novo método em todas as instâncias de objeto derivadas do construtor.</p> + +<p>Pense nisso por um momento. Em nosso código, definimos o construtor, então criamos um objeto de instância a partir do construtor, então adicionamos um novo método ao protótipo do construtor:</p> + +<pre class="brush: js">function Person(first, last, age, gender, interests) { + + // property and method definitions + +} + +var person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']); + +Person.prototype.farewell = function() { + alert(this.name.first + ' has left the building. Bye for now!'); +};</pre> + +<p>Mas o método <code>farewell()</code> ainda está disponível na instância do objeto <code>person1</code> — seus membros foram atualizados automaticamente para incluir o método <code>farewell()</code>.</p> + +<div class="note"> +<p><strong>Note</strong>: Se você está tendo problemas para fazer este exemplo funcionar, dê uma olhada no nosso exemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html">oojs-class-prototype.html</a> (veja também <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html">running live</a>).</p> +</div> + +<p>Você raramente verá propriedades definidas na propriedade <code>prototype</code>, porque elas não são muito flexíveis quando definidas dessa forma. Por exemplo, você poderia adicionar uma propriedade assim:</p> + +<pre class="brush: js">Person.prototype.fullName = 'Bob Smith';</pre> + +<p>sso não é muito flexível, pois a pessoa pode não ser chamada assim. Seria muito melhor construir o <code>fullName</code> fora do <code>name.first</code> e <code>name.last</code>:</p> + +<pre class="brush: js">Person.prototype.fullName = this.name.first + ' ' + this.name.last;</pre> + +<p>No entanto, isso não funciona, pois <code>this</code> fará referência ao escopo global nesse caso, não ao escopo da função. Chamar essa propriedade retornaria <code>undefined undefined</code>. Isso funcionou bem no método que definimos anteriormente no protótipo porque ele está dentro um escopo de função, que será transferido com sucesso para o escopo da instância do objeto, portanto, você pode definir propriedades constantes no protótipo (ou seja, aquelas que nunca precisam ser alteradas), mas geralmente funciona melhor definir propriedades dentro do construtor.</p> + +<p>Na verdade, um padrão bastante comum para mais definições de objetos é definir as propriedades dentro do construtor e os métodos no protótipo. Isso torna o código mais fácil de ler, pois o construtor contém apenas as definições de propriedade e os métodos são divididos em blocos separados. Por exemplo:</p> + +<pre class="brush: js">// Constructor with property definitions + +function Test(a, b, c, d) { + // property definitions +} + +// First method definition + +Test.prototype.x = function() { ... }; + +// Second method definition + +Test.prototype.y = function() { ... }; + +// etc.</pre> + +<p>Esse padrão pode ser visto em ação no exemplo de <a href="https://github.com/zalun/school-plan-app/blob/master/stage9/js/index.js">aplicativo de plano escolar</a> de Piotr Zalewa.</p> + +<h2 id="Sumário">Sumário</h2> + +<p>Este artigo abrangeu protótipos de objetos JavaScript, incluindo como cadeias de objetos de protótipos permitem que objetos herdem recursos uns dos outros, a propriedade prototype e como ela pode ser usada para adicionar métodos a construtores e outros tópicos relacionados.</p> + +<p>No próximo artigo, veremos como você pode implementar a herança de funcionalidade entre dois dos seus próprios objetos personalizados.</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</p> + + + +<h2 id="Neste_módulo">Neste módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li> +</ul> |