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
Aa Object | Descrição |
Document | Página Web atual. |
History | Páginas no histórico do navegador. |
Location | URL da página atual. |
Navigator | Informações sobre o navegador. |
Screen | Informações sobre a tela do dispositivo. |
DOM - DOCUMENT OBJECT MODEL
Aa Object | Descrição |
Document | Objeto de nível superior |
OJG - OBJETOS JAVASCRIPT GLOBAIS
Aa Object | Descrição |
string | Trabalha com strings |
number | Trabalha com valores numéricos |
boolean | Trabalha com valores booleanos |
date | Trabalha com datas |
math | Trabalha com números e cálculos |
regex | Trabalha 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:
Notação Literal: Forma comum e direta de criar objetos utilizando chaves.
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.Palavra-chave
this
: Refere-se ao objeto em que a função está sendo executada, seja no contexto global (window) ou dentro de um objeto específico.Métodos de Acesso: Utilização da notação de ponto e colchetes para acessar propriedades e métodos de objetos.
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.