Introdução ao JavaScript orientado a objetos

Por alguma razão, há uma tendência na indústria de TI de entender que, se você não estiver usando métodos OOP (Object Oriented Programming), então você não é um “programador real”. Na verdade, essa é uma postura um pouco tola, porque há muitas situações em que a POO não é a maneira mais apropriada de lidar com um problema. Esta é a falha em linguagens como Java que forçam a OOP em todas as tarefas de programação, quer você precise ou não.

JavaScript (que não tem quase nada a ver com Java) é uma linguagem bem diferente. Ele fornece liberdade e versatilidade quase ilimitadas, com complexidade reduzida na maioria das áreas. Infelizmente, existem algumas coisas que são mais complicadas em JavaScript por causa da liberdade que ele tenta dar a você.

Por que a OOP nem sempre é adequada para todas as tarefas, é que ela adiciona mais complexidade a um programa e geralmente envolve etapas extras, mais trabalho e mais coisas que podem dar errado se você não estiver prestando atenção. Mas o OOP também pode fornecer muitas vantagens se for usado em situações em que for apropriado.

A vantagem mais importante que a OOP pode oferecer é a replicação, o que significa que podemos clonar um objeto e reutilizá-lo várias vezes no mesmo programa, sempre que precisarmos. A complexidade implícita e o fato de que o JavaScript não é construído desde o início para ser uma linguagem OOP (adicionando assim mais complexidade), é uma das razões pelas quais a OOP representa a fronteira final para muitos programadores JavaScript antes de ganhar suas asas.

OK, é difícil, mas não é tão difícil

Antes de começar a pensar que o conceito de JavaScript Orientado a Objetos é demais para você, considere que você já está usando OOP mesmo que não esteja ciente disso. Os puristas podem discordar, mas acho que é justo dizer que, se você já usa HTML e CSS, e ocasionalmente usou JavaScript para manipular elementos HTML em uma página da Web, então você já é um programador experiente de POO.

Cada elemento HTML em uma página da web é, na verdade, um objeto. Todos eles se encaixam na hierarquia DOM (Document Object Model), o que significa que eles têm uma classe definida, propriedades definidas e herança definida. A menos que você defina explicitamente um valor de propriedade, todos os objetos usarão seus valores de propriedade padrão. Quando você escreve uma instrução CSS, o que realmente está acontecendo é que você está usando um método para modificar um ou mais valores de propriedade de uma classe.

Toda vez que você escreve uma instrução em HTML, você cria uma nova instância de uma classe. E como você certamente já sabe, é possível criar suas próprias classes com base na classe predefinida de cada tipo de objeto (por exemplo, você pode criar <h2 class = ”subheading”> que pode ter propriedades muito diferentes da classe original foi criado a partir de). Você pode especificar que os objetos H2 com essa classe terão uma cor e um tamanho diferentes dos objetos H2 normais. E você pode reutilizar esses objetos modificados quantas vezes quiser. O objeto H2 original é um modelo de objeto e sua nova classe é derivada da classe de modelo.

Então, sim, OOP não é fácil, mas você provavelmente já está fazendo isso, então o que há para ter medo?

O próximo nível: criando seus próprios objetos

Trabalhar com objetos DOM internos é muito fácil. Você precisa de mais desafios. Fazer seus próprios objetos é o primeiro passo para um nível mais alto de OOP.

Com todo esse preâmbulo, provavelmente você está esperando que criar um objeto é um grande negócio que exige muito código complexo. Certamente, se você já tentou criar classes de objeto personalizadas em uma linguagem como Java ou C #, você espera criar um construtor de classe longa. Veja como fazemos isso em JavaScript:

Bem, isso foi anti-climático, né? O que fizemos lá foi que criamos um objeto vazio da classe “myObject”. Obviamente, objetos vazios são entediantes, porque eles não fazem nada além de ocupar espaço na memória. Para ser útil, um objeto precisa ter conteúdo. Vamos considerar uma aula mais prática:

O exemplo acima mostra um objeto chamado objAlien que tem todas essas propriedades diferentes (variáveis ​​ordinárias) e métodos (função) definidos dentro dela. Tecnicamente, você também pode considerar um objeto como uma matriz de variáveis ​​e / ou funções.

Usando objetos em um programa

Uma vez que um objeto tenha sido definido, você pode referenciá-lo em seus programas. Em um jogo, você teria vários alienígenas, mas escrever código para cada alienígena faria com que o programa ficasse pesado demais. A melhor maneira é criar uma matriz para armazenar todos os alienígenas e, em seguida, usar a classe alienígena para criar novos alienígenas. Por exemplo:

Este código faria com que os alienígenas 20 esverdeados os colocassem separados por 110 pixels (assim, poderíamos imaginar que a imagem usada para armazenar o alien é 100px, e há uma margem 10px entre cada alien). Obviamente, é claro que essa não é uma boa maneira de implementar um jogo em JavaScript porque existem técnicas melhores, mas este artigo não é sobre como criar jogos, é sobre criar e usar objetos.

Objetos nem sempre precisam ser adicionados usando a nova palavra-chave. Aqui está uma amostra de código de um projeto em que um objeto define suas próprias propriedades usando os valores de outro objeto:

Aqui podemos ver uma maneira realmente complexa de usar um objeto, onde os valores do objeto são passados ​​para a propriedade attr do objeto R. Se você estiver familiarizado com o JSON (JavaScript Object Notation), poderá pensar que a primeira parte do exemplo está usando JSON com erros de sintaxe, mas na verdade não é um código JSON.

A razão pela qual os nomes das variáveis, exceto preenchimento, são citados é para evitar que o JavaScript processe o operador menos nos nomes das variáveis ​​(que são propriedades CSS). Desde que esse programa foi escrito, foram feitas alterações para permitir que propriedades CSS como font-family sejam escritas como fontFamily, mas esse código legado não foi adaptado para aproveitar essa alteração.

Por que usar objetos?

Objetos são melhores para situações em que você precisa fazer várias instâncias de algo, ou onde você precisa de uma maneira simples de agrupar dados relacionados a algo de um tipo específico. No exemplo do jogo acima, podemos ver que era possível criar várias cópias do objeto objAlien, mas também poderíamos manipular as propriedades do objeto após adicioná-lo, que no caso do exemplo era a propriedade x.

Quando não usar objetos?

Você não deve usar objetos se o projeto realmente não precisar deles. É inútil complicar demais seus programas sem um bom motivo. Se o seu programa é projetado para fazer algo simples, as técnicas de OOP não devem ser necessárias.

Por que objetos JavaScript são mais fáceis de criar do que objetos em outras linguagens OOP?

Em linguagens como Java e até mesmo Visual Basic, criar objetos é uma tarefa grande. Isso porque você precisa criar um modelo de classe (ou usar um modelo existente) para basear seu objeto antes de poder defini-lo. Isso não é necessário em JavaScript porque nos é dada uma técnica de construção simples (objectname = {…}). Objetos em JavaScript também podem incluir qualquer tipo de variável, incluindo arrays, e as declarações de tipo são inexistentes. Os valores de retorno são opcionais.

Se é algo bom ou ruim, é uma questão de debate, mas os programas JavaScript também não falharão se você tentar chamar um valor de propriedade que não existe. Por exemplo, se você digitou:

Você espera que a linha de código acima coloque o 5 dentro do elemento com o ID “par1”. Mas se você fosse digitar algo como:

Você não veria o sabor favorito do alienígena, você veria indefinido aparecer em par1. Para a maioria das aplicações, isso não seria um problema, mas para alguns seria. Nesses casos, você precisa estar preparado para isso e escrever um código que teste os valores válidos antes de confiar neles.

Uma maneira de testar isso é:

Essa resposta é um pouco extrema, mas você entende a ideia. Observe que estamos testando “! ==” e não “! =”, O que é uma coisa fácil de se confundir. Aqui está outra maneira de fazer isso:

Mesma coisa, maneira diferente. Você também pode adicionar propriedades aos objetos depois de criá-los. Você pode fazer isso desta maneira:

Obviamente, você também pode alterar os valores das propriedades da mesma maneira. Para remover a propriedade favoriteFlavor do objeto, precisaríamos fazer isso:

Existem muito poucas situações em que isso seria necessário.

Tornando os objetos mais reutilizáveis

Você provavelmente notou o maior problema em potencial com a criação de objetos, ou seja, se você quisesse ter diferentes tipos de alienígenas, seria necessário transformar a propriedade objAlien.type em uma matriz. Mas há outro jeito, o que é melhor.

Essa técnica é chamada de prototipagem de objetos, o que significa que você cria um modelo básico para o objeto, mas não preenche todos os detalhes. Aqui também estamos nos aproximando da maneira real de adicionar objetos a um jogo.

Você pode ver agora que os métodos do objeto estão definidos, mas a maioria das propriedades não está definida. Além disso, em vez de ser uma variável simples, a declaração do objeto agora está dentro de uma função, e isso porque ainda não é um objeto. É apenas um protótipo de um objeto, descrevendo como criar o objeto sem realmente criá-lo.

Então, agora, para criar objetos baseados no protótipo, podemos fazer isso:

Isto é o mesmo que fazer isto:

Como criamos um protótipo, não precisávamos fazer isso da segunda maneira, e declarar diferentes tipos de alienígenas com diferentes velocidades, número de armas, armas e posições iniciais é muito mais fácil.

Qual o proximo?

Este artigo foi uma introdução ao JavaScript Orientado a Objetos, que esperançosamente desmistificou o assunto e fez com que parecesse menos intimidante. Nós cobrimos todas as noções básicas, incluindo como criar objetos simples, como adicionar, remover e modificar propriedades, como declarar e usar métodos e como usar o protótipo para tornar os objetos mais fáceis de reutilizar. Mas ainda há muito mais para aprender, então agora que você tem um bom ponto de partida, será capaz de abordar qualquer tutorial ou lição sobre OOP mais avançada com confiança.

Bogdan Rancea

Bogdan é um membro fundador da Inspired Mag, acumulando quase 6 anos de experiência neste período. Em seu tempo livre, ele gosta de estudar música clássica e explorar artes visuais. Ele é muito obcecado com fixies também. Ele é dono do 5 já.