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
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!