Detalhes

Categoria: Javascript

Atualização: Terça, 14 Abril 2009 19:43

Autor: vovó Vicki

Acessos: 15518

Fala-se muito em programação orientada a objeto, mas é difícil encontrar programadores que realmente usam esta técnica. No começo é meio difícil de entender, mas, uma vez dominada, não dá pra pensar em viver sem ela (êta paixão braba :heart: ).

O planejamento

A primeira coisa que precisa ficar bem clara é que tipo de objeto se pretende criar. Depois é preciso planejar bem como este objeto será estruturado. Quando tudo estiver definido, basta seguir o roteiro mostrado a seguir.

O tipo de objeto

Vou usar como exemplo uma agenda de endereços.

A estrutura

Como é uma agenda bem simples, as informações serão apenas o nome e o telefone.

O construtor

Para que um objeto exista, é preciso construí-lo... e quem constrói é um construtor. Um construtor é uma espécie de função especial e a JavaScript possui um punhado delas. Se você leu o tutorial sobre arrays então já teve o prazer de conhecer um construtor, o senhor Array (talvez seja por isto que seu nome é escrito com A maiúsculo ). Quando se quer construir uma matriz chamamos o construtor Array e indicamos que desejamos um novo objeto do tipo que ele sabe construir, ou seja, alguma coisa como var matriz = new Array(5).

Como a JavaScript não tem idéia do objeto que queremos criar, vamos ter que por a mão na massa e criar um construtor particular:

// Construtor
function Agenda( nome, fone ) {
   this.nome = nome;
   this.fone = fone;
}

Cada um dos elementos deste objeto é indicado pelo prefixo .this. Neste caso, qualquer objeto construído pela Agenda terá dois elementos (nome e fone), também chamados de variáveis membro do objeto ou propriedades do objeto. Para referenciar uma variável membro do objeto criado, faça o seguinte:

alert( "O telefone da " + Agenda.nome + " é " + Agenda.fone );

Agora vamos testar o construtor Agenda no ScriptBox. Clique no botão [Rodar] e observe o resultado.

ScriptBox

Observe que podemos chamar o novo objeto de agenda, mas não de Agenda - com inicial maiúscula é o nome do construtor!

Tudo muito bem, tudo muito bom, mas esta agendinha tem apenas um registro e está muito mixuruca. Acontece que o construtor, como é o dono do molde (tecnicamente chamado de classe), pode nos fornecer quantos objetos pedirmos e podemos guardar estes objetos dentro de um outro objeto - um array - sem problema nenhum:

var matriz = new Array(3);
matriz[0] = new Agenda( 'Maricota', '555-5555' );
matriz[1] = new Agenda( 'Pedrim', '333-3333' );
matriz[2] = new Agenda( 'vovó', '000-0000' );

Neste caso, se quisermos o telefone do Pedrim, chamamos:

alert( matriz[1].nome + " " + matriz[1].fone );

Métodos

Uma classe que possua apenas propriedades (variáveis membro) serve de molde apenas para objetos um tanto paradões, né não? Acontece que podemos criar um pouco de movimento adicionando métodos ao molde. Por exemplo, podemos criar um método que produza um alert padronizado. Para isto, coloque logo depois do construtor o seguinte:

// Método para a classe Agenda
function nomeFone() {
   alert( this.nome + " tem o telefone " + this.fone );
}

// Protótipo do método
Agenda.prototype.nomeFone = nomeFone;

Agora está tudo mais fácil. Copie e cole o script completo no ScriptBox e curta o efeito:

// Construtor
function Agenda( nome, fone ) {
   this.nome = nome;
   this.fone = fone;
}

// Método para a classe Agenda
function nomeFone() {
   alert( this.nome + " tem o telefone " + this.fone );
}

// Protótipo do método
Agenda.prototype.nomeFone = nomeFone;

// Criando objetos
var matriz = new Array(3);
matriz[0] = new Agenda( 'Maricota', '555-5555' );
matriz[1] = new Agenda( 'Pedrim', '333-3333' );
matriz[2] = new Agenda( 'vovó', '000-0000' );

// Acionando um objeto
matriz[1].nomeFone();

Referências

• World Wide Web Consortium
• SelfHtml (em Alemão)
• Bin-Co. Free Scripts