DEV Community

Gustavo Henrique
Gustavo Henrique

Posted on

Objetos em JavaScript

Estou começando uma série de posts sobre conceitos de JavaScript, e este é apenas o início. Neste primeiro post, será explorarado o conceito básico de objetos, que é essencial para entender como funciona a estrutura de dados em JavaScript.

Fique ligado para os próximos posts, que trarão a continuidade desse artigo e vários outros assuntos.


Oque é um objeto?

o mundo real, objetos são entidades (reais ou abstratas). Por exemplo: lápis, carro, caderno. Cada um desses objetos possui propriedades específicas. Por exemplo: um carro da cor azul, um lápis da cor vermelha ou um caderno de tamanho grande.

Em JavaScript, objetos são entidades independentes que colecionam propriedades. As propriedades são associações entre um nome e um valor, ou seja, informações que descrevem o objeto.

const carro = {
  cor: "amarelo",
  tamanho: "grande",
};
Enter fullscreen mode Exit fullscreen mode

Neste exemplo, cor e tamanho são propriedades do objeto carro, e cada uma delas tem um valor associado.

Criando Objetos

Sintaxe literal

Objetos literais são criados de forma simples e direta, onde os valores já são definidos manualmente. Essa sintaxe é ideal quando você tem um conjunto fixo de propriedades para o objeto.

const pessoa = {
  nome: "João",
  idade: 19,
  rua: "Rua Erva Daninha",
};
Enter fullscreen mode Exit fullscreen mode

Esse tipo de objeto é útil quando as propriedades não mudam com frequência ou quando você precisa criar um objeto rapidamente com valores fixos.

Funções Construtoras

Funções construtoras são usadas para criar objetos de maneira dinâmica, especialmente quando você precisa de vários objetos semelhantes. Ao usar a palavra-chave new, é criado um novo objeto que referencia a função construtora.

function NomeDoConstrutor(parâmetros) {

  this.propriedade1 = valor1;
  this.propriedade2 = valor2;

  this.método = function() {
    // Código do método
  };
}

const variavel1 = new NomeDoConstrutor(parâmetros)
const variavel2 = new NomeDoConstrutor(parâmetros)
Enter fullscreen mode Exit fullscreen mode

Como um exemplo mais convencional e menos acadêmico:

function Pessoa(nome, idade) {
  this.nome = nome;
  this.idade = idade;

  this.cumprimentar = function () {
    console.log("Olá, meu nome é " + this.nome);
  };
}

const pessoa1 = new Pessoa("João", 30);
const pessoa2 = new Pessoa("Maria", 25);

pessoa1.cumprimentar(); // Olá, meu nome é João
pessoa2.cumprimentar(); // Olá, meu nome é Maria
Enter fullscreen mode Exit fullscreen mode

Nesse caso, a saída será "Carimbada" com os valores atribuidos pelas váriaveis pessoa1 e pessoa2 no modelo estipulado pela function Pessoa.

Uso da palavra This

Dentro de um construtor, usamos a palavra-chave this para se referir ao objeto que está sendo criado. O this permite que você defina propriedades e métodos dinâmicos para o objeto.

Por exemplo, no código acima, this.nome e this.idade definem as propriedades do objeto, e o método cumprimentar é uma função associada ao objeto.

Herança em construtores

A herança em JavaScript funciona através de protótipos. Em vez de criar um objeto diretamente a partir de outro, você cria uma hierarquia onde um objeto pode herdar propriedades e métodos de outro. Isso é feito usando os métodos call ou apply.

function pessoa(nome){
  this.nome = nome;
}

function estudante(nome, idade){
  pessoa.call(this, nome)
  this.idade = idade
}

const persona1 = new estudante('antonio', 18)
console.log(persona1.nome) // antonio
console.log(persona1.idade) // 18
}
Enter fullscreen mode Exit fullscreen mode
Como funciona a Herança?

Quando usamos Pessoa.call(this, nome), estamos chamando o construtor Pessoa e passando o contexto do objeto Estudante. Isso faz com que o objeto estudante1 herde a propriedade nome de Pessoa e também tenha a propriedade idade, que é exclusiva da função Estudante.

Funções construtores são mais usados quado se vê a nescessidade da criação de vários objetos com muitas propriedades e métodos com valores variáveis. Nesse caso, é melhor o uso de um objeto construtor como um "carimbo" do que escrever vários objetos manualmente.

Objetos construtores

Objetos criados usando funções construtoras são instâncias geradas pelo operador new. Cada instância possui suas próprias propriedades, mas compartilha métodos definidos no prototype da função construtora.

Isso significa que, se você criar vários objetos a partir de uma função construtora, eles terão os mesmos métodos, mas valores diferentes para suas propriedades.

const pessoa1 = new Pessoa("João", 30);
const pessoa2 = new Pessoa("Maria", 25);
Enter fullscreen mode Exit fullscreen mode
  • Nesse caso, o operador new cria um novo objeto, vinculando o contexto (this) à função construtora

  • Para métodos compartilhados, é mais eficiente adicionalos o prototype da função construtora. Isso evita duplicação em memória.

function Animal(tipo) {
  this.tipo = tipo;
}

Animal.prototype.falar = function () {
  console.log(`Este é um ${this.tipo}`);
};

const animal1 = new Animal("Cachorro");
const animal2 = new Animal("Gato");

animal1.falar(); // Este é um Cachorro
animal2.falar(); // Este é um Gato
Enter fullscreen mode Exit fullscreen mode

Ao definir métodos no prototype de uma função construtora, evitamos duplicação de código. Em vez de cada objeto ter uma cópia do método, todos compartilham o mesmo método, economizando memória.

O operador new cria um novo objeto e vincula o contexto (this) à função construtora.

Para métodos compartilhados, é mais eficiente adicioná-los ao prototype da função construtora, evitando duplicação em memória.

Top comments (0)