Trabalhando com Classes no JavaScript    

Hoje vou abordar um tema que vejo que não é muito abordado em blogs de linha portuguesa e que vem se tornando cada vez mais necessário  conforme a necessidade de criar ricas interfaces na web se torna mais comum.

Antes de abordar o tema propriamente dito, acho importante dizer o que não será tratado nesse post. Caso você, caro leitor, veja a necessidade de abordar os assuntos que citarei a seguir, é só comentar.

Não vou mostrar nesse post uma introdução básica sobre JavaScript, ou seja, presumo que você já conheça a sintaxe e características básicas da linguagem, como o fato de ser uma linguagem dinâmica; não vou abordar JSON, AJAX, JQuery e outras técnicas comuns do JavaScript; não mostrarei bibliotecas que mudam a forma de criar classes, utilizarei apenas o JavaScript padrão e não vou explicar nomenclatura JavaScript, que é diferente de C#.

Dado o breve aviso, também devo informar que JavaScript não é uma linguagem 100% Orientada à Objetos (OO). Apesar de ser possível criar classes, falta algumas capacidades que tornariam possível um título de uma linguagem 100% Orientada a Objetos.

Então vamos lá!

Minha primeira Classe JavaScript

Classe, na maioria das linguagens de programação, é uma estrutura que descreve estados e comportamentos de um determinado objeto. Cada linguagem tem a sua forma de descrever essa estrutura, em geral com a palavra chave class. No JavaScript essa palavra chave não é utilizada (ainda), e nós utilizamos uma função para criar uma Classe.

Vamos ao primeiro código, a definição básica de uma Classe:

   1: var MinhaClasse= function() { 
   2:     }

Bom, até ai não temos uma classe, pois no JavaScript essa também é uma forma de declarar uma função simples. Para MinhaClasse se tornar uma classe, devemos adicionar atributos (estados) e métodos (comportamento). No JavaScript, assim como no Java, não existe o conceito de Propriedades, como no C# ou VB.Net. O encapsulamento é feito através de métodos Getters e Setters.

A classe MinhaClasse terá um atributo e um método público e um atributo e um método privado, apenas para demonstrar a diferença de visibilidade entre os membros da classe.

   1: var MinhaClasse = function() {
   2:   var propriedadePrivada = "Privado";
   3:   var metodoPrivado = function() {
   4:       w(propriedadePrivada);
   5:   }
   6:  
   7:   this.propriedadePublica = "Público";
   8:   this.metodoPublico = function() {
   9:       w(this.propriedadePublica);
  10:   }
  11: }

Como o código mostra, para fazer uma propriedade ou método privado no JavaScript você declara o método ou o atributo com a palavra chave var. Para tornar um atributo ou método público é utilizado a palavra chave this.

Agora sim MinhaClasse virou uma classe, e utilização é bem simples:

   1: var c = new MinhaClasse();

Se você utilizar o Intelisense do Visual Studio, verá que apenas os membros públicos (marcados com this) aparecerão.

image

É importante notar que o comportamento entre os membros de uma classe no JavaScript é diferente. Os métodos públicos conseguem enxergar métodos e atributos privados, porém, métodos privados não conseguem acessar métodos e atributos públicos. Portanto, o código abaixo NÃO funcionará:

   1: var metodoPrivado = function() {
   2:     w(propriedadePrivada);
   3:     br();
   4:     this.metodoPublico();
   5: }

Por outro lado, o método a seguir funcionará:

   1: this.metodoPublico = function() {
   2:    w(this.propriedadePublica);
   3:    br();
   4:    metodoPrivado();
   5: }

Se por acaso você quisesse criar classes internas, seria o mesmo procedimento de criar uma classe normal, porém seria dentro de uma outra classe já criada. A utilização é a mesma.

Agora que vimos como faz uma classe básica no JavaScript, vamos ao próximo item.

Construtores de Classe em JS

É normal em uma classe você fornecer dados para ela ser iniciada (transformada em objeto) e isso é feito através de um método que chamamos de Construtor. No JavaScript não existe um método especial para fazer isso. Mas perceba que uma classe nada mais é que um função elaborada, e quando chamamos o new de uma classe, automaticamente chamamos essa função. Portanto, para passar parâmetros á uma classe no momento da criação/instanciação, precisamos apenas definir parâmetros à função que define a classe. Veja:

   1: var MinhaClasse = function(nome) {
   2:    var propriedadePrivada = "Privado";
   3:    
   4:    //Outros membros...
   5:  
   6:    //Esse código será executado como Construtor
   7:    if (nome)
   8:        propriedadePrivada = nome;
   9:  
  10: }
  11:  
  12: //Utilizando 
  13: var c = new MinhaClasse("Fred");
  14: c.metodoPublico();

Como automaticamente todo parâmetro é opcional no JavaScript, se você não passar o parâmetro nome, ele ficará como undefined.

É importante que o código do “construtor” esteja sempre no final da Classe. Isso por que o JavaScript é uma linguagem interpretada, seu processamento é feito linha a linha, e se por acaso um código chamar um método ou variável que ainda não foi processado pelo Browser, retornará erro, informando que o método ou atributo não existe. Essa regra se aplica em qualquer realidade do JavaScript, por isso é importante sabermos qual será a ordem do processamento do Browser, para sabermos organizar nosso código.

Métodos Estáticos em JavaScript

É comum precisarmos de métodos estáticos em classes. No JavaScript isso é bem simples:

   1: var MinhaClasse = function() {
   2:   var propriedadePrivada = "Privado";
   3:   var metodoPrivado = function() {
   4:       w(propriedadePrivada);
   5:   }
   6:  
   7:   this.propriedadePublica = "Público";
   8:   this.metodoPublico = function() {
   9:       w(this.propriedadePublica);
  10:       br();
  11:       metodoPrivado();
  12:   }
  13: }
  14: //Definindo método estático
  15: MinhaClasse.metodoEstatico = function() {
  16:   w("Método Estático");
  17: }

Veja que estou apenas adicionando o método fora do “corpo” da classe.Isso torna o método estático. É quase como criar uma classe, com a diferença que você não define membros ao método, caso contrário ele transformaria em uma “sub-classe” (que também pode ser uma opção). A utilização do método estático seria assim:

   1: MinhaClasse.metodoEstatico();

Naturalmente, métodos estáticos só acessam métodos e atributos estáticos, sempre necessitando colocar o nome do classe (como acima). Caso queira acessar um método privado ou público, terá que criar uma instância da Classe.

Namespace

É comum, quando criamos muitas classes, querermos organiza-las em grupos (namespace em .Net e packages em Java). Em JavaScript isso também é possível, e de uma forma bem simples:

   1: //Criação do Namespace
   2: var classes = {}
   3:  
   4: //Criação da classe no Namespace
   5: classes.MinhaClasse = function() {
   6:     //Corpo da classe…

A única diferença para utilizar essa classe agora, é que no momento de criar a instância, devemos informar o Namespace:

   1: var c = new classes.MinhaClasse();
   2:     c.metodoPublico();

Conclusão e Dicas

E é isso! Muito simples criar classes em JavaScript, é muito importante, porque ajuda o seu código a ficar muito mais organizados.

Você pode ter reparado que utilizei dois métodos durante a classe que não são nativos e não mostrei antes, o w() e br(). Isso são apenas atalhos que criei para digitar menos e os códigos não ficarem tão carregados, mas eles são simples linhas como as abaixo:

   1: var w = function (a) { document.write(a) };
   2: var br = function () { w("<br/>") }

Perceba que em JavaScript podemos utilizar variáveis que fazem referências à métodos (como Delegates em .Net). Sabendo disso, ai vai uma dica ao criar classes:

Crie todos os métodos como privado (var), assim você não terá problemas com métodos da sua classe não enxergando métodos da própria classe. Feito isso, deixe público apenas os métodos que interessar, criando uma variável pública (this) com o mesmo nome, referenciando o método privado.

Como exemplo, vou reescrever a classe utilizada acima, reorganizando o código  para mostrar como fica. Abaixo o código completo para os exemplos:

   1: //Atalhos
   2: var w = function (a) { document.write(a) };
   3: var br = function () { w("<br/>") }
   4:  
   5: //Criação do Namespace
   6: var classes = {}
   7:  
   8: //Criação da classe no Namespace. Com construtor recebendo
   9: //parâmetro Nome
  10: classes.MinhaClasse = function(nome) {
  11: //Corpo da classe
  12:    
  13:    //Atributos públicos
  14:    var propriedadePrivada = "Privado";
  15:    var propriedadePublica = "Público";
  16:  
  17:    //Métodos privados
  18:    var metodoPrivado = function() {
  19:        w(propriedadePrivada);
  20:    }
  21:    
  22:    var metodoPublico = function() {
  23:        w(this.propriedadePublica);
  24:        br();
  25:        metodoPrivado();
  26:    }
  27:    
  28:    //Torno public dois membros
  29:    this.propriedadePublica = propriedadePublica;
  30:    this.metodoPublico = metodoPublico;
  31:    
  32:    //Esse código será executado como Construtor
  33:    if (nome)
  34:        propriedadePrivada = nome;
  35: }
  36:  
  37: //Definindo método estático
  38: classes.MinhaClasse.metodoEstatico = function() {
  39:    w("Método Estático");
  40: }
  41:  
  42: //Utilizo minha classe. Alterando o valor da propriedade
  43: //privada pelo construtor.
  44: var c = new classes.MinhaClasse("Fred");
  45: c.metodoPublico();
  46: c.propriedadePublica = "Publico Alterado";
  47: br();
  48: c.metodoPublico();
  49: br();
  50:  
  51: //Utilizo método estático
  52: classes.MinhaClasse.metodoEstatico();

Acredito que com esses exemplos, você conseguirá facilmente trabalhar com classes JavaScript em suas páginas, deixando seu código muito mais limpo e reaproveitável.

Abraços e até o próximo post!

13. maio 2011 00:00 by Frederico B. Emídio | Comments (3) | Permalink

Comments

Fred,
Ótimo post! Completo e objetivo! Parabéns!

Gostaria que você falasse também um pouco sobre CSS, uma poderosa ferramenta para enriquecer aplicações web, que muitos desconhecem o grande leque de opções que é oferecido.

Grande abraço!
Rafael
13/05/2011 18:24:30 #
Valeu Rafael!
Anotado!
Abs,
Fred
13/05/2011 18:26:53 #
Andre
Legal teu artigo, me diz uma coisa venho de um background em AS2 e HTML, estou fazendo meu TCC e sempre tive a pratica de fazer tudo em arquivo somente e com muitas funcoes, para meu TCC fiz um aplicativo de controle de peso, que usa o framework Phonegap para rodar o conteudo em Jquery Mobile e CSS em um smartphone Android.
Cheguei a parte de diagramas do TCC como diagramas de classes de requisitos e etc, minha pergunta eh muito dificil eu adaptar o conteudo atual para formatacao como a Universidade pede, que seria o mais proximo de Java com usos de classes, metodos, etc?
Voce nao se importa em trocar uns emails comigo?
04/10/2012 07:02:23 #
Comments are closed

Sobre mim

Minha Imagem

Meu nome é Frederico Batista Emídio, trabalho com desenvolvimento de sistemas profissionalmente a oito anos, porém, já faço sites pessoais a pelo menos dez anos.

Para saber mais clique aqui.

Páginas

Calendário

<<  novembro 2017  >>
seteququsedo
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

Visualizar posts em um Calendário
Sigua @fredemidio

MCP Asp.NET