Orientação A Objetos Com Javascript

Conceitos Básicos

Programação Orientada a Objetos é um paradigma de programação que usa abstração para criar modelos baseados no mundo real (encapsulamento de variáveis, atributos e métodos de uma classe), o mesmo pode ser abordado de forma diferente, dependendo da linguagem utilizada. Atualmente, muitas linguagens de programação populares (como Java, JavaScript, C #, C ++, Python, PHP, Ruby e Objective-C) permitem a programação orientada a objetos (POO).

Em Javascript, existem diferentes maneiras e métodos para aplicar este conceito de programação, utilizei o uso de Prototypes. Para entender melhor vamos criar um cenário de criação de objetos.

Cenário

Imagine um jogo de corridas de motocicletas, onde todas as motocicletas são padronizadas com várias características, embora estas características possam variar. Por exemplo, todas as motocicletas possuem cor, velocidade máxima e velocidade atual. Contudo em um dado momento, cada motocicleta possui valores diferentes para estas características. A motocicleta do jogador é amarela, e está a 160 km/h e pode alcançar até 220 km/h. O seu concorrente é preto, está a 180 km/h e pode alcançar até 240 km/h. As características são as mesmas, mas cada uma possui seu valor para cada motocicleta.

Esse conjunto de características comuns a cada motocicleta é o que denominamos de classe. A classe é o molde para criar os objetos.

Cada motocicleta é uma instancia da classe. A instancia é o objeto em si, pertencente a uma classe. Quando falo da minha motocicleta, estou falando de uma instância especifica da classe motocicleta. A motocicleta do oponente é outra instância.

Cor, velocidade atual e velocidade máxima são atributos da classe, ou seja, todas as instâncias possuem, mas cada qual com seu valor.

A motocicleta irá executar as tarefas de acelerar, frear, saltar e virar. Essas tarefas é o que chamamos de métodos. Nos programas OO, onde escrevemos os códigos que realizam as tarefas do programa, é nos métodos. Os métodos utilizam os dados nos atributos e podem alterar o estado do objeto.

• Classe: Define as características do objeto.
• Instância: Objeto criado a partir da classe.
• Atributo: Características do objeto.
• Método: Ação do objeto.

Funções construtoras

Em linguagens O.O, como Java e C#, ao definir as classes se utiliza a palavra class. Em Javascript como não há classes, podemos utilizar as funções construtoras para criar os objetos segundo as classes projetadas. Uma função construtora é uma função normal no Javascript, porem é utilizada para criar objetos. No exemplo a seguir a palavra this recebe os atributos de uma motocicleta. A palavra ´cor´ sozinha refere-se ao parâmetro recebido pela função, mas caso seja colocado this.cor cria-se um atributo cor no objeto.

Não podemos criar Moto fazendo:

Ao chamar uma função sem qualificar um objeto, o Javascript subentende que estamos utilizando o objeto window, por isso, a palavra this em meio a função criará ou modificará os atributos deste objeto.

Para novos objetos, utilizamos a palavra new. Após a função construtora, cria-se variáveis minhaMoto e concorrente. Para referenciar novos objetos:

A expressão new Moto(‘Amarelo’, 250) cria um novo objeto e executa nele a função construtora. Agora a palavra this se referirá a esse objeto. Já os métodos em Javascript, são os atributos que referenciam funções. Por exemplo, podemos criar um método acelerar que aumenta a velocidade da moto:

Chamando este método, através da variável minhaMoto, o método irá alterar o atributo vAtual desta instancia e não da instancia concorrente:

Por último, exibe a velocidade dos dois objetos criados. O primeiro acelerou, e o outro não.

O Javascript também oferece a sintaxe de chaves ({}) para criar objetos, por exemplo:

O prototype

A declaração de métodos como funções anônimas, gera um maior consumo de memória, pois cada vez que for executado, uma cópia da função anônima será criada na memória e cada instancia possuirá sua cópia não somente do atributo, mas também da função.

Então o Javascript traz consigo o recurso de prototype, que é um objeto associado a uma função construtora, onde colocando os métodos neste objeto, todas as instancias usarão as mesmas cópias de cada método. Para isso, deve-se colocar a função construtora e o prototype de uma classe em um arquivo separado, com extensão .js. A palavra prototype funciona como se fosse um atributo de uma função construtora:

Apesar de escrever um pouco mais de código, ele fica mais legível e organizado. E podemos ter o funcionamento completo do objeto em seu arquivo especifico — para isto servem as classes.

Para utilizar essa classe em uma página HTML:

A sintaxe class no ECMAScript6: como declarar uma classe

A sintaxe “class” será responsável por definir que o que virá a seguir será tratado pela engine do javascript como uma classe.

Class é apenas uma sintaxe, o comportamento ainda é similar ao primeiro exemplo acima. A declaração da classe Pessoa cria uma função que será o construtor (constructor). Por isso o “typeof ” disse que tanto Pessoa quanto o método “exibaNome” são funções. Com isso podemos misturar os comportamentos como no exemplo a seguir:

Ao atribuir métodos diretamente ao prototype da classe funcionará normalmente.

Vantagens da sintaxe class:

• A declaração de “class” assim como não fazem elevação como “function” e “var”.
• O escopo interno das classes roda sempre em strict mode.
• Métodos dentro de classes não possuem construtor o que impossibilita a chamada com new.
• Não é possível chamar o construtor de uma classe sem new.
• Não é possível sobrescrever o nome da classe com um método interno.

Adicionando essas características no exemplo sem o uso da sintaxe class:

Getters and setters

Getters e setters nem sempre são explicitos na maioria das linguagens mas o javascript resolveu implementar uma forma nativa para criar propriedades de acesso usando “get” e “set” como no exemplo:

No exemplo acima “fullNome” se torna uma propriedade não enumerada do prototype ou seja, quando ela for acessada quem vai ser invocado será o “getter” e não a propriedade diretamente:

Métodos estáticos em classes

Adicionar funções diretamente ao prototype de um objeto para simular um método estático sempre foi uma prática comum no desenvolvimento com javascript, por exemplo:

Neste exemplo a função “OldPessoa” funciona como o construtor e logo depois a função “printIdade” é adicionada diretamente ao prototype ou seja ela não depende da instância.

Transformando esse mesmo código para usar classes o comportamento seria o seguinte:

O ECMAScript6 simplificou esse comportamento adicionando os métodos estáticos com “static”. Fora no construtor, os métodos estáticos podem ser usados em qualquer lugar.

Conclusão

Assim, nota-se que as classes não são complexas, e que as classes em javascript não sejam bem classes e sim apenas um tipo que simplifica a construção de objetos.

E com isso, conceitos básicos e noções de OO em Javascript, para se manipular objetos em Javascript.