Objeto

Objeto

Entenda em detalhes os objetos no JavaScript

Objetos agrupam um conjunto de variáveis e funções para criar um modelo de algo que você reconheceria a partir do mundo real.

Em um objeto: variáveis tornam-se conhecidas como propriedades.

Em um objeto: funções tornam-se conhecidas como métodos.

Vamos abstrair um objeto do mundo real.

let car = {
    model: 'Hilux',
    year: 2021,
    color: 'black',
    producer: 'Toyota',
    combustible: function() {
        return ['Gasolina','Alcool'];
    }
}

Objeto em notação literal

Essa notação é a mais comum ao criar objetos.

Basta utilizar as chaves para criar um objeto vazio.

let car = {}

Você pode acessar as propriedades ou métodos de um objeto utilizando a notação de ponto ou utilizando colchetes.

//  variável  objeto, operador de membro, propriedade ou método
let carName = car.model; // OUTPUT: "Hilux"
let carComb = car.combustible(); // OUTPUT: ["Gasolina", "Alcool"]

let carName = car['model']; // OUTPUT: "Hilux"

OBS: Não podemos acessar os métodos com a notação de colchetes.

Objeto em notação de construtor

A palavra-chave new e o construtor de objeto criam um objeto em branco. Você pode então adicionar propriedades e métodos ao objeto.

let car = new Object();
// OUTPUT: {}

Criando vários objetos com a notação de construtor

Construtores de objeto podem utilizar uma função como um modelo para criar objetos.

Primeiramente precisamos criar o modelo com as propriedades e os métodos do objeto.

function car(model, year, color, producer) {
    this.model       = model;
    this.year        = year;
    this.color       = color;
    this.producer    = producer;
    this.combustible = function() {
            return ['Gasolina','Alcool'];
    };        
}

Após definir o modelo podemos criar instâncias do objeto utilizando a função de construtor.

Utilizamos a palavra-chave new seguida por uma chamada de função que irá criar um novo objeto.

let car1 = new car('Gol', 2020, 'preto', 'Volkswagen');
// OUTPUT: car {model: "Gol", year: 2020, color: "preto", producer: "Volkswagen", combustible: ƒ}
let car2 = new car('Celta', 2019, 'vermelho', 'Chevrolet');
// OUTPUT: car {model: "Celta", year: 2019, color: "vermelho", producer: "Chevrolet", combustible: ƒ}

This é uma palavra-chave

A palavra-chave this é utilizada dentro de funções e objetos. Sempre que a função é declarada, ela altera o que this significa. Ele sempre se refere a um objeto, geralmente o objeto em que a função opera.

Uma função no escopo global

Quando uma função é criada no nível superior de um script (isto é, não dentro de outro objeto ou função), então ela está no escopo global ou contexto global.

O objeto padrão nesse contexto é o objeto window, portanto, quando this é utilizada dentro de uma função no contexto global, ela se refere ao objeto window.

function windowSize() {
  let w = this.innerWidth;
  let h = this.innerHeight;
  return [w,h];
}

Um método de um objeto

Quando uma função é definida dentro de um objeto, ela torna-se um método. Em um método, this refere-se ao objeto que o contém.

let car = {
    model: 'Hilux',
    year: 2021,
    color: 'black',
    producer: 'Toyota',
    km: 20.000,
    showKm: function() {
    return this.km;
    }
}

Expressão de função como método

Se uma função nomeada foi definida no escopo global, ela é então utilizada como um método de um objeto, this refere-se ao objeto em que ela está contida.

var w   = 300;
var car = {w:100};
var showWidth = function() {
    document.write(this.w);
};

car.getWidth = showWidth;
car.getWidth();

// OUTPUT: 100

Grupos de objetos predefinidos

BOM - BROWSER OBJECT MODEL

Aa ObjectDescrição
DocumentPágina Web atual.
HistoryPáginas no histórico do navegador.
LocationURL da página atual.
NavigatorInformações sobre o navegador.
ScreenInformações sobre a tela do dispositivo.

DOM - DOCUMENT OBJECT MODEL

Aa ObjectDescrição
DocumentObjeto de nível superior

OJG - OBJETOS JAVASCRIPT GLOBAIS

Aa ObjectDescrição
stringTrabalha com strings
numberTrabalha com valores numéricos
booleanTrabalha com valores booleanos
dateTrabalha com datas
mathTrabalha com números e cálculos
regexTrabalha com padrões de strings de texto

Conclusão

Entender objetos em JavaScript é fundamental para modelar dados e comportamentos complexos de forma organizada. Objetos permitem agrupar propriedades (variáveis) e métodos (funções), criando representações de entidades do mundo real.

Principais pontos abordados:

  1. Notação Literal: Forma comum e direta de criar objetos utilizando chaves.

  2. Notação de Construtor: Usa a palavra-chave new e funções construtoras para criar múltiplas instâncias de objetos com um modelo definido.

  3. Palavra-chavethis: Refere-se ao objeto em que a função está sendo executada, seja no contexto global (window) ou dentro de um objeto específico.

  4. Métodos de Acesso: Utilização da notação de ponto e colchetes para acessar propriedades e métodos de objetos.

  5. Grupos de Objetos Predefinidos: Como BOM, DOM e OJG, que oferecem funcionalidades essenciais para interação com o navegador, documento e operações globais de JavaScript.

Com esses conceitos, você pode criar aplicações mais estruturadas, eficientes e fáceis de manter. Aprofundar-se na documentação do MDN pode fornecer mais detalhes e exemplos práticos para aprimorar suas habilidades com objetos em JavaScript.

Did you find this article valuable?

Support Áreadev by becoming a sponsor. Any amount is appreciated!