Entendendo JavaScript Orientado a Objetos

Neste artigo você vai aprender os fundamentos de JavaScript Orientado a Objetos, um paradigma muito utilizado na programação

Fala programador(a), beleza? Bora aprender orientação a objetos com JavaScript!

JavaScript é uma linguagem de programação orientada a objetos (OOP), o que significa que ela permite que você crie objetos que possuem propriedades e métodos.

Isso pode ajudar a tornar o seu código mais organizado e reutilizável, já que você pode criar objetos que representam coisas do mundo real, como usuários, produtos ou configurações.

Aqui está um guia básico para entender e usar o JavaScript orientado a objetos:

Crie um objeto com a notação de chaves

Para criar um objeto em JavaScript, você pode usar a notação de chaves e atribuir propriedades e métodos a ele.

As propriedades são valores associados ao objeto e os métodos são funções associadas ao objeto.

Por exemplo, aqui está como criar um objeto que representa um produto:

const product = {
  name: "Cadeira",
  price: 100,
  getPrice: function() {
    return this.price;
  }
};

Acesse as propriedades e métodos de um objeto com o ponto

Depois de criar um objeto, você pode acessar as suas propriedades e métodos usando o ponto.

Por exemplo, aqui está como acessar as propriedades e métodos do objeto de produto criado acima:

console.log(product.name); // "Cadeira"
console.log(product.getPrice()); // 100

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

Altere as propriedades de um objeto com o ponto

Você também pode alterar as propriedades de um objeto usando o ponto. Por exemplo, aqui está como alterar o preço do produto:

product.price = 150;
console.log(product.getPrice()); // 150

Crie um objeto com a função construtora

Outra forma de criar um objeto em JavaScript é usando uma função construtora.

Uma função construtora é uma função especial que é usada para criar e inicializar um objeto.

Por exemplo, aqui está como criar um objeto de produto usando uma função construtora:

function Product(name, price) {
  this.name = name;
  this.price = price;
  this.getPrice = function() {
    return this.price;
  };
}

const chair = new Product("Cadeira", 100);
console.log(chair.name); // "Cadeira"
console.log(chair.getPrice()); // 100

Crie um objeto com uma classe

Outra forma de criar um objeto em JavaScript é usando uma classe.

Uma classe é um modelo para criar objetos com propriedades e métodos semelhantes.

Por exemplo, aqui está como criar um objeto de produto usando uma classe:

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

  getPrice() {
    return this.price;
  }
}

const table = new Product("Mesa", 200);
console.log(table.name); // "Mesa"
console.log(table.getPrice()); // 200

Herde de uma classe com a palavra-chave extends

Você também pode criar uma classe que herda de outra classe usando a palavra-chave extends.

Isso permite que você crie uma nova classe com as mesmas propriedades e métodos da classe original, além de adicionar novas propriedades e métodos.

Por exemplo, aqui está como criar uma classe de mobília que herda de uma classe de produto:

class Furniture extends Product {
  constructor(name, price, material) {
    super(name, price);
    this.material = material;
  }
}

const couch = new Furniture("Sofá", 500, "Couro");
console.log(couch.name); // "Sofá"
console.log(couch.getPrice()); // 500
console.log(couch.material); // "Couro"

Use o método Object.create para criar um objeto com uma outra objeto como protótipo

O método Object.create permite que você crie um novo objeto com outro objeto como protótipo. Isso significa que o novo objeto herdará as propriedades e métodos do objeto protótipo.

Por exemplo, aqui está como criar um objeto de usuário com um objeto de pessoa como protótipo:

const person = {
  sayHello: function() {
    return `Olá, meu nome é ${this.name}`;
  }
};

const user = Object.create(person);
user.name = "João";
console.log(user.sayHello()); // "Olá, meu nome é João"

Use o método Object.assign para copiar propriedades de um objeto para outro

O método Object.assign permite que você copie as propriedades de um objeto para outro.

Isso é útil quando você quer criar um novo objeto com algumas propriedades de outro objeto, mas não quer herdar de seu protótipo.

Por exemplo, aqui está como usar o método Object.assign para copiar as propriedades de um objeto de configuração para um objeto de usuário:

const config = {
  name: "João",
  age: 30
};

const user = Object.assign({}, config);
console.log(user.name); // "João"
console.log(user.age); // 30

Use o método Object.getPrototypeOf para obter o protótipo de um objeto

O método Object.getPrototypeOf permite que você obtenha o protótipo de um objeto.

Isso é útil para descobrir de onde um objeto herda as suas propriedades e métodos.

Por exemplo, aqui está como usar o método Object.getPrototypeOf para obter o protótipo de um objeto de usuário:

const user = Object.create(person);
const prototype = Object.getPrototypeOf(user);
console.log(prototype === person); // true

Use o método Object.setPrototypeOf para definir o protótipo de um objeto

O método Object.setPrototypeOf permite que você defina o protótipo de um objeto.

Isso é útil quando você quer mudar de onde um objeto herda as suas propriedades e métodos.

Por exemplo, aqui está como usar o método Object.setPrototypeOf para definir o protótipo de um objeto de usuário:

const user = { name: "João" };
const prototype = { age: 30 };
Object.setPrototypeOf(user, prototype);
console.log(user.age); // 30

Essas são apenas algumas dicas básicas para entender e usar o JavaScript orientado a objetos.

Existem muitas outras coisas que você pode fazer com essa funcionalidade, como sobrescrever métodos herdados ou usar a palavra-chave static para criar métodos e propriedades estáticas.

No entanto, seguir essas dicas já deve lhe dar uma boa base para trabalhar com objetos em seu código.

Projeto com Orientação a Objetos

Aqui está um pequeno projeto orientado a objetos em JavaScript que cria uma aplicação de gerenciamento de tarefas.

O projeto consiste em duas classes: Task e TaskList. A classe Task representa uma única tarefa e a classe TaskList representa uma lista de tarefas.

class Task {
  constructor(title, dueDate) {
    this.title = title;
    this.dueDate = dueDate;
    this.completed = false;
  }

  toggleCompleted() {
    this.completed = !this.completed;
  }
}

class TaskList {
  constructor() {
    this.tasks = [];
  }

  addTask(task) {
    this.tasks.push(task);
  }

  removeTask(task) {
    this.tasks = this.tasks.filter(t => t !== task);
  }

  toggleTaskCompleted(task) {
    const taskToToggle = this.tasks.find(t => t === task);
    taskToToggle.toggleCompleted();
  }
}

const task1 = new Task("Comprar leite", "Hoje");
const task2 = new Task("Lavar carro", "Amanhã");
const task3 = new Task("Terminar relatório", "Quinta-feira");

const taskList = new TaskList();
taskList.addTask(task1);
taskList.addTask(task2);
taskList.addTask(task3);

console.log(taskList.tasks);

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você conferiu uma introdução a JavaScript Orientado a Objetos

Com estes conceitos já é possível programar no paradigma de POO 🙂

Lembre-se de importá-lo e também acessar o elemento pela propriedade current

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!