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

Publicado a 16/01/2018, 15:57 por Luis Pitta -org-   [ atualizado a 31/03/2019, 11:26 ]

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 seguinte 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. Vamos começar por escrever na consola duas simples frases 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 repetição, 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 duas 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, vamos 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 na mesma a palavra reservada var = { ... }.
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 comportamentos, ações (verbos).

Exemplos de nomes (ou seja dados):
  • nome
  • cor
  • altura
Exemplos de verboscomportamentos ou ações (ou seja métodos):
  • saudar
  • correr
  • andar
  • saltar
Recapitulando: os comportamentos (verbos) são ações, ou seja os verbos definem ações.
Como já percebemos as ações em Javascript chamam-se métodos.

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()


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á repetição de código, então há razão, mais do que 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.


function Pessoa() {
    this.saudacao = function() {
        console.log("Olá Mundo!");
    }
}

var pedro = new Pessoa();
pedro.saudacao();

var ana = new Pessoa();
ana.saudacao();

É 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).


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