Neste artigo relativo a JavaScript Orientado a Objectos vamos abordar a programação orientada a objectos de uma forma mais soft explicando a todos os que nunca viram POO (Programação Orientada a Objectos) em JavaScript, os conceitos básicos.
Criando Construtores
Em JavaScript, um construtor é nada mais que uma função comum, que é instanciada numa variável. Essa instância cria-se através da palavra reservada new, indicando a criação de um novo objecto.
|
1 2 |
function MyFunction() {} var MyVar = new MyFunction(); |
Definir Propriedades
Propriedades, ou também conhecidas como atributos, são dados que ficam encapsulados no escopo do objecto com que são relaccionadas.
Utilizemos um exemplo mais comum e menos abstracto como por exemplo as caracteristicas de uma pessoa.
|
1 2 3 4 5 |
function Individuo() { return this; } var eu = new Individuo(); eu.nome = "João Pedro Pereira"; eu.altura = "186"; |
No código acima, definimos um nome e uma altura apenas ao objecto eu. Qualquer outro objecto criado a partir de Individuo não terá essa propriedade. Podemos ver a utilidade disto quando precisamos de dar caracteristicas mais restrictas ao objecto. No entanto, caso estejamos a falar de caracteristicas que serão comuns a todos os objectos ai já será mais dispendioso fazê-lo desta forma, mas felizmente existem alternativas.
Imaginemos que estamos a falar de apenas de individuos portugueses. Seguindo o método mostrado anteriormente ficaria algo do género
|
1 2 3 4 |
var eu = new Individuo(); eu.nome = "João Pedro Pereira"; eu.altura = "186"; eu.pais = "Portugal"; |
Mas para cada individuo criado teriamos de introduzir o país, e se é sempre o mesmo qual o interesse? Podemos antes usar outra abordagem.
|
1 2 3 |
function Individuo() { this.pais = "Portugal"; } |
Assim todos os individuos criados têm a propriedade (atributo) país definida como Portugal. Mas imaginemos, que afinal vão existir um ou outro individuo na nossa lista que o seu país não é Portugal. Como proceder?
|
1 2 3 |
var eu = new Individuo(); var outro= new Individuo(); outro.pais = "Brasil"; |
Se fizermos a verificação da seguinte forma:
|
1 2 |
alert(outro.pais); alert(eu.pais); |
Podemos comprovar que o objecto eu, terá a propriedade pais com o valor de Portugal e o objecto outro terá a propriedade pais com o valor Brasil. Veja o comportamento.
Existem algumas propriedades / atributos que interessam ser dados ao nosso objecto logo quando ele é criado como por exemplo o nome (nesta caso concreto). E então podemos passar essa propriedade logo quando criamos o objecto. Mas para isso a nossa função vai ter de estar preparada para receber essas propriedades quando o objecto é criado. Então teremos de construir a nossa função algo semelhante a isto:
|
1 2 3 |
function Individuo(meu_nome) { this.nome = meu_nome; } |
E então quando criarmos o objecto daremos o nome ao individuo assim:
|
1 |
var eu = new Individuo("João Pedro Pereira"); |
No exemplo anterior só foi passado uma propriedade mas podem ser passadas quantas quisermos por exemplo:
|
1 2 3 4 5 6 |
function Individuo(meu_nome, meu_pais) { this.nome = meu_nome; this.pais = meu_pais; } var eu = new Individuo("João Pedro Pereira", "Portugal"); |
Definir Métodos
Tal como as propriedade / atributos (falados no capitulo anterior) é possível adicionar métodos a cada objecto, ou seja comportamentos (popularmente falando) e não passam de funções que são exectuadas no escopo do objecto ao qual estão atribuidos.
Vamos agora passar para um robot, vamos criar um pequeno robot.
|
1 2 3 4 5 6 7 8 |
function Robot(nome, versao) { this.id = nome; this.version = versao; this.talk = function(message) {alert(message);} } var robot = new Robot("Basic", "2.0"); robot.talk("Olá eu sou um robot"); |
Para quem utiliza libs como jQuery (por exemplo) começa a compreender como é que funcionam as coisas.
Só para brincar um bocadinho com isto vamos ver o comportamento com uma verificação..
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function Robot(nome, versao) { this.id = nome; this.version = versao; this.talk = function(message) { if(message == "introduce") { alert("Olá, o meu nome é " + this.id + " e estou na versão " + this.version); } else { alert(message); } } } var robot = new Robot("Basic", 2.0); robot.talk("introduce"); |
Espero que tenha gostado do post, qualquer sugestão é bem vinda. Têm de seguida links para complementar a leitura deste artigo. No próximo post falarei de encapsulamento (uma funcionalidade não existente no JavaScript mas é possível criar um recurso idêntico.
Excelente artigo João, fico à espera do próximo.
Gostei bastante deste artigo!
Venham mais que são sempre bem-vindos.
Partilha a tua experiência 🙂
Abraço.
Excelente artigo!
Eficiente, coeso e sucinto.
Vai direto ao ponto mas é ao mesmo tempo abrangente.
Parabéns.