path: root/files/pt-br/web/javascript/introduction_to_object-oriented_javascript/index.html

---
title: Introdução ao JavaScript Orientado a Objeto
slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
tags:
  - Construtor
  - Encapsular
  - Herança
  - Intermediário
  - Membros
  - Objeto
  - Orientado a Objeto
  - POO
translation_of: Learn/JavaScript/Objects
---
<p>JavaScript tem fortes capacidades de programação orientada a objetos, apesar de ocorrerem algumas discussões devido às diferenças da orientação a objetos no JavaScript em comparação com outras linguagens.</p>

<p>Esse artigo começa com uma introdução à programação orientada a objetos, em seguida, revisa o modelo de objetos em JavaScript e, por fim, demonstra conceitos de programação orientada a objetos no JavaScript.</p>

<h2 id="JavaScript_Review" name="JavaScript_Review">Revisão do Javascript</h2>

<p>Se você não se sente confiante com conceitos de JavaScript como variáveis, tipos, funções e escopo, você pode ler sobre estes tópicos em <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Uma reintrodução ao JavaScript</a>. Você também pode consultar o <a href="/en/JavaScript/Guide" title="en/JavaScript/Guide">Core JavaScript 1.5 Guide</a>.</p>

<h2 id="Object-oriented_programming" name="Object-oriented_programming">Programação Orientada a Objetos</h2>

<p>Programação Orientada a Objetos é um paradigma de programação que usa abstração para criar modelos baseados no mundo real. POO usa várias técnicas vindas de paradigmas previamente estabelecidos, incluindo modularidade, polimorfismo e encapsulamento. Atualmente, muitas linguagens de programação populares (como Java, JavaScript, C #, C ++, Python, PHP, Ruby e Objective-C) permitem a programação orientada a objetos (POO).</p>

<p>A POO pode ser vista como o projeto de software utilizando uma coleção de objetos em cooperação, em oposição a uma vista tradicional, em que um programa pode ser visto como uma série de funções, ou simplesmente como uma lista de instruções para o computador. Em OOP, cada objeto é capaz de receber mensagens, processar dados e envio de mensagens para outros objetos. Cada objeto pode ser visto como uma pequena máquina independente, com um papel ou responsabilidade distinta.</p>

<p>A POO se destina a promover uma maior flexibilidade e facilidade de manutenção na aplicação, e é muito popular em engenharia de softwares de grande escala. Em virtude de sua forte ênfase na modularidade, código orientado a objetos destina-se a ser mais simples de desenvolver e mais fácil de entender mais tarde, prestando-se a uma análise mais direta, codificação e compreensão de situações e procedimentos mais complexos do que nos métodos de programação menos modulares.</p>

<h2 id="Terminology" name="Terminology"><span class="short_text" id="result_box" lang="pt"><span class="hps">Terminologia</span></span></h2>

<dl>
 <dt>Namespaces</dt>
 <dd>Um recipiente que permite empacotar todas as funcionalidades em um nome único e específico da aplicação.</dd>
</dl>

<dl>
 <dt>Classe</dt>
 <dd><span class="short_text" id="result_box" lang="pt"><span class="hps">Define as</span> <span class="hps">características do objeto</span><span>.</span></span> Uma classe é uma definição modelo das propriedades e métodos de um objeto.</dd>
 <dt>Objeto</dt>
 <dd><span class="short_text" id="result_box" lang="pt"><span class="hps">Um exemplar</span><span class="hps"> de uma classe</span><span>.</span></span></dd>
 <dt><span class="short_text" id="result_box" lang="pt"><span class="hps">Atributo</span></span></dt>
 <dd>Uma característica do objeto, como cor, modelo, fabricante se estivemos representando um veículo, por exemplo.</dd>
 <dt>Método</dt>
 <dd>Uma ação do objeto, como ligar, desligar, frear se estivemos representando um veículo, por exemplo. É uma subrotina ou função associada a uma classe.</dd>
 <dt>C<span class="short_text" id="result_box" lang="pt"><span class="hps">onstrutor</span></span></dt>
 <dd>Um método chamado assim que um novo exemplar do objeto for criado. Ele geralmente tem o mesmo nome da classe que o contém.</dd>
 <dt>Herança</dt>
 <dd>Uma classe pode herdar características de outra classe.</dd>
 <dt>Encapsulamento</dt>
 <dd>Uma maneira de agrupar os dados e os métodos que usam os dados.</dd>
 <dt>Abstração</dt>
 <dd>A conjunção de herança complexa, métodos, propriedades de um objeto devem refletir adequadamente um modelo da realidade.</dd>
 <dt>Polimorfismo</dt>
 <dd>Diferentes classes podem definir o mesmo método ou propriedade.</dd>
</dl>

<p>Para uma descrição mais extensiva sobre programação orientada a objetos, veja <a href="http://pt.wikipedia.org/wiki/Orienta%C3%A7%C3%A3o_a_objetos">Orientação a objetos</a> na Wikipédia.</p>

<h2 id="Programação_Baseada_em_Protótipos">Programação Baseada em Protótipos</h2>

<p>Programação baseada em protótipos é um estilo de programação orientada a objetos na qual não temos presença de classes. Em vez disso, a reutilização de comportamento (equivalente à herança das linguagens baseadas em classes) é realizada através de um processo de decorar (ou expandir) objetos existentes que servem como <em>protótipos</em>. Este modelo também é conhecido como <strong>sem classes</strong>, <strong>orientado a protótipo</strong>, ou <strong>programação baseada em exemplares.</strong></p>

<p>O exemplo original (e o mais canônico ) de uma linguagem baseada em protótipo é a linguagem de programação Self desenvolvida por David Ungar e Randall Smith.  No entanto, o estilo de programação sem classes tem se tornado mais popular recentemente, e foi adotado por linguagens de programação como JavaScript, Cecil, NewtonScript, lo, MOO, REBOL, Kevo, Squeak (quando se utiliza o <em>framework </em>Viewer para manipular componentes do Morphic) e várias outras.</p>

<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming">Programação Orientada a Objetos em Javascript</h2>

<h3 id="Namespaces">Namespaces</h3>

<p>Um namespace é um recipiente que permite aos desenvolvedores agrupar funcionalidades em um único nome específico para uma aplicação. <strong>Em JavaScript, um namespace é simplesmente outro objeto contendo métodos, propriedades e objetos.</strong></p>

<div class="note">
<p><strong>Nota: </strong>É importante notar que, em Javascript, não existe diferença a nível da linguagem entre objetos normais e namespaces. Isso é diferente do que ocorre em muitas outras linguagens orientadas a objetos, e pode ser causa de confusão entre programadores(as) JavaScript novatos(as).</p>
</div>

<p>A ideia por trás de criar um namespace em JavaScript é simples: cria-se um objeto global e todas as variáveis, métodos e chamadas de função tornam-se propriedades daquele objeto. O uso de namespaces também reduz a chance de conflitos de nomes em uma aplicação, já que os objetos de cada aplicação são propriedades de um objeto global definido pela aplicação.</p>

<p>Vamos criar um objeto global chamado MEUAPP:</p>

<pre class="brush: js notranslate">// namespaces global
var MEUAPP = MEUAPP || {};</pre>

<p>No código acima, primeiro verificamos se MEUAPP já está definido (no mesmo arquivo ou em outro). Se estiver, usamos o objeto MEUAPP global existente. Caso contrário, criamos um objeto vazio chamado MEUAPP, que encapsula métodos, variáveis e objetos</p>

<p>Podemos também criar sub-espaços de nomes.</p>

<pre class="brush: js notranslate"><code>// sub namespaces
MEUAPP.eventos = {};</code></pre>

<p>A seguir, temos a sintaxe para criar um namespace e adicionar variáveis, funções e um método:</p>

<pre class="notranslate">// Criando um recipiente chamado MEUAPP.metodosEmComum
// para métodos e propriedades em comum

MEUAPP.metodosEmComum = {

  regexParaNome: "", // definindo uma expressao regular
                     // para validação de nomes

  regexParaTelefone: "",  // define uma expressao regular para
                          //validacao de numeros de telefone
}

// Objeto junto a declaracoes de método

MEUAPP.eventos = {

    adicionarTratador: function(elemento, tipo, funcao) {

    // codigos

    },

    removerTratador: function(elemento, tipo, funcao) {

    // codigos

    },

    obterEvento: function(e) {

    // codigos

    }

    // é possível adicionar outros métodos e propriedades

}

// Sintaxe para usar o método adicionarTratador:

MEUAPP.eventos.adicionarTratador("youre1", "tipo", tratador);</pre>

<h3 id="Core_Objects" name="Core_Objects">Objetos inclusos por padrão</h3>

<p>JavaScript tem vários objetos incluídos em seu núcleo; por exemplo, objetos como Math, Object, Array, e String. O exemplo abaixo mostra como usar o objeto Math para obter um número aleatório usando seu método random().</p>

<pre class="brush: js notranslate">console.log(Math.random());
</pre>

<div class="note"><strong>Nota:</strong> Este e todos os exemplos a seguir presumem que uma função <strong><code>console.log() </code></strong>está definida globalmente. A função <code><strong>console.log() </strong></code>não faz parte do JavaScript em si, mas muitos navegadores a implementam para ajudar no processo de depuração.</div>

<p>Veja <a href="/En/Core_JavaScript_1.5_Reference/Global_Objects" title="En/Core_JavaScript_1.5_Reference/Global_Objects">Core JavaScript 1.5 Reference:Global Objects</a> para a lista dos objetos inclusos por padrão em JavaScript.</p>

<p>Cada objeto em JavaScript é um exemplar do objeto <code>Object</code> e, portanto, herda todas as suas propriedades e métodos.</p>

<h3 id="Custom_Objects" name="Custom_Objects">Objetos Personalizados</h3>

<h4 id="The_Class" name="The_Class">A Classe</h4>

<p>JavaScript é uma linguagem baseada em protótipos e não contém a declaração <strong><code>class</code></strong>, como vemos em C++ ou Java. Isso, às vezes, causa confusão em programadores(as) acostumados(as) a linguagens com uma declaração para classes. Em vez disto, JavaScript usa funções como classes. Definir uma classe-função é tão fácil quanto definir uma função. No exemplo abaixo, nós definimos uma nova classe chamada Pessoa.</p>

<pre class="notranslate"><code>var Pessoa = function () {};</code></pre>

<p class="brush: js">O objeto (exemplar de uma classe)</p>

<p>Para criar um novo exemplar de um objeto <code><strong>obj</strong></code><em>, </em>usamos a declaração <code><strong>new obj</strong></code><em>, </em>atribuindo o resultado<em> </em>(que é do tipo <strong><code>obj</code></strong>) a uma variável que será acessada depois.<em> </em></p>

<p>No exemplo acima, definimos uma classe chamada <strong>Pessoa</strong>. No exemplo abaixo, criamos dois exemplares (<code><strong>pessoa1</strong></code> e <code><strong>pessoa2</strong></code>).</p>

<pre class="brush: js notranslate">var pessoa1 = new Pessoa();
var pessoa2 = new Pessoa();
</pre>

<div class="note"><strong>Nota: </strong>Por favor, veja também <a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> para um novo e alternativo método que cria um exemplar não-inicializado.</div>

<h4 id="The_Constructor" name="The_Constructor">O Construtor</h4>

<p>O construtor é chamado no momento que o exemplar do objeto é criado. O construtor é um método da classe. Em JavaScript, a função serve como o construtor do objeto. Portanto, não há a necessidade de definir explicitamente um método construtor. Toda ação declarada na classe é executada no momento da criação.</p>

<p>O construtor é usado para definir as propriedades do objeto ou para chamar metodos que preparem o objeto para o uso. O acréscimo de métodos e suas definições à classe funciona através do uso uma sintaxe diferente, descrita mais adiante, nesse artigo.</p>

<p>No exemplo abaixo, o construtor da classe <code>Pessoa</code> envia uma mensagem ao <em>log </em>quando um exemplar de <strong><code>Pessoa </code></strong>é criado.</p>

<pre class="brush: js notranslate">var Pessoa = function () {
  console.log("exemplar criado");
}

var pessoa1 = new Pessoa();
var pessoa2 = new Pessoa();
</pre>

<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29">Propriedades (atributos de objetos)</h4>

<p>Propriedades são variáveis contidas em uma classe; cada exemplar do objeto tem essas propriedades. Propriedades devem ser definidas no construtor (ou função) da classe, de modo que sejam criados em cada exemplar.</p>

<p>A palavra-chave <code>this,</code> que se refere ao objeto atual, te permite trabalhar com propriedades do lado de dentro da classe. Acessos (leitura ou escrita) uma propriedade do lado de fora da classe são feitos com a sintaxe <code>NomeDoExemplar.Propriedade</code>, assim como em C++, Java e várias outras linguagens. (Dentro da classe, a sintaxe this.Propriedade é usada para obter ou atribuir um valor ao objeto.)</p>

<pre class="brush: js notranslate">var Pessoa = function(nome) {
  this.nome = nome;
  console.log('Exemplar de Pessoa criado');
};

var pessoa1 = new Pessoa('Alice');
var pessoa2 = new Pessoa('Bob');

// mostrando as propriedades nome dos objetos
console.log('pessoa1 é ' + pessoa1.nome); // envia "pessoa1 é Alice" ao log
console.log('pessoa2 é ' + pessoa2.nome); // envia "pessoa2 é Bob" ao log</pre>

<h4 id="The_methods" name="The_methods">Métodos</h4>

<p>Métodos são funções (e definidos como funções), mas seguem a mesma lógica das propriedades. Chamar um método é parecido com acessar uma propriedade, mas você coloca <code><strong>()</strong></code> no final do nome do método, possivelmente com argumentos. Para definir um método, atribua uma função a uma propriedade com nome do <strong><code>prototype</code></strong> da classe. Depois disso, você pode chamar o método do objeto usando o mesmo nome ao qual você atribuiu a função.</p>

<p>No exemplo abaixo, definimos e usarmos o método <code><strong>dizerOla()</strong></code> na classe <code><strong>Pessoa</strong></code> .</p>

<pre class="brush: js notranslate">var Pessoa = function (genero) {
  this.genero = genero;
  alert('Pessoa instanciada');
}

Pessoa.prototype.dizerOla = function()
{
  alert ('hello');
};

var pessoa1 = new Pessoa('Masculino');
var pessoa2 = new Pessoa('Feminino');

// Chamando o método dizerOla em Pessoa .
pessoa1.dizerOla(); // hello
</pre>

<p>Em JavaScript métodos são funções normais de objetos que são vinculados a uma classe/objeto como uma propriedade, o que significa que eles podem ser invocados "fora de contexto" . Considere o seguinte exemplo de código: </p>

<pre class="brush: js notranslate">function Pessoa(genero) {
  this.genero = genero;
}

Pessoa.prototype.dizGenero = function()
{
  alert(this.genero);
};

var pessoa1 = new Pessoa('Masculino');
var informaGenero = pessoa1.dizGenero;

pessoa1.dizGenero(); // 'Masculino'
informaGenero(); // undefined
alert(informaGenero === pessoa1.dizGenero); //true
alert(informaGenero === Pessoa.prototype.dizGenero); //true
</pre>

<p>Este exemplo demonstra vários conceitos de uma vez. Mostrando que não existem "métodos por objetos " em Javascript as referências ao método apontam para a mesma função, aquela que definimos primeiro usando prototype. JavaScript "liga" o "contexto de objeto" atual à variável especial "this", quando uma função é invocada como um método (ou propriedade para ser exato) de um objeto. Isso equivale a chamar o método "call" do objeto <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a>, da seguinte maneira:</p>

<pre class="brush: js notranslate">informaGenero.call(pessoa1); //alerts 'Masculino'
</pre>

<div class="note">Veja mais sobre em <a href="/en/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Function.call</a> e <a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Function.apply</a></div>

<h4 id="Inheritance" name="Inheritance">Herança</h4>

<p>Herança é uma maneira de criar uma classe como uma versão especializados de uma ou mais classes (<em>JavaScript suporta apenas herança de classe única</em>). A classe especializada é comumente chamada de <em>filha</em>, e a outra classe é comumente chamada de <em>pai</em>. Em JavaScript você faz isso nomeando uma instância da classe pai para a classe filha, e então especializa-a. Em navegadores modernos você também pode usar <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a> para implementar herança.</p>

<div class="note">
<p>JavaScript não detecta o  <code>prototype.constructor</code> da classe filha, veja a propriedade <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype">Core JavaScript 1.5 Reference:Global Objects:Object:prototype</a>, então devemos declará-la manualmente.</p>
</div>

<p>No exemplo abaixo, nós definimos a classe Estudante como filha da classe Pessoa. Então redefinimos o método dizOi() e cria o método dizTchau().</p>

<pre class="brush: js notranslate">// define a classe Pessoa
function Pessoa() {}

Pessoa.prototype.caminhar = function(){
  alert ('Estou Caminhando!');
};
Pessoa.prototype.dizOi = function(){
  alert ('Oi!');
};

// define a classe  Estudante
function Estudante() {
  // Chama o método pai
  Pessoa.call(this);
}

// herda de Pessoa
Estudante.prototype = new Pessoa();

// <span id="result_box" lang="pt"><span class="hps">corrige</span> <span class="hps">o ponteiro</span> <span class="hps">construtor,</span> <span class="hps">que aponta para</span> <span class="hps">Pessoa</span></span>
Estudante.prototype.constructor = Estudante;

// adiciona o método dizOi
Estudante.prototype.dizOi = function(){
  alert('Oi, eu sou estudante');
}

// adiciona o método dizTchau
Estudante.prototype.dizTchau = function(){
  alert('tchau');
}

var estudante1 = new Estudante();
estudante1.dizOi();
estudante1.caminhar();
estudante1.dizTchau();

// checa a herança
alert(estudante1 instanceof Pessoa); // true
alert(estudante1 instanceof Estudante); // true
</pre>

<p>Utilizando Object.create a linha de herança deveria ser:</p>

<pre class="brush: js notranslate">Estudante<code class="js plain">.prototype = Object.create(</code>Pessoa<code class="js plain">.prototype);</code></pre>

<h4 id="Encapsulation" name="Encapsulation">Encapsulamento</h4>

<p>Em exemplo anterior, <code>Estudante</code> não precisava saber como <code>o método caminhar() da classe Pessoa</code> seria implementada, mas ainda pode utilizar esté método; a classe <code>Estudante</code> não possui necessidade <span class="short_text" id="result_box" lang="pt"><span class="alt-edited hps">explícita de </span></span>definir o método desde que não queremos alterar-lo. Isso se chama <strong>encapsulamento</strong>, <span id="result_box" lang="pt"><span class="hps">pelo qual</span> <span class="hps">cada</span> <span class="hps">classe herda</span> <span class="hps">os métodos de</span> <span class="hps">seu pai</span> <span class="hps">e só</span> <span class="hps">precisa definir</span> <span class="hps">as coisas</span> <span class="hps">que</span> <span class="hps">deseja</span> <span class="hps">mudar.</span></span></p>

<h4 id="Abstraction" name="Abstraction">Abstração</h4>

<p>A Abstração é uma mecânica que permite modelar a parte atual do problema no trabalho.  Isso pode ser alcançado com herança (especialização), ou composição. JavaScript <span class="short_text" id="result_box" lang="pt"><span class="hps">alcança</span> <span class="hps">especialização</span> <span class="hps">por herança</span></span>, e composição por deixando instâncias de classes ser os valores de atributos de outros objetos.</p>

<p>A Função de classe do JavaScript é hedar da classe Object (<span class="short_text" id="result_box" lang="pt"><span class="hps">isso demonstra</span> <span class="hps">a especialização</span> <span class="hps">do modelo</span></span>). e a propriedade Function.prototype é uma instância de Object (isso demonstra composição)</p>

<pre class="brush: js notranslate">var foo = function(){};
alert( 'foo é um Function: ' + (foo instanceof Function) );
alert( 'foo.prototype é um Object: ' + (foo.prototype instanceof Object) );
</pre>

<h4 id="Polymorphism" name="Polymorphism">Polimorfismo</h4>

<p>Assim como todos os métodos e propriedades são definidos dentro da propriedade <code>prototype</code>, classes diferentes podem definir métodos com o mesmo nome; os métodos tem como escopo a classe a qual foram definidos, a menos que duas classes possuam uma relação pai-filho. (ex.: uma herda da outra numa cadeia de herança).</p>

<h2 id="Notes" name="Notes">Notas</h2>

<p>As técnicas apresentadas nesse artigo para implementar programação orientada objetos em JavaScript não são as únicas que podem ser usadas.</p>

<p>As técnicas utilizadas nesse artigo não usam nenhum tipo de hacks, nem tenta implantar teorias de outras linguagens em JavaScript. </p>

<p>Existem outras técnicas que fazem um uso ainda mais avançado de programação orientada a  objetos em JavaScript, mas estão além desse artigo introdutório.</p>

<h2 id="References" name="References">Referências</h2>

<ol>
 <li>Mozilla. "<a href="/docs/Web/JavaScript/Guide" title="/docs/Web/JavaScript/Guide">Core JavaScript 1.5 Guide</a>", https://developer.mozilla.org/docs/Web/JavaScript/Guide</li>
 <li>Wikipedia. "Object-oriented programming", <a class="external" href="http://en.wikipedia.org/wiki/Object-oriented_programming" rel="freelink">http://en.wikipedia.org/wiki/Object-...ed_programming</a></li>
</ol>

<div class="originaldocinfo">
<h2 id="Original_Document_Information">Original Document Information</h2>

<ul>
 <li>Author(s): Fernando Trasviña &lt;f_trasvina at hotmail dot com&gt;</li>
 <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li>
</ul>
</div>

<p>Es: <a href="https://developer.mozilla.org/es/docs/Introducción_a_JavaScript_orientado_a_objetos" title="https://developer.mozilla.org/es/docs/Introducción_a_JavaScript_orientado_a_objetos">https://developer.mozilla.org/es/docs/Introducción_a_JavaScript_orientado_a_objetos  </a></p>