JavaScript - Programação orientada a objetos

Apesar de não possuir a estrutura mais elementar de uma linguagem orientada a objetos, a classe, a linguagem JavaScript pode sim, ser orientada a objetos. Neste artigo, não pretendo ensinar programação orientada (POO) a objeto, vou demostrar o básico para programar de forma OO em JavaScript.

[ Hits: 14.431 ]

Por: Paulo Dias em 24/07/2012 | Blog: http://naotenhosite.eu.nao.tenho


Encapsulamento - Herança - Prototype



Encapsulamento

O encapsulamento é um do principais pontos da programação orientada a objetos (OO).

Basicamente, encapsular significa separar um programa em partes, protegendo o acesso direto aos atributos de uma classe.

Para isso, geralmente, são utilizados modificadores de acesso e métodos específicos para a manipulação destes atributos (set / get).

Em JavaScript não temos estes modificadores de acesso, mas podemos criar encapsulamento assim:

function Objeto() { var atributoPrivado; this.setAtributoPrivado = setAtributoPrivado; this.getAtributoPrivado = getAtributoPrivado; function setAtributoPrivado( valor ) { atributoPrivado = valor; } function getAtributoPrivado() { return atributoPrivado; } } var objeto = new Objeto(); objeto.setAtributoPrivado( "teste" ); alert( objeto.getAtributoPrivado() );


Neste exemplo, usei "var" e "this" para simular os modificadores de acesso privado e público (ainda não tenho uma boa ideia para simular o protegido).

Com isso já podemos considerar nosso código encapsulado.

Herança

Herança é a habilidade de uma classe reutilizar (herdar) as características (atributos) e comportamentos (métodos) de outra.

A herança é geralmente caracterizada usando a relação "é um".

Exemplo: Cachorro é um Animal

Cachorro herda as características e comportamentos de um animal.

Vejamos um exemplo sobre como usar herança em JavaScript. Primeiro criamos duas "classes" (super e sub-classe):

function VeiculoTerrestre() { this.andar = function() { alert("andando"); } this.parar = function() { alert("parando"); } } function Carro() { this.ligarFarois = function() { alert("ligando os farois"); } }


Carro é um VeiculoTerrestre - Por isso é interessante herdar as características e comportamentos de VeiculoTerrestre em Carro.

JavaScript não implementa uma palavra chave (extends) para indicar que uma classe herda de outra, mas podemos utilizar herança através do prototype assim:

Carro.prototype = new VeiculoTerrestre; var carro = new Carro(); carro.andar(); carro.parar(); carro.ligarFarois();


Neste exemplo, usamos o prototype para criar a herança entre as "classes" VeiculoTerreste e Carro.

O prototype é propriedade que nos permite adicionar características e comportamentos para as "classes", após sua definição, assim podemos reutilizar toda a definição de uma classe em outra.

Mais do prototype

Utilizamos o prototype para criar herança colocando as funcionalidades de "VeiculoTerrestre" em "Carro".

O que pode ter passado desapercebido, é que através do prototype podemos criar novas características para as "classes" já definidas pelo JavaScript.

Como exemplo, vamos colocar um novo método na "classe" String do JavaScript.

Geralmente, usamos a função parseInt para converter String para inteiros, vamos deixar essa conversão mais OO, colocando um método parseInt em String, assim:

String.prototype.parseInt = function() { return parseInt( this ); } alert( "10".parseInt() )


É um exemplo simples (talvez inútil), mas a ideia é essa...

Conclusão

Termino esse artigo por aqui. Espero que seja útil.

Qualquer correção, dúvida ou sugestão, basta comentar.

Valeu pessoal!

Página anterior    

Páginas do artigo
   1. Introdução
   2. Encapsulamento - Herança - Prototype
Outros artigos deste autor

AWK - Manipulação de arquivos de texto

Zoneminder: Substituindo um Unifi NVR

Bitwise - Escovando os bits

Servidor FTP externo no Ubuntu 12.04 - Criação e configuração

Como criar um box para o Vagrant

Leitura recomendada

Extensões imperdíveis para quem usa o Git (e o GitHub) no Brackets

AJAX - Parte 1

Automação de tarefas com Gulp

Manual de XHTML

CSS - Manual de Estilo (parte 2)

  
Comentários
[1] Comentário enviado por m4iir1c10 em 26/07/2012 - 17:53h

Caramba!!!!!!

Uma luz acendeu na minha cabeca ao ler esse seu artigo, eu ja uso o javascript por muitos anos ( mais nunca estudei a fundo ), nos poucos artigos que eu li sobre javascript eu sempre ouvi a palavra "Orientada a Objeto" mais nunca eu realmente entendi oque era isso, quando eu escrevia os meus javascripts sempre os fiz direto, linear... quando eu via os codigos mais complexos eu simplemente copiava e colava... agora depois desse artigo foi como um big bang na minha cabeca... agora as coisas ficaram claras, wow !!!!

Valeu cara, voce jogou o meu conhecimento em javascript em outro nivel, eu vou retornar aos meus scripts mais agora desvendando novas fronteiras (y)


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts