OOP: Javascript: De código "normal" para OOP

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:

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:

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