sábado, 14 de agosto de 2010

Criando Objetos em JavaScript

Apesar de JavaScript ser uma linguagem procedural, ela também é uma linguagem orientada a objetos. Como pode ser isto?? A explicação é simples: inicialmente, o JavaScript era apenas uma linguagem estruturada, procedural, e ponto final. No entanto, ela ganhou tantas melhorias e novas ferramentas durante as suas muitas modificações, releituras e ampliações que se tornou possível utilizar facilmente o paradigma de orientação a objetos através de determinadas técnicas de construções de funções (além de poder utilizar o operador "." para navegar pela estrutura DOM).
Este artigo versa sobre como utilizar as ferramentas funcionais de JavaScript para trabalharmos com orientação a objeto, de forma a dar mais poder, flexibilidade e organização a nosso código. Parte do que material teórico de precisaremos já foi discutida no nosso velho tutorial sobre o objeto Date e o prototype, que pode ser acessado aqui.
Vale lembrar que objetos (na verdade, as suas classes) podem ser instanciados diversas vezes, sendo suas instâncias independentes umas das outras. As técnicas mostradas aqui respeitam esta característica do paradigma OO. Note que, como o JavaScript é não tipado e procedural, a linguagem assume que todos os objetos e métodos criados têm ampla visibilidade (modificador de acesso público) e nunca gerarão diretamente problemas de casting. Se você não entende este detalhe técnico, não se preocupe, pois ele não lhe fará falta... siga em frente tranqüilo!!

  • Criando um Objeto em JavaScript

Basta criar uma função normalmente e instanciá-la com o operador new. Em outras palavras, o operador new pode tornar em objeto qualquer função que você escreva. Vejamos:

function Object() {
}

window.alert(new Object());

O código acima declara uma função e, através do seu instanciamento, esta função é tornada em objeto na memória. Simples e fácil.
Parece louco que qualquer função em JavaScript é automaticamente uma candidata à classe e ao instanciamento, mas é isto mesmo: JS é muitas vezes simples e prático!!


  • Criando Métodos em JavaScript

Igualmente simples, para se criar um método basta se criar uma variável dentro de uma função onde seja declarada uma outra função, ao invés de um valor. Veja os exemplos:

function Object() {
this.getName = function() {
return "Object Hello World!!";
};
}

var object = new Object();
window.alert(object.getName());

Observações importantes:
1- Sempre que declarar um método, para se ter certeza de que este método vai ser uma função intrínseca ao objeto, deve-se usar a palavra reservada this, conforme mostra o exemplo acima;
2- Como a declaração de método é, na verdade, uma declaração de variável, deve-se terminá-la com o ponto-e-vírgula depois do fecha chaves!! Este é um erro clássico, mormente para quem faz este procedimento pela primeira vez;
3- Os métodos, em sendo funções, podem receber parâmetros normalmente, como qualquer outra função ordinária.

Outra maneira de se declarar um método é através de associação de funções a variáveis indiretamente, conforme o exemplo:

function Object() {
this.getFullName = getFullName;
}

function getFullName() {
return "Super Object Hello World!!";
}

var object = new Object();
window.alert(object.getFullName());

Esta técnica é útil quando se quer fazer métodos iguais para dois ou mais objetos. Como uma arquitetura bem projetada tende a eliminar este cenário, talvez seja mais interessante utilizar o primeiro idioma, vez que ele é de mais fácil leitura, menos verboso e, especialmente, evita o problema de duplicação de nomes de métodos e funções, o que tente a provocar erros bobos mas de difícil depuração.


  • Usando o Objeto Prototype

É possível, por extensão, adicionar-se propriedades e métodos a objetos já existentes do JavaScript. Para tanto, precisaremos acessar o objeto prototype, presente em todos os objetos, e capaz de absorver novas variáveis de funções e valores. Estude o exemplo abaixo, onde iremos modificar o objeto String para que ele tenha um método a mais, capaz de retornar a primeira palavra da String. Para se chamar o método, não é necessário se acessar o objeto prototype pois, uma vez este declarado através daquele, o método passa a compor a estrutura do objeto, em qualquer instância que seja.

String.prototype.getFirstWord = function() {
if(this.length > 1) {
for (i=0; i < this.length; i++) {
if (this.charAt(i) == ' ') {
return this.substring(0,i);
}
}
}
return "";
};
window.alert("pajé online".getFirstWord());


  • Conclusão

Apesar do JavaScript ter sido projetado, originalmente, como uma linguagem estrutural, procedural, simples e singela, hoje é possível, através de mecanismos simples e da maleabilidade creditada à linguagem, extendê-las de diversas maneiras, como a aplicação do paradigma de orientação a objetos. Não é tão complexo criar objetos, métodos e propriedades em JavaScript (na verdade, talvez até mais simples que em outras linguagens mais fechadas dentro dos conceitos do paradigma, como o Java), porém é de extremo valor para um desenvolvimento mais profissional, flexível, extensível e complexo, permitindo manter-se a ordem e a hierarquia dos dados, além da boa estrutura e manutenência do código.
Gostou?? Detestou?? Foi bom pra você?? Então COMENTE!!!

6 comentários:

Anônimo disse...

Opá, ótimo exemplo, parabéns

mas ainda estou com duvidas, vc pode explicar mais sobre este exemplo:

function Object() {
this.getName = function() {
return "Object Hello World!!";
};
}

var object = new Object();
window.alert(object.getName());

O Pajé disse...

Vamos lá: a primeira linha declara uma função, como outra função qualquer. Dentro desta função é que está a mágica: ao invés de criarmos simplesmente comandos seqüenciais, a gente cria variáveis que contêm declarações de funções, como o mostrado na linha 2. Isto faz com que a sua função principal se comporte como um objeto e que suas variáveis se comportem como métodos. Como o JavaScript não é exatamente orientado a objetos (não com o rigor de outras linguagens, como o Java) e não tem modificadores de acesso, é possível se instanciar esta função e se acessar seus métodos (variáveis internas) a qualquer momento e de qualquer lugar, como é mostrado nas duas últimas linhas.

Um termo técnico para este comportamento é que o JavaScript suporta os chamados "Closures", ou seja, a criação de variáveis associadas a funções que sobrevivem depois da chamado do objeto. Mais detalhes em:

http://blog.morrisjohns.com/javascript_closures_for_dummies.html

Juventude da congregação da rua Índio Sepé disse...

muito legal! parabéns!

O Pajé disse...

Beleza, rapaz!! Obrigado pelo retorno!!
Há mais artigos no Pajé sobre Javascript, sinta-se à vontade!!

Danilo disse...

Javascript sempre foi minha principal dor de cabeça. Espero que seu blog me ajude =)
Obrigado por compartilhar com a gente!!

O Pajé disse...

Obrigado, Danilo!
Por mais que o mundo hoje ofereça ferramentas de automação para desenvolvimento web, saber bem JavaScript ainda será um diferencial importante por um bom tempo. Há muitos artigos no Pajé sobre o assunto. Vale a pena visitá-los, clicando no marcador apropriado.