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

Publicado a 16/01/2018, 15:57 por Luis Pitta ‎[org]‎   [ atualizado a 11/01/2020, 19:02 ]

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":


Javascript em meia hora: youtu.be/zPHerhks2Vg


Canal Youtube "mmtuts":

Video 21: What Are Objects in JavaScript: youtu.be/4uVwGw317QM