Fazendo Javascript OO de forma fácil

AGRADEÇA AO AUTOR COMPARTILHE!

Essa é uma dica valiosa para o pessoal que quer escrever um Javascript mais “bonito”.

Embora a linguagem (em sua essência) seja Orientada a Objetos, temos que admitir que ela foge um pouco do convencional através do estilo de escrita prototype. Quero dizer que, é possível utilizarmos conceitos como encapsulamento, herança, atributos e métodos públicos e privados, etc. Mas de uma maneira um pouco diferente se comparada a linguagens como Python ou PHP.

Encapsular para conquistar!

A linguagem é composta por alguns objetos muito utilizados no cotidiano, como os objetos Array, Math e String. Estes (e outros objetos de core) são instâncias do objeto Object, que você pode representar através da seguinte expressão:

Você encontrará uma forma (muito bacana por sinal) de construir objetos através de expressões como essas:

Pode-se observar que é uma prática válida para organizar código através de namespaces.

Referência: Using Objects to organize your code

Função ou Classe?

Já utilizei algumas vezes o modelo acima… mas devo dizer que sou adepto a uma outra forma de construirmos classes em Javascript:

No exemplo acima, podemos reparar que seguindo o comportamento normal de uma função, não há surpresas na execução da expressão Pessoa. Porém, quando adicionamos o operador new na frente, o Javascript cria uma instância do tipo Pessoa. Basicamente é como se a expressão function fosse “multiuso”, sendo útil para definir funções e classes.

O mais legal disso é que, como você já deve ter reparado, com o uso do new ganhamos de graça um constructor (ou inicializador, como preferir) em nossa classe Pessoa.

Referência: Introduction to Object-Oriented Javascript

Métodos, propriedades e um pouco de confusão

Do constructor em diante, já me deparei com algumas vertentes de implementações do Javascript. Já encontrei algumas bem simples, outras um pouco mais complicadas… vou mostrar aqui a que eu acredito ser a mais usual. Não tenho propriedade para dizer se é o  modo certo ou mais elegante, apenas é o modo que incorpora características de OOP que melhor me atendeu:

Acima temos a construção da classe Linguagem. Em seu constructor aproveitamos para setar alguns atributos, como nome e versao, que são passados imediatamente na hora de instanciá-la.

Para criar um método para esta classe, vamos recorrer ao prototype do Javascript:

Resumidamente, estamos adicionando um método de instância na estrutura da classe. Fazemos isso adicionando uma função ao prototype da classe. Dessa forma o método terá acesso as propriedades do objeto na hora que for instanciado.

Se tentarmos executar a expressão Linguagem.descricaoCompleta, iremos nos deparar com um erro de método inexistente. Mas, se instanciarmos a classe veremos que o método está acessível:

Acima utilizamos o conceito de métodos e atributos de instância. Através do modelo Object Literal podemos ter um comportamento parecido com o conceito de métodos de classe:

Esta forma de criar classes e objetos em Javascript é executada com muito sucesso na biblioteca RGraph.

Referências: Javascript is Object Oriented Programming

Herdar é preciso

Para entender como criar heranças com o prototype do Javascript, vamos primeiramente criar um tipo chamado Framework:

No caso acima, iremos sobrescrever o comportamento do constructor da classe Linguagem.

E é aqui que a mágica acontece… instanciamos o tipo Linguagem no prototype da classe Framework. Isto fará com que o tipo Framework possua todas as propriedades de Linguagem. Depois corrigimos o constructor, apontando ele novamente para Framework:

Vamos adicionar um método exclusivo da classe Framework:

Instanciamos algumas vezes a classe Framework, e teremos o comportamento esperado de uma herança:

Existem algumas frameworks (como a Mootools) que facilitam a criação de classes e heranças em Javascript.

O exemplo completo está disponível para download em: http://github.com/kplaube/post-javascript-oop

Até a próxima…

Fonte: Blog Klaus Laube

AGRADEÇA AO AUTOR COMPARTILHE!

Klaus Peter Laube

Mais artigos deste autor »

Tecnólogo em Análise e Desenvolvimento de Sistemas pelo Centro Universitário de Jaraguá do Sul (UNERJ). Desenvolvedor Web de longa data, apaixonado por Python e defensor dos padrões Web. Escreve quando pode no http://www.klauslaube.com.br.


6 Comentários

Adriano
1

Ótimo post klaus, meus parabéns!!! Este era esse um assunto que eu estava procurando, acredito que um JavaScript Orientado a Objetos ficará mais bonito, limpo e o principal, mais funcional para nossas aplicações. Sou do tipo de pessoa que procura antes de tudo, criar um padrão para que os projetos tornem-se melhores, fáceis para manutenção e mais funcionais, então para quem já usa linguagens orientadas a objetos como PHP por exemplo, porque não usar JavaScript Orientado a Objetos também? Com toda a certeza vale a pena a pesquisa, o esforço e implementação desta idéia.

sombriks
5

No terceiro exemplo você diz no comentário que “Pessoa()” é uma “// Pessoa instanciada!”, e isto não é correto. Chamar uma função apenas executa a mesma no contexto do objeto onde ela foi declarada, neste caso o objeto global.

Instância somente com ‘new’ ou ‘{}’, com o último podendo declarar atributos públicos, como foi perfeitamente colocado no segundo exemplo.

O material está bem legal, e como referência de apoio eu sempre deixo a reintrodução, que é bem mais abrangente. A seção de Custom Objects cobre tudo isto que você apresentou, mas é bem mais generalista.

https://developer.mozilla.org/en/JavaScript/A_re-introduction_to_JavaScript#Custom_objects

Klaus Peter Laube
6

@sombriks,

O comentário é uma representação da saída (no caso o console.log) apenas. Perfeita a sua coloção… talvez tenha me expressado mal, mas o resultado deste exemplo é somente mostrar a chamada da função precedida por “new” executa o bloco da função como um constructor.

Obrigado por participar.

Deixe seu comentário

Seu endereço de e-mail não será publicado. Campos com * são obrigatórios!

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">