Rodrigo Brito

Objetos, a revolução da programação

Os objetos são um conjunto de variáveis e funções, chamados de propriedades e métodos. Eles são constituidos por chaves e valores. Ex:

var humano = {
    reino: 'Animalia',
    filo: 'Chordata',
    classe: 'Mammalia',
    ordem: 'Primata',
    família: 'Hominidae',
    genero: 'Hominidae',
    especie: 'Homo sapiens'
}

Cada propriedade do objeto é separada por nome, dois pontos e o valor dentro da abertura das chaves, separados por vírgula.

Cada valor da propriedade deste objeto pode ser acessado da seguinte forma:

humano.reino; // 'Animalia'
humano.especie; // 'Homo sapiens'

O acesso por ponto é chamada de dot notation get.

Os valores das propriedades do objeto podem ser atribuídos também (setados) por ponto, sinal de atribuição "=" e valor, chamado de dot notation set. Ex:

humano.reino = 'Plantae'

A partir deste momento, o valor do parâmetro reino dentro do objeto humano será 'Plantae':

Uma propriedade pode ser um método, tendo uma função como seu valor. Nesse caso a função não precisa de nome (função anônima), pois o nome é o da proprieade, além de poder receber parâmetros. Ex:

var quadrado = {
    lados: 4,
    area: function(lado) {
        return lado * lado;
    },
    perimetro: function(lado) {
        return this.lados * lado;
    }
}

O this é utilizado para referenciar uma propriedade ou método presente no objeto, fazendo referência ao objeto em si.

No ES6+ o método pode ser abreviado, não necessitando do ": function", sendo substituído para parênteses. No exemplo acima o objeto ficariam da seguinte forma com os seus métodos abreviados:

var quadrado = {
    lados: 4,
    area(lado) {
        return lado * lado;
    },
    perimetro(lado) {
        return this.lados * lado;
    }
}

Para acessar a propriedade, basta utilizar o objeto seguido do ponto e o nome do método passando os parâmetros necessários entre parênteses.

quadrado.lados; // 4
quadrado.area(5); // 25
quadrado.perimetro(5); // 20

Métodos e propriedades podem ser passados ao objeto criado. Exemplo utilizando o objeto humano criado anteriormente:

Os objetos servem para organizar o código em pequenas partes que podem ser reutilizáveis.

O JS possui uma série se objetos nativos. Um deles é o Math. Neste objeto temos propriedades e métodos que podem ser utilizadas, tais como random (número pseudo-aleatório) e PI (relação entre a circunferência de um círculo e o seu diâmetro, aproximadamente 3.14159)  que são acessados passando o nome do objeto, ponto, nome do método, parênteses e entre parêntes o parâmetro caso necessário.  Ex:

Math.PI; // 3.14
Math.random(); // número pseudo-aleatório entre 0 e 1
Math.pow(2,3) // 8 (2 elevado à 3ª potência, 2³)

O console que utilizamos para debugar é um dos objetos nativos do JS, e possui diversos métodos, tais como log(), debug(), info() dentre outros.

Para criar um objeto é necessário o declarar com chaves. Ex:

Os objetos herdam propriedades e métodos do objeto que foi utilizado para criar o mesmo e todo objeto criado em JS herda os métodos e propriedades do objeto nativo Object, visualizáveis no console logo digitando o nome do objeto seguido de ponto:

Neste caso, o método hasOwnProperty, dentre outros, em momento nenhum foi declarado, mas herdado do seu pai Object.

Os diferentes tipos de dados (string, number, boolean, object etc) também são objetos e possuem propriedades e métodos herdados de seus pais construtores, chamados de Objetos Padrão. Estes objetos (a lista é grande!) podem ser vistos no seguinte link: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects. Como exemplo, do dado do tipo string herda os métodos e propriedades do seu construtor String, permitindo a utilização de diferentes métodos par a sua manipulação, tais como substr, replace dentre outros. Ex:

Os tipos de dados, se verificado com um typeof, ele não retornará como um tipo objeto, mas por um breve momento eles são envolvidos em um Objeto (coerção), tendo acesso assim as suas propriedades e métodos.

O principal objeto utilizado em JS é o DOM (Modelo de Objeto de Documento), que através de suas propriedades e métodos, permite a realização de diversos efeitos. Dentre eles, um muito utilizado é o método querySelector que serve para selecionar elementos do DOM para manipulação, bem como o método addEventListener para manipular eventos como click, mouseover etc.

Este conjunto de métodos e propriedades permitem a interação entre o JavaScript e o browser, sendo chamados de Web API's.