path: root/files/pt-pt/orphaned/javascript_orientado_a_objetos/index.html

---
title: Javascript orientado a objetos
slug: Javascript_orientado_a_objetos
tags:
  - JavaScript
  - OOP
  - Todas_as_Categorias
---
<p>Para um melhor entendimento deste artigo, é necessário algum conhecimento sobre programação orientada a objetos, existem vários artigos na web e bons livros dedicados ao assunto. Tomemos como exemplo de objeto, um ventilador. Ao olharmos para este objeto, podemos identificá-lo dentre outros eletrodomésticos pelas suas características. Outros ventiladores podem apresentar características idênticas, porém são objetos distintos. Um ventilador pode estar desligado ou ligado em algumas velocidades. Detalhes de sua estrutura ficam ocultos internamente, pois não precisamos conhecê-los para fazer uso do mesmo.</p>

<p>Javascript difere-se de linguagens clássicas orientadas a objeto como Java e C++ principalmente por não possuir uma definição formal de classe. Entretanto possui seu próprio tipo de herança baseada em protótipo e faz uso constante de objetos baseando-se nesse tipo de herança.</p>

<h3 id="Fun.C3.A7.C3.A3o_construtora_e_propriedades_.2F_Classe_e_atributos" name="Fun.C3.A7.C3.A3o_construtora_e_propriedades_.2F_Classe_e_atributos">Função construtora e propriedades / Classe e atributos</h3>

<p>Na programação orientada a objetos, é comum utilizar tipos de objetos (classes) personalizados. Essas classes<span id="jsoo1"><sup><a href="/pt/Javascript_orientado_a_objetos#jsoop1" title="pt/Javascript_orientado_a_objetos#jsoop1">1</a></sup></span> são úteis em diversos casos, por exemplo, se seu programa manipula várias formas geométricas, poderiam haver várias classes de objetos como quadrados, retângulos e círculos. Utilizando nosso exemplo, vamos criar a função construtora <strong>Ventilador</strong>, contendo as propriedades<span id="jsoo2"><sup><a href="/pt/Javascript_orientado_a_objetos#jsoop2" title="pt/Javascript_orientado_a_objetos#jsoop2">2</a></sup></span> <strong>velocidadeMaxima</strong> e <strong>ligado</strong>. Observe que a propriedade <strong>velocidadeMaxima</strong> recebe o valor do argumento <strong>velMax</strong>.</p>

<pre class="brush: js">function Ventilador(velMax) {
    this.velocidadeMaxima = velMax;
    this.ligado = false;
}
</pre>

<p>A palavra-chave <code>this</code> é responsável por iniciar o objeto adequadamente.</p>

<h3 id="Inst.C3.A2ncias" name="Inst.C3.A2ncias">Instâncias</h3>

<p>A criação de um objeto, ou seja, a instanciação de uma classe é realizada com uso do operador <code>new</code>. Após este operador vem o nome da função construtora, responsável pela inicialização do objeto.</p>

<p>Alguns exemplos de instanciação:</p>

<pre class="brush: js">var obj = new Object();
var data = new Date();
</pre>

<p>Seguindo mais uma vez o exemplo do ventilador:</p>

<pre class="brush: js">var ventilador1 = new Ventilador(3);
</pre>

<h3 id="Acessando_propriedades" name="Acessando_propriedades">Acessando propriedades</h3>

<p>Para acessar as propriedades de um objeto você deve utilizar o operador “<code>.</code>” que deve ser precedido de uma referência ao objeto e sucedido pelo nome de uma de suas propriedades.</p>

<pre class="brush: js">console.log(ventilador1.velocidadeMaxima); // Retorna 3
</pre>

<p>Diferente das linguagens clássicas orientadas a objeto, Javascript permite que propriedades sejam adicionadas a qualquer momento durante a execução do código. Por exemplo, vamos adicionar a propriedade <strong>cor</strong> a nosso ventilador:</p>

<pre class="brush: js">ventilador1.cor = "branco";
console.log(ventilador1.cor); // Retorna branco
</pre>

<h3 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h3>

<p>Métodos em Javascript são funções invocadas por objetos. Para criar um novo método, basta atribuir uma função a um nome no objeto utilizando também o operador “<code>.</code>” como ocorre com as propriedades. O exemplo abaixo demonstra como definir o método <strong>ligar</strong> para a classe <strong>Ventilador</strong> utilizando a função <strong>liga</strong> através da propriedade <code>prototype</code>.</p>

<pre class="brush: js">function liga() {
    this.ligado = true;
}
Ventilador.prototype.ligar = liga;
</pre>

<p>Caso queira adicionar um método a um objeto em particular, pode fazê-lo da seguinte maneira:</p>

<pre class="brush: js">ventilador2 = new Ventilador(2);
ventilador2.ligar = liga;
</pre>

<p>Outro uso possível é definir o método na estrutura da classe:</p>

<pre class="brush: js">function liga() {
    this.ligado = true;
}
function Ventilador(velMax) {
    this.velocidadeMaxima = velMax;
    this.ligado = false;
    this.ligar = liga;
}
</pre>

<p>A palavra chave <code>this</code> é substituída pelo objeto que invoca a função, essa é uma das principais vantagens da utilização de métodos. Exemplo de uso:</p>

<pre class="brush: js">var ventilador = new Ventilador(3);
console.log(ventilador.ligado); // Retorna false
ventilador.ligar();
console.log(ventilador.ligado); // Retorna true
</pre>

<h3 id="Literais_de_objeto" name="Literais_de_objeto">Literais de objeto</h3>

<p>Os literais de objeto<span id="jsoo3"><sup><a href="/pt/Javascript_orientado_a_objetos#jsoop3" title="pt/Javascript_orientado_a_objetos#jsoop3">3</a></sup></span> possibilitam criar e iniciar objetos de uma maneira diferente. A sintaxe é definida por uma lista de pares nome/valor separados por vírgulas entre um par de chaves. Cada par nome/valor é definido pelo nome da propriedade seguido de dois pontos e do valor correspondente.</p>

<pre class="brush: js">var Livro = {
    titulo : "Os Três Mosqueteiros",
    autor : "Alexandre Dumas",
    capitulo1 : {
        titulo : "Os três presentes do sr. D'Artagnan pai",
        paginas : 11
    },
    capitulo2 : {
        titulo : "A antecâmara do sr. Tréville",
        paginas : 8
    }
}

// Acessando as propriedades:
console.log(Livro.titulo + " - " + Livro.autor + "\\n\\t" +
      Livro.capitulo1.titulo + " - " +
      Livro.capitulo1.paginas + " páginas\\n\\t" +
      Livro.capitulo2.titulo + " - " +
      Livro.capitulo2.paginas + " páginas");
</pre>

<h3 id="Composi.C3.A7.C3.A3o" name="Composi.C3.A7.C3.A3o">Composição</h3>

<p>A composição é um recurso utilizado para definir uma relação do tipo “tem um” (<em>“has a” relationship</em>), ou seja, um objeto que conta com outros objetos para formar sua estrutura. Por exemplo, um objeto do tipo Carro teria em sua estrutura objetos do tipo Roda, Volante, Banco. O exemplo anterior que descreve um livro, também demonstra o uso deste recurso.</p>

<pre class="brush: js">function Livro(titulo, autor) {
    this.titulo = titulo;
    this.autor = autor;
}

function Capitulo(titulo, paginas) {
    this.titulo = titulo;
    this.paginas = paginas;
}

var livro = new Livro("Os Três Mosqueteiros", "Alexandre Dumas");
var capitulo1 = new Capitulo("Os três presentes do sr. D'Artagnan pai", 11);
var capitulo2 = new Capitulo("A antecâmara do sr. Tréville", 8);

// Os objetos do tipo Capitulo fazem parte da composição do objeto livro
livro.capitulo1 = capitulo1;
livro.capitulo2 = capitulo2;

// Acessando as propriedades:
console.log(livro.titulo + " - " + livro.autor + "\\n\\t" +
      livro.capitulo1.titulo + " - " +
      livro.capitulo1.paginas + " páginas\\n\\t" +
      livro.capitulo2.titulo + " - " +
      livro.capitulo2.paginas + " páginas");
</pre>

<h3 id="Encapsulamento" name="Encapsulamento">Encapsulamento</h3>

<p>Como exposto no início do artigo, em nosso exemplo que representa um ventilador, detalhes da estrutura de alguns objetos ficam ocultos internamente, pois não precisamos conhecê-los para fazer uso dos mesmos. O encapsulamento tem por objetivo esconder essa informação que não precisa ser de conhecimento do utilizador da classe. Seu uso é uma boa prática quanto à manutenção da classe, pois podemos modificar a parte que é oculta ao utilizador sem alterar sua forma de implementação. Em Javascript podemos usar encapsulamento em propriedades de uma classe utilizando a palavra-chave <code>var</code> ao invés da palavra-chave <code>this</code> e do operador “<code>.</code>”.</p>

<pre class="brush: js">function Ventilador(velMax) {
    var maximaPermitida = 5; // Uso de encapsulamento
    var velocidadePadrao = 3; // Variáveis privadas
    // Avalia se a velocidade máxima fornecida é maior que zero e menor que 5, o limite atual.
    if (velMax &gt; 0 &amp;&amp; velMax &lt;= maximaPermitida) {
        // Caso seja, atribui o valor fornecido à propriedade velocidadeMaxima
        this.velocidadeMaxima = velMax;
    } else {
        // Caso contrário, atribui o valor da variável velocidadePadrao à propriedade velocidadeMaxima
        this.velocidadeMaxima = velocidadePadrao;
    }
    this.ligado = false;
    this.ligar = function() { // O método ligar agora é definido
        this.ligado = true; // por um literal de função, o que
    } // melhora a legibilidade do código.
}
ventilador = new Ventilador(0); // Cria a instância fornecendo o valor 0 para o argumento velMax;
console.log(ventilador.velocidadeMaxima); // Retorna 3 – o padrão
console.log(ventilador.maximaPermitida); // Retorna undefined
</pre>

<h3 id="Heran.C3.A7a" name="Heran.C3.A7a">Herança</h3>

<p>Em Javascript a herança ocorre por meio de objetos protótipos<span id="jsoo4"><sup><a href="/pt/Javascript_orientado_a_objetos#jsoop4" title="pt/Javascript_orientado_a_objetos#jsoop4">4</a></sup></span> e define uma relação do tipo “é um” (<em>“is a” relationship</em>). Cada objeto herda propriedades e métodos de seu objeto protótipo que é referenciado pela propriedade <code>prototype</code>. A classe <code>Object</code> é a superclasse de todas as classes definidas em Javascript, ou seja, todos os construtores criados herdam propriedades e métodos definidos no construtor <code>Object()</code> como por exemplo o método <code>toString()</code>, que assim como outros pode ser sobrescrito na subclasse. Em alguns casos, é conveniente utilizar este recurso em classes personalizadas, para isso basta definir um construtor como valor para a propriedade <code>prototype</code> da classe em questão. Como exemplo simplório, vamos definir a classe <strong>Eletrodomestico</strong> com a propriedade <strong>ligado</strong> e os métodos <strong>ligar</strong> e <strong>desligar</strong> comuns a todos os eletrodomésticos e então definir a classe <strong>Ventilador</strong> com propriedades e métodos peculiares.</p>

<pre class="brush: js">function Eletrodomestico() {
    this.ligado = false;
    this.ligar = function() {
        this.ligado = true;
    }
    this.desligar = function() {
        this.ligado = false;
    }
}

function Ventilador(velMax) {
    var maximaPermitida = 5; // Uso de encapsulamento
    var velocidadePadrao = 3; // Variáveis privadas
    if (velMax &gt; 0 &amp;&amp; velMax &lt;= maximaPermitida) {
        this.velocidadeMaxima = velMax;
    } else {
        this.velocidadeMaxima = velocidadePadrao;
    }
}

Ventilador.prototype = new Eletrodomestico(); // Define o objeto protótipo
ventilador = new Ventilador(4);
console.log(ventilador.ligado); // Retorna false
ventilador.ligar();
console.log(ventilador.ligado); // Retorna true
</pre>

<p>A utilização do objeto protótipo faz com que a propriedade <code>constructor</code> também seja herdada da superclasse, o que definiria a classe <strong>Eletrodomestico</strong> como valor da propriedade no objeto <strong>ventilador</strong>. Uma alternativa é definir de forma explícita a propriedade <code>constructor</code>:</p>

<pre class="brush: js">Ventilador.prototype.constructor = Ventilador;
</pre>

<h3 id="Conclus.C3.A3o" name="Conclus.C3.A3o">Conclusão</h3>

<p>Este artigo é apenas um incentivo à adoção dos conceitos da orientação a objetos em Javascript. Com o entendimento dos conceitos, os desenvolvedores podem corroborar as vantagens em códigos mais complexos, organizando o desenvolvimento e facilitando a manutenção dos scripts.</p>

<h3 id="Notas" name="Notas">Notas</h3>

<p><span id="jsoop1"><a href="/pt/Javascript_orientado_a_objetos#jsoo1" title="pt/Javascript_orientado_a_objetos#jsoo1">1.</a></span> Termo usado informalmente no artigo.<br>
 <span id="jsoop2"><a href="/pt/Javascript_orientado_a_objetos#jsoo2" title="pt/Javascript_orientado_a_objetos#jsoo2">2.</a></span> Nas linguagens clássicas orientadas a objeto, geralmente usa-se o termo atributo ou campo.<br>
 <span id="jsoop3"><a href="/pt/Javascript_orientado_a_objetos#jsoo3" title="pt/Javascript_orientado_a_objetos#jsoo3">3.</a></span> Conhecidos também como inicializadores de objetos ou objetos literais, implementados a partir de Javascript 1.2.<br>
 <span id="jsoop4"><a href="/pt/Javascript_orientado_a_objetos#jsoo4" title="pt/Javascript_orientado_a_objetos#jsoo4">4.</a></span> Implementados a partir de Javascript 1.1.</p>

<div class="originaldocinfo">
<h3 id="Informa.C3.A7.C3.B5es_Sobre_o_Documento_Original" name="Informa.C3.A7.C3.B5es_Sobre_o_Documento_Original">Informações Sobre o Documento Original</h3>

<ul>
 <li>Autor: <a href="/User:Leandro_Mercês_Xavier" title="User:Leandro_Mercês_Xavier">Leandro Mercês Xavier</a></li>
 <li>Última Atualização: 09/05/2007</li>
 <li>Informações sobre Copyright: Este artigo está disponível sob os termos da <a class="external" href="http://creativecommons.org/licenses/by-sa/2.5/br/">Creative Commons Atribuição-Compartilhamento pela mesma licença 2.5 Brasil</a></li>
</ul>
</div>

<p><span class="comment">Categorias</span></p>

<p><span class="comment">Interwiki Language Links</span></p>