JavaScript Orientado a Objetos – Parte 3

Volto com a terceira parte sobre JavaScript Orientado a Objetos. Então chega de papo e vamos logo ao que interessa.

Propriedades Estáticas

Propriedades e métodos estáticos são aqueles que podem ser acessados de qualquer lugar do script, sem a necessidade de instanciar a classe. Considera-se que o JavaScript não suporta esse conceito, já que não possui classes, mas pode-se também simular.

Funções não deixam de ser objetos, e objetos podem ter propriedades. Veja no exemplo:

function Person() {  }
        Person.staticMethod = function() { alert("Método Estático"); }
        Person.staticMethod(): // "Método Estático"
        var me = new Person();
        me.staticMethod(); // Retornará erro

Também muito simples, e bem útil em certas ocasiões. Podemos tomar como exemplo a Mootools, com o Class e Class.empty. Class é um construtor, e Class.empty é um método estático.

Herança

A herança é outro conceito que o JavaScript não implementa formalmente, necessitando das famosas gambiarras. Quando bem empregada, permite uma grande reutilização de código, criando classes derivadas a partir de uma superclasse (classe-mãe), herdando todas as propriedades.

Existem vários tipos específicos de pessoas, em vários sentidos. Brasileiros, portugueses, americanos, vendedores, médicos, desenvolvedores… Mesmo sendo mais específicos, todos eles têm características comuns de uma pessoa. Assim, o construtor Brazilian é derivado de Person.

Primeiro, vamos criar os construtores com suas propriedades.

function Person() {
                this.eyes = 2;
                this.speak = function(message) {
                        alert(message);
                }
        }
        function Brazilian() {
                this.birthCountry = "Brasil";
        }

Pessoas falam, e isso se aplica também aos brasileiros, mas nem todas as pessoas nasceram no Brasil. Assim, a superclasse (ou super-construtor) é Person, e somente nela definimos as propriedades comuns.

Para fazer a herança existem vários métodos, mas vou explicar agora somente o que considero o mais simples e usado. Basta criar uma instância do “super-construtor” no protótipo do construtor derivado, assim:

Brazilian.prototype = new Person;

Todo o construtor Person foi instanciado como parte de Brazilian. Agora podemos criar um objeto Brazilian e utilizar tanto as propriedades específicas (definidas no próprio construtor) quanto as do “super-construtor”.

var me = new Brazilian("Julio Greff");
        alert(me.birthCountry); // "Brasil"
        me.speak("Olá!"); // "Olá!"

Existem outros métodos para herança, mas como já disse ficarão para outra oportunidade. E a série sobre JavaScript Orientado a Objetos se encerra aqui! Qualquer correção ou sugestão será bem vinda, basta comentar! Até!

Posts Relacionados

Postado em fevereiro 20, 2008 às 15:00

Comentários

  1. Igor Escobar

    Grande Júlio!

    Mandou muito bem nesta série falando sobre orientação a objetivos em javascript brother!

    Parabens ;)


  2. JulioGreff

    Obrigado, Igor.


  3. Rafael Marin

    Bom. tu sabe que eu ainda não manjo muito de Javascript,
    embora consiga ler o código.

    Mas quando eu for aprender JS orientado a objetos,
    teu site já está nos bookmarks =)


  4. JulioGreff

    Valeu, Rafael…


  5. Leone

    valeeeeu! ficou mara, eu tava precisando disso ;)


  6. Maujor

    Parabéns Júlio,
    Acabo de conhecer seu blog vindo de um link postado no fórum JavaScript iMasters.
    Gostei muito do seu JavaScript orientado a objetos.
    O artigo foi bem estruturado e explicado de uma maneira muito apropriada e de fácil entendimento.
    É difícil encontrar artigos bem escritos como este.


  7. Julio Greff

    @Maujor, @Leone: obrigado =)


  8. DhonySilva

    Que responsa hein cara!

    Maujor comentando assim teu Artigo.
    Ele está muito bom mesmo. Parabéns.


  9. Djalma Araújo

    Bicho, ta de parabens. Vo renderizar a ideia melhor, mas tu sabe a vantagem de utilizar isso com uma biblioteca js?


  10. Julio Greff

    @Djalma: você pode notar muito essa vantagem utilizando a Mootools, e também a jQuery. Tudo é orientado a objetos, dispensando variáveis globais. Tudo fica encapsulado dentro de seu objeto. Além do mais, o código fica mais reusável e legível.


  11. Vanderson

    No caso de um objeto literal ex:
    var me = {
    name: “vanderson”,
    idade: 20
    }
    Como faria para acessar as propriedades?
    Também li no livro “jquery em ação” que pode ser declarada uma propriedade da seguinte forma:
    var me = new Person()
    me['name'] = “vanderson”
    me['idade'] = 20
    Como faria para acessar as propriedades?[2]
    tentei acessar da forma que você passou e não pegou.
    só tenho essa duvida pq caso eu precise usar uma palavra reservada do JS um dia e ele não entenda que é um método ou propriedade.

    ótimo artigo, seu blog ta de parabéns.


  12. Leonardo Leite

    Olá!

    Parabéns cara, muito bem escrito e didático estes posts!

    Pelo o que eu vi no seu blog e em outro site, tem duas coisas que ainda não consegui fazer:

    #1
    quando vc falou de herança usou a linha de código:
    Brazilian.prototype = new Person;

    Pois bem, imagina que eu tenho um arquivo com a definição da classe Brazilian e outro com o programa principal q vai usar essa classe;
    Pra dar certo, eu só consegui pondo essa linha logo antes da instanciação do objeto da classe Brazilian no programa principal, mas eu queria que essa linha estivesse presente no arquivo que define a classe Brazilian!

    Já tentou isso? Consegue?


  13. Uilque Messias

    mto bom kra!!
    eu ainda não tinha o conhecimento que aprendi aqui!!!
    foi mto útil pra mim!!
    abraçsss


  14. Nicholas Pufal

    Tá ótimo! Parabéns.

    Eu tenho uma interpretação um pouco diferente de construtor. Para mim o construtor no Javascript é a classe (função) em si. O new Pessoa() é apenas a criação de uma instância da classe (objeto), não fazendo parte do construtor, afinal o construtor (a função, no caso) é invocado na criação de um objeto.

    Apenas tem um erro de digitação em um trecho. No lugar de:

    Person.staticMethod():

    Tem que substituir os dois pontos por ponto e vírgula.

    Eu sei que é banal e provavelmente muita gente já viu, mas não custa só para o caso de alguém der CTRL+C CTRL+V e ficar quebrando a cabeça.

    Abraços!


  15. Hard

    Cara, simples e objetivo!
    Ja ti vi no Blog no Chris e cai aqui procurando sobre isso!

    perfect Juliao!


  16. luiz fernando

    Julio, gostei muito deste post, na verdade fiquei muito tempo me perguntando se daria para usar os conceitos de POO em javascript. Muito bem explicado, parabéns!!!


  17. carutcho

    Cara,

    Sou mais um aqui para criticar seu post, e positivamente é claro rsss.
    Mt bom mesmo, parabéns, não é sempre q achamos bons posts assim e didáticos como o seu. Continue assim cara e sucesso!!!


Trackbacks

  1. Hard Inspire | QueryString no JavaScript Outubro 18, 2009 @ 16:25

Deixe seu comentário