Data de publicação: Jan 16, 2018 11:57:44 PM
OOP: Object Oriented Programming
Visualize o seguinte video (18:56 min.)
Ele explica de uma forma clara a passagem de código "normal" para código "Orientado a Objetos"
Inclui a criação de um objecto, de um método e de uma classe.
Retirado do canal LearnWebCode.
Ao longo da demonstração vamos aprender o significado dos seguintes conceitos:
Objeto (e Propriedade)
Método
Classe
Função construtora
Vamos também aprender o significado das seguintes palavras reservadas:
this
new
1. Começamos por escrever na consola duas frases simples com o nome e a cor favorita do Pedro e da Ana:
Para abrir a consola no Chrome, clicar em CTRL+SHIF+J.
Mais info em sites.aebenfica.org/apontamentos-tic/programacao/javascriptdebugging
console.log("Olá o meu nome é Pedro e a minha cor favorita é o amarelo");
console.log("Olá o meu nome é Ana e a minha cor favorita é o azul");
2. Como não queremos repetir o mesmo texto vamos criar uma função com o nome pessoa():
function pessoa() {
console.log("Olá o meu nome é " + variavel1 + " e a minha cor favorita é " + variavel2 );
}
pessoa("Pedro", "amarelo");
pessoa("Ana", "azul");
3. Para que as chamadas à função pessoa() funcionem em boas condições vamos definir dois parâmetros de entrada - nome e corFavorita:
function pessoa(nome, corFavorita) {
console.log("Olá o meu nome é " + nome + " e a minha cor favorita é " + corFavorita);
}
pessoa("Pedro", "amarelo");
pessoa("Ana", "azul");
4. Para introduzirmos o conceito de objeto, começamos por criar duas variáveis para o nome e a cor favorita do Pedro:
function pessoa(nome, corFavorita) {
console.log("Olá o meu nome é " + nome + " e a minha cor favorita é " + corFavorita);
}
var nomePedro = "Pedro";
var corFavoritaPedro = "amarelo";
pessoa(nomePedro, corFavoritaPedro);
pessoa("Ana", "azul");
A pessoa Pedro é para todos os efeitos um objeto.
As variáveis nomePedro e corFavoritaPedro estão intrinsecamente relacionadas com a pessoa Pedro, ou seja, são características ou propriedades da pessoa Pedro.
O termo objeto refere-se a uma variável que tem lá dentro outras variáveis.
Os objetos surgem com o objectivo de estruturar os dados no nosso código, permitindo criar uma hierarquia lógica na sua utilização.
Outra grande vantagem dos objetos é a possibilidade de poderem ser reutilizados ao longo do nosso código (vamos ver mais à frente com a função construtora).
5. Para criar um objeto utilizamos também a palavra reservada var = { ... }. As chavetas indicam que se trata de um objeto (e não de uma variável dita normal)
Vamos criar o objeto pedro que, neste exemplo, vai conter duas variáveis - nome e corFavorita do referido objeto pedro:
function pessoa(nome, corFavorita) {
console.log("Olá o meu nome é " + nome + " e a minha cor favorita é " + corFavorita);
}
var pedro = {
nome: "Pedro",
corFavorita: "amarelo"
}
pessoa(pedro.nome, pedro.corFavorita);
pessoa("Ana", "azul");
Para trabalharmos com a variável criada dentro do objeto utilizamos sempre a sintaxe objeto.propriedade.
Ou seja a função pessoa() vai ser chamada com dois parâmetros de entrada: pedro.nome e pedro.corFavorita
6. Agora vamos criar uma função dentro do Objeto:
var pedro = {
nome: "Pedro",
corFavorita: "amarelo",
saudacao: function() {
console.log("Olá mundo!");
}
}
pedro.saudacao()
As funções quando são criadas dentro de um objeto recebem o nome especial de método que definem comportamentos/ações.
Na Programação Orientada a Objetos (POO) ou OOP em inglês:
Deixamos de organizar as nossas variáveis e funções de forma isolada.
Um objecto é uma variável que contem outras variáveis agrupadas em dados e métodos.
Em OOP começamos a pensar em temos de objetos auto-suficientes, devidamente estruturados em dados e métodos.
Um método define um comportamento, ou seja uma ação.
Em termos práticos um objeto em Javascript contem dados (que são nomes) e métodos (que são ações definidas por verbos).
Exemplos de dados (ou seja de nomes):
nome
cor
altura
Exemplos de métodos (que definem comportamentos materializados por verbos):
saudar
correr
andar
saltar
Recapitulando:
Os métodos são comportamentos (verbos) que definem ações.
7. Vamos, agora, ajustar a função saudacao para incluir a frase inicial:
var pedro = {
nome: "Pedro",
corFavorita: "amarelo",
saudacao: function() {
console.log("Olá o meu nome é " + pedro.nome + " e a minha cor favorita é " + pedro.corFavorita);
}
}
pedro.saudacao()
Função construtora
Para o pedro temos o objeto criado, mas agora temos de criar um objeto ana para armazenar os dados da Ana...
Podíamos duplicar o objeto inicial, mas isso seria uma repetição, criando duplicação de código essencialmente igual (não sendo por isso uma boa pratica).
Sempre que há uma repetição de código, então há razão suficiente, para se criar uma classe que não é mais do que um objeto reutilizável.
8. Vamos criar um objeto reutilizável, ou seja, vamos criar uma classe:
Uma classe é uma receita para objetos, um modelo reutilizável.
Em Javascript as classes são conhecidas pelo nome de Função construtora ("Constructor Function") que é uma função especial que serve de modelo para criar diferentes objetos com a mesma estrutura.
É boa prática colocar a primeira letra do nome da Função construtora em maiúscula, neste caso Pessoa (e não pessoa).
A palavra reservada this é que vai permitir que a função seja um modelo para se construir outras funções, tornando-a reutilizável.
O valor this vai mudar em função do contexto onde está a ser chamada.
A palavra reservada new indica que se vai criar uma nova instância do objeto modelo Pessoa() que vai ter o nome pedro (var pedro) e o nome ana (var ana):
function Pessoa() {
this.saudacao = function() {
console.log("Olá Mundo!");
}
}
var pedro = new Pessoa();
pedro.saudacao();
var ana = new Pessoa();
ana.saudacao();
9. Vamos criar mais dados na função construtora (nome e corFav) e adicionar os parâmetros de entrada (nomeCompleto e corFavorita):
function Pessoa(nomeCompleto, corFavorita ) {
this.nome = nomeCompleto,
this.corFav = corFavorita,
this.saudacao = function() {
console.log("Olá Mundo!");
}
}
var pedro = new Pessoa("Pedro", "amarelo");
pedro.saudacao();
var ana = new Pessoa("Ana", "azul");
ana.saudacao();
10. Vamos, agora, configurar o método para incluir os dados nome (this.nome) e a cor favorita (this.corFav) na mensagem:
function Pessoa(nomeCompleto, corFavorita) {
this.nome = nomeCompleto,
this.corFav = corFavorita,
this.saudacao = function() {
console.log("Olá o meu nome é " + this.nome + " e a minha cor favorita é " + this.corFav);
}
}
var pedro = new Pessoa("Pedro Matos", "amarelo");
pedro.saudacao();
var ana = new Pessoa("Ana Pereira", "azul");
ana.saudacao();
Agora sim, o nosso código Javascript está totalmente "Orientado a Objetos".
É boa prática colocar a função construtora Pessoa() num ficheiro separado, ficando a fazer parte da nossa livraria pessoal de Classes e Métodos.
Informação adicional:
A partir do site W3schools:
Javascript Object Definitions: www.w3schools.com/js/js_object_definition.asp
Javascript Object Properties: www.w3schools.com/js/js_properties.asp
Javascript Object Methods: www.w3schools.com/js/js_object_methods.asp
Javascript Object Constructors: www.w3schools.com/js/js_object_constructors.asp
Javascript Object Prototypes: www.w3schools.com/js/js_object_prototypes.asp
Canal Youtube "LearnWebCode":
Learn Javascript & jQuery (9 vídeos): www.youtube.com/watch?v=1vMFpT0h-WI&list=PLpcSpRrAaOarfQTVO9SynUNmbz9yUgvkK
Javascript em meia hora: youtu.be/zPHerhks2Vg
Canal Youtube "mmtuts":
Video 21: What Are Objects in JavaScript: youtu.be/4uVwGw317QM