POO: Trabalhando com classes e objetos em JavaScript

Este guia de estudos mostrar� classes e objetos em JavaScript. Ser�o abordados os conceitos b�sicos de classes e objetos, al�m da formulaç�o de alguns programas did�ticos e exemplificat�rios para que haja o aprendizado sobre o funcionamento das classes e dos objetos.

Existem tr�s maneiras de definir classes em JavaScript.

A partir do uso de uma funç�o

� muito prov�vel que a via mais comum para criar uma classe seja uma funç�o, afinal pode-se definir uma funç�o normal e, ent�o, criar um objeto usando a palavra-chave new. Para definir propriedades para um objeto, veja o trecho de c�digo abaixo. Usando uma funç�o consegue-se definir classes atrav�s do mecanismo de definir e declarar internamente um m�todo em adiç�o ao prot�tipo.


function Pessoa(_nome) {
this.Nome = _nome;
}

Listagem 1. Classe atrav�s de funç�o

Para criar o objeto pessoa usando a rec�m-definida classe Pessoa, simplesmente declare-as e use a palavra-chave new para inicializ�-las:


pessoa = new Pessoa("Pedro");

Listagem 2. Criando um novo objeto

Usando objetos literais

Literais s�o maneiras menores para definir objetos e vetores em JavaScript. Aqui apresenta-se a mesma funcionalidade descrita nos exemplos passados, no entanto, desta vez, utiliza-se da sintaxe do objeto literal:


var carro = {
marca: "Ford",
modelo: "Ka",
getDetalhes: function () {
return this.marca + ' - ' + this.modelo;
    }
}

Listagem 3. Classe atrav�s de literais

Neste caso n�o � necess�rio, nem se pode, utilizar-se de uma inst�ncia da classe, pois esta j� existe! Ent�o, o problema reduz-se a t�o-somente utilizar-se de tal inst�ncia.


carro.modelo = "Novo Ka";
alert(carro.getDetalhes());

Listagem 4. Utilizando o objeto criado

Objetos em JavaScript

JavaScript � uma linguagem de programaç�o orientada a objetos e, assim sendo, suas vari�veis s�o dependentes dos objetos. Nas linguagens de programaç�o orientadas a objetos, os programadores criam seus pr�prios objetos e tipos de vari�veis. Um objeto � um tipo especial de vari�vel que cont�m propriedades e m�todos. J� viu-se at� agora muitos tipos de vari�veis, tais como vetor, string, etc. Em adiç�o a estes objetos criados, voc� pode criar os seus pr�prios.

Sabe-se que JavaScript � uma Linguagem de Programaç�o Baseada em Objetos. Uma Linguagem de Programaç�o Baseada em Objetos permite que se defina objetos � vontade do programador. Abaixo temos scripts que mostrar�o como declarar uma classe e como usar um objeto como uma inst�ncia de uma classe.


<html>
<head>
<script language="JavaScript">
function Carro()
{
  var Marca = "Sem marca";
  var Modelo = "Sem modelo";
  this.SetMarca = SetMarca;
  this.SetModelo = SetModelo;
  this.ShowMarca = DisplayMarca;
  this.ShowModelo = DisplayModelo; 
   
  function DisplayMarca(){
    alert(Marca);
  }
   
  function DisplayModelo(){
    alert(Modelo);
  }
   
  function SetMarca(_marca) {
    Marca = _marca;
  }
   
  function SetModelo(_modelo) {
      Modelo = _modelo;
  }
   
  }
  var carro = new Carro();
  carro.SetMarca("Ford");
  carro.SetModelo("Ka");
  carro.ShowMarca(); 
  carro.ShowModelo(); 
</script>
</head>
</body>
</html>

Listagem 5. Script de classes e objetos em JavaScript

Figura 1. Sa�da dos valores do objeto carro inseridos em tempo de execuç�o

A seguir vemos outro script que explica o m�todo de declaraç�o e os objetos


<html>
<body>
  <script type="text/javascript">
    carro = {
        Marca : "Ford",
        Modelo : "Ka",
        Caracteristicas : ["Preto", 1.0, "2 portas"],
         
        exibirDetalhes : function(){
          alert("Marca: " + this.Marca + " - Modelo: " + this.Modelo)
        }  
    }
     
    carro.exibirDetalhes();
    alert(carro.Caracteristicas[0])
      
    var Pessoa = { nome : "Maria", idade : 30, sexo: "F" } 
     
    var mapa = { 
        cantoSuperiorEsquerdo : { x : 1, y : 1 },
        cantoSuperiorDireito : { x : 10, y : 1 },
        cantoInferiorEsquerdo : { x : 1, y : 10 },
        cantoInferiorDireito : { x : 10, y : 10 }
    }
     
    alert(mapa.cantoInferiorDireito.x);      
  </script>
</body>
</html>

Listagem 6. Script para declaraç�o de m�todos

Figura 2. Sa�da de diferentes valores de objetos, os quais podem conter outros objetos

N�o h� a presença de classes, no entanto pode-se chamar os construtores que inicializar�o as informaç�es dos objetos, e estes podem atuar ainda como containers para as vari�veis de classes e m�todos. O objeto � uma inst�ncia de uma classe e um objeto � uma manifestaç�o em tempo de execuç�o de um tipo particular de classe.

Conclus�o

Neste artigo n�s vimos os conceitos b�sicos de classes e objetos em JavaScript. O conceito de Orientaç�o a Objetos � muito importante nos dias de hoje e muitas linguagens de programaç�o o implementa. Analise, veja e reveja os exemplos deste artigo. At� a pr�xima.

Outra leitura sobre o assunto pode ser visto no Artigo: Classes no Javascript.

POO: Trabalhando com classes e objetos em JavaScript

Veja neste artigo uma breve introdução à programação orientada a objetos em JavaScript, aprendendo a criar classes e objetos na principal linguagem de script web client-side.

A partir do uso de uma funç�o

Usando objetos literais

Objetos em JavaScript

Conclus�o

Artigos relacionados