Fundamentos do JavaScript: entendendo e trabalhando com objetos

Por Sérgio Oliveira | 18 de Dezembro de 2014 às 08h05

O JavaScript é uma das linguagens de programação mais interessantes que se tem no mercado. Seu potencial é tamanho que o que começou sendo usado para manipular poucos elementos HTML numa página web e disparar mensagens de alerta em pop-ups hoje é usado para criar aplicações inteiras, animações complexas e muito mais.

A expansão da aplicabilidade dessa linguagem se deve principalmente a dois fatores: sua simplicidade e imensa quantidade de recursos disponíveis. E, já que falamos em recursos, um dos mais interessantes é a possibilidade de criar e manipular objetos a partir de "classes".

Quase tudo é ou age como um objeto

Praticamente toda linguagem de programação possui tipos primitivos que vêm embutidos em sua estrutura. Em JavaScript, esses tipos são números, Booleano e strings. Só que aqui também há os objetos e o tipo "undefined". Os objetos possibilitam criar estruturas que contêm propriedades que podem ser de qualquer tipo - inclusive objetos. E embora números, Booleanos e strings não sejam objetos, eles podem acabar se comportando como tal aqui.

Portanto, é possível acessar as propriedades desses tipos usando a notação do ponto (por exemplo, 2.toString()) até mesmo quando eles não possuem quaisquer propriedades. Por baixo dos panos, isso converte o número em um objeto do tipo "Number" e a propriedade desse objeto é acessada. O mesmo acontece para strings, que são convertidos para o objeto do tipo "String", e booleanos, que são convertidos para objetos "Booleanos".

A princípio, esse recurso pode confundir os novatos, mas com o tempo se aprende que ele é uma verdadeira mão na roda.

Criando um objeto

Assim como as variáveis, há inúmeras formas de se criar um objeto em JavaScript. Uma das maneiras mais comuns, no entanto, é a literal:

Fundamentos JavaScript: Objetos

Para começar a declaração literal de um objeto, basta abrir uma chave. Dentro dela, tudo o que é preciso fazer é criar os pares chave-valor separados por dois pontos. Para adicionar novos pares, basta adicionar uma vírgula entre eles e pronto. É possível usar qualquer valor, inclusive outros objetos como neste exemplo:

Fundamentos JavaScript: Objetos

Atualmente, essa é a forma mais difundida de se criar objetos porque também é utilizada pelo JSON e requer menos caracteres do que a notação XML popular anteriormente. Se mesmo assim você quiser dar uma olhada nas outras formas, pode dar uma olhada neste artigo da Mozilla Developer Network que possui bastante exemplos.

Também é possível adicionar novas propriedades a um objeto após declará-lo. Para isso, basta fazer isto: objeto.novaPropriedade = "o que você quiser aqui".

Prototypes e herança

A declaração literal não é a única maneira de criar objetos em JavaScript. Eles podem ser criados usando a palavra chave "new" de uma "classe" pré-definida. Sim, "classe" assim, com aspas, porque, na verdade, JavaScript não oferece suporte à classes. Ao invés disso, o que usa são construtores de função e herança de prototype.

Apesar desse pequeno detalhe, a coisa funciona basicamente da mesma forma, bastando digitar "objeto = new Object();" para se criar um objeto. Com isso, a variável tanto se comportará como um objeto, como virá com algumas propriedades embutidas automaticamente.

Seguindo adiante, para definir uma "classe" em JavaScript, basta criar uma função que chama um construtor. Nesse caso, por convenção, nomeia-se a função com uma letra maiúscula para indicar que aquele é um construtor e não uma função. Dentro do construtor da função, usa-se a palavra chave "this" para fazer referência à instância do objeto. Veja o exemplo:

Fundamentos JavaScript: Objetos

Agora, quando você chamar "AlgumObjeto()" você instanciará um novo objeto que possui a propriedade "algumaPropriedade" com o valor de um. Embora o exemplo só mostre a definição de uma propriedade, você pode definir o que você quiser.

Outra dica de boa prática é que não é necessário definir as propriedades dentro do construtor da "classe". Para isso, o mais recomendado é usar o prototype para defini-las, principalmente se elas forem funções e a classe for ser estendida. Veja o exemplo:

Fundamentos JavaScript: Objetos

O prototype é um objeto que funciona como uma espécie de repositório de propriedades que toda instância de objeto receberá automaticamente quando for criada usando a palavra chave "new". Nele também é possível armazenar todos os métodos herdados. Vamos ver isso em funcionamento criando uma nova classe que estende "AlgumObjeto":

Fundamentos JavaScript: Objetos

Com isso, pode-se garantir que qualquer propriedade definida no construtor também será herdada. Portanto, se o prototype de "AlgumObjeto" mudar, o de "NovoObjeto" também mudará devido aos ponteiros e à natureza dinâmica do JavaScript.

O próximo passo, agora, é adicionar novos métodos ou sobrescrever os herdados. Perceba aqui que não é possível atribuir uma declaração literal de objeto ao prototype porque isso acabaria apagando todos os métodos que já foram criados ou herdados ao invés de estendê-lo.

Fundamentos JavaScript: Objetos

Para fazer essa tarefa de uma maneira mais interessante, uma boa alternativa é utilizar o Underscore:

Fundamentos JavaScript: Objetos

Se tudo isso estiver soando muito estranho a você, vale a pena conferir a documentação da API do Underscore no site oficial (em inglês).

Não resta dúvidas que esse é, até agora, o assunto mais complexo abordado até aqui. Além do conceito de objetos, que por si só é bastante labiríntico, ainda falamos em herança, estensão e outros conceitos de programação orientada a objetos. Por esse motivo, pode ser que você tenha que buscar informações adicionais e passar algum tempo digerindo todo o tema. Para ajudá-lo, reunimos alguns links úteis e interessantes logo abaixo.

Fique por dentro do mundo da tecnologia!

Inscreva-se em nossa newsletter e receba diariamente as notícias por e-mail.