path: root/files/pt-br/conflicting/learn/javascript/objects/classes_in_javascript/index.html

---
title: JavaScript orientado a objetos para iniciantes
slug: conflicting/Learn/JavaScript/Objects/Classes_in_JavaScript
translation_of: Learn/JavaScript/Objects/Object-oriented_JS
original_slug: 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>