And After - Design e Tecnologia por Sua Conta!
O desenvolvedor é um blog sobre desenvolvimento web, não tratando apenas de programação mas também compartilhando experiências, métodos, debates e tendências da internet.

O Desenvolvedor é um blog de www.andafter.org
Assinar o Feed RSS

Chris Benseler

[www]

Fotos sempre tiradas do lado direito do rosto. Que nem o Rei!
Viciado em web, trabalho com web. Javascript e (x)html são minha praia conhecida, e me arrisco com PHP e Java.
Na vida offline, futebol e música me distraem. E falar bobeiras com os amigos

Status
Karma: 16024
Opiniões: 30

Mais deste autor


Criar classes em javascript - usando a Prototype

Criar classes em javascript - usando a Prototype

Muito bomEste texto foi classificado como Muito bom
Em Internet, Programação, Softwares
Por Chris Benseler
31 de Julho de 2008

Um breve tutorial de como começar a usar orientação a objetos no javascript com o auxílio da Prototype

RSS Acompanhe O Desenvolvedor por Feeds!


Orientação a objetos no javascript? É possível, sim. E muito necessário, ainda mais quando lidamos com projetos de grande porte.
Okey, javascript não é uma linguagem OO (abreviação para orientação a objetos). Nem tudo da orientação a objetos em javascript é possível ser implementada; alguns dos (famosos) paradigmas da OO são impossíveis de serem atingidos por limitações técnicas (por exemplo, não existe o conceito de interface, ou métodos que possam ser sobreescritos). O que não inviabiliza o uso da OO no javascript.

Se você não conhece muito de orientação a objetos, sugiro que você procure na web ou na literatura apropriada os conceitos. Esse post falará sobre o uso da (biblioteca) Prototype na ajuda a implementar a OO.

Quem já implementou do zero uma classe em javascript sabe que a dificuldade não é grande, mas que a sintaxe é meio estranha. Por exemplo, vamos criar uma classe que abstrai um objeto Pessoa:
[update]exemplo retirado do blog do Rodrigo, nesse post aqui[/update]

<script language="javascript">
function Pessoa() {
    var nome;
    var idade;
    var email;
    this.getNome = getNome;
    this.getIdade = getIdade;
    this.getEmail = getEmail;
    this.setNome = setNome;
    this.setIdade = setIdade;
    this.setEmail = setEmail;
    this.mostraValores = mostraValores;
    function getNome() {
        return nome;
    }
    function getIdade() {
        return idade;
    }
    function getEmail() {
        return email;
    }
    function setNome(_nome) {
        nome = _nome;
    }
    function setIdade(_idade) {
        idade = _idade;
    }
    function setEmail(_email) {
        email = _email;
    }
    function mostraValores() {
        return ´Nome: ´ + nome +´ Idade: ´+ idade +´ anos Email: ´+ email;
    }
}

</script>


Para consumir essa classe:

<script language="javascript">

    var pessoa = new Pessoa();

    pessoa.setNome("Rodrigo Lazoti");

    pessoa.setIdade(26);

    pessoa.setEmail("rodrigo@test.com");

    alert(pessoa.mostraValores());

</script>


Veja que essa classe mais parece um monte de codificação estruturada agrupada, nem não há um construtor para ela.

Vou direto para a codificação de como ficaria tal classe usando a Prototype:

referenciando a prototype:

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js" type="text/javascript"/>
var Pessoa = Class.create();
Pessoa.prototype = {
    //construtor padrão
    initialize: function(nome, idade, email) {
        this.setNome(nome);
        this.setIdade(idade);
        this.setEmail(email);
    },
    setNome: function(nome) {
        this.nome = nome;
    },
    setIdade: function(idade) {
        this.idade = idade;
    },
    setEmail: function(email) {
        this.email = email;
    },
    mostraValores: function() {
        return "Nome: " + this.nome + " Idade: "+ this.idade + " anos - Email: "+ this.email;
    }
}


Quem está acostumado com OO percebe logo de cara que, dessa forma, a semântica usada é muito mais direta e clara; você sempre se refencia aos atributos da classe usando this, e você sempre é obrigado a ter um método initialize que funciona como o construtor.
Para esclarecer o código, na primeira linha é usado um objeto Class da própria prototype e chama-se o seu método create(); a partir do retorno desse método tem-se um objeto que pode ser trabalhado como uma classe da Prorotype. Vale a pena lembrar que o código usado para consumir a classe pode ser exatamente o mesmo enquanto a interface (resumidamente, assinatura dos métodos) das mesmas forem iguais.

Agora, uma coisa bacana (peguei o exemplo lá na API da Prototype) é como extender uma classe. Imagine que você quer criar a partir da classe Pessoa, uma classe Pirata; digamos que o seu Pirata é do passado, e não tem e-mail. Mas tem um navio.
O primeiro passo é extender a classe Pessoa, da seguinte forma:

var Pirata = Class.create(Pessoa, {});


Vamos ver como ficaria o código para sobreescrever o método setEmail() e adicionar um método novo:

var Pirata = Class.create(Pessoa, {
    // sobreescreve o método que define o e-mail
    setEmail: function() {
        this.email = null;
    },
    //cria um método para salvar o nome do navio dele
    setNavio: function(navio) {
        this.navio = navio;
    }
   
});


Sugiro para quem está afim de estudar mais, primeiro olhar a documentação da API da Prototype e procurar exemplos por ae na net, e depois pegar algo que você já fez e funciona e tentar reescrever, do zero, usando orientação a objetos. É uma curva de aprendizado não muito complexa, mas é uma forma bem diferente de se programar para quem não está acostumado!

[update]e é claro que eu esqueci apenas de de falar que é necessário incluir a biblioteca prototype no seu javascript. Você pode fazer download ou referenciar a mesma que é hospedada pelo Google Code[/update]

O que você achou do texto?

  • Muito ruim
  • Ruim
  • Regular
  • Bom
  • Muito bom
Sua opinião é o que faz a comunidade funcionar, colabore para isso!

Tags: prototype, api, javascript, classe, orientacao-a-objetos

Enviar para um amigo
Você pode comentar, assinar o feed, conhecer mais sobre o autor e ajudar a divulgar este artigo em sua ferramenta favorita através dos botões abaixo.
  • Rec6
  • ueba
  • linkk
  • dihitt
  • linkloko
  • websapiens
  • linkto
  • Eu curti

Comentários

Guilherme Serrano

31/7/2008 14:58:00

Sou muito preso ao server-side na questão de programação, agora que estou descobrindo as possibilidades do javascript... haha :P

Muito boa a explicação, li também o exemplo da API que tu linkou, complementa bem o post - até eu consegui entender :D


[Responder este comentário]

Rodrigo Lazoti
[www]

1/8/2008 23:25:00

Olá,

Já que utilizou partes do artigo que escrevi sobre OOP em Javascript do meu blog para escrever este post, poderia ter pelo menos citado de onde retirou o codigo.

[]s.

[Responder este comentário]

Otavio Nogueira
[www]

27/11/2008 16:42:00

Bha cara, perfeita explicação.
Ja fiz minha primeira.. valeus pelo post mesmo :)

[Responder este comentário]

Rafael Soares
[www]

31/7/2009 13:38:00

Não é por nada não, mas a biblioteca Prototype (<a href="http://www.prototypejs.org/">http://www.prototypejs.org</a>) é bem diferente da propriedade prototype (<a href="http://www.w3schools.com/jsref/jsref_prototype.asp">http://www.w3schools.com/jsref/jsref_prototype.asp</a>, usada para extender objetos.

A propriedade prototype faz parte do JavaScript, independente de bibliotecas de terceiros.

Portanto, se estiver usando a biblioteca Prototype só para isso, pode-se eliminar uma referência externa (e economizando um tempo precioso no carregamento da página) fazendo dessa forma:

function Pessoa(){
var nome;
var idade;
var email;
}

Pessoa.prototype = {
setNome: function(nome){
this.nome = nome;
};
};

[Responder este comentário]

Rafael Soares
[www]

31/7/2009 13:40:00

Só para constar, também é possível fazer dessa forma:

Pessoa.prototype.setNome = function(nome){
this.nome = nome;
};

[Responder este comentário]

Roberto Martins

11/2/2010 16:07:00

Legal.. mas o uso de OO não causaria uma grande perda de performance no Java script? não sei se já teve algum problema desse tipo. Estou atualmente em duvida de utilizar OO pq ouvi falar sobre essa perda. Sabe se ela é relevante?

[Responder este comentário]

Guilherme Serrano

11/2/2010 18:05:00

Até hoje não li nada a respeito da OO em javascript prejudicar a performance do código, vamos esperar a manifestão de um ninja no assunto: Chris, apareça! hehe :D

Deixe seu comentário!

Nome (requerido)

E-mail (requerido - não será divulgado)

URL

Quanto é 2 + 1?




web tracker