Conteúdo do curso
Apresentação do curso
0/1
Curso de JavaScript para Iniciantes: Fundamentos e Prática
Sobre a Aula

Propriedades e métodos de objetos

Parabéns por chegar à última aula do módulo 5! Nesta etapa final, você se tornará um mestre em propriedades e métodos de objetos em JavaScript, explorando recursos avançados para manipular dados de forma ainda mais eficiente e flexível.

Acesso e Modificação de Propriedades

No tópico anterior foi abordado esse tema, mas aqui vamos detalhar mais um pouco e com um exemplo diferente. Então vamos começar com uma analogia:

Imagine um objeto como uma caixa que contém diferentes itens.

Cada item é uma propriedade, e cada propriedade possui um nome e um valor.

Para acessar ou modificar uma propriedade em JavaScript, podemos usar a notação de ponto (.) ou a notação de colchetes ([]).

Usando a analogia da caixa, podemos pensar na notação de ponto como abrir a caixa e pegar um item diretamente pelo seu nome.

Por exemplo, se temos um objeto chamado “person” com a propriedade “name“, podemos acessar o valor dessa propriedade da seguinte forma:

let person = {
  name: "John",
  age: 25

};

console.log(person.name); // Output: "John"

Da mesma forma, podemos modificar o valor de uma propriedade usando a notação de ponto:

person.age = 30;
console.log(person.age); // Output: 30

A notação de colchetes é como usar um rótulo para pegar um item específico dentro da caixa.

Em vez de usar o nome diretamente, usamos uma string que representa o nome da propriedade. Veja o exemplo abaixo:

console.log(person['name']); // Output: "John"

Essa notação é útil quando o nome da propriedade é dinâmico ou contém caracteres especiais. Também podemos usar variáveis para acessar propriedades:

let propertyName = 'age';
console.log(person[propertyName]); // Output: 30

Através dessas formas de acesso e modificação de propriedades, podemos trabalhar com os dados contidos em objetos JavaScript.

É importante praticar e entender como usar corretamente a notação de ponto e colchetes para interagir com as propriedades de um objeto.

Lembre-se de que o acesso e modificação de propriedades são fundamentais para manipular e trabalhar com objetos em JavaScript.

Com prática e experiência, você estará apto a usar essas técnicas de forma eficiente em seus projetos.

Chamada de métodos

Quando trabalhamos com objetos em JavaScript, além das propriedades, também podemos ter métodos. Os métodos são ações ou comportamentos associados a um objeto.

Podemos pensar neles como instruções especiais que um objeto pode executar.

Vamos usar uma analogia para entender melhor. Imagine um objeto chamado “carro” que possui várias propriedades, como “cor“, “marca” e “modelo“.

Além disso, ele também possui métodos, como “ligar” e “desligar“.

Ao chamar um método em JavaScript, estamos solicitando que o objeto execute uma determinada ação.

Podemos fazer isso usando a notação de ponto (.) ou a notação de colchetes ([]), assim como vimos anteriormente para acessar as propriedades.

Usando a analogia do carro, podemos pensar na chamada de método como apertar um botão no painel do carro para executar uma ação específica.

Por exemplo, podemos chamar o método “ligar” do objeto “carro” da seguinte forma:

carro.ligar();

Essa chamada de método instrui o objeto “carro” a executar a ação de ligar. Da mesma forma, podemos chamar o método “desligar“:

carro.desligar();

Assim como as propriedades, os métodos também podem receber argumentos.

Esses argumentos são informações adicionais que podemos passar para o método, permitindo que ele realize a ação de forma personalizada.

Por exemplo, podemos ter um método chamado “acelerar” que recebe a velocidade desejada como argumento:

carro.acelerar(80);

Nesse caso, estamos instruindo o objeto “carro” a acelerar até a velocidade de 80 km/h.

Ao chamar métodos, estamos ativando comportamentos específicos do objeto. Isso permite que nossos objetos executem ações úteis e interajam com o restante do código.

Portanto, lembre-se de que os métodos são ações associadas a um objeto e podem ser chamados usando a notação de ponto.

Além disso, os métodos podem receber argumentos, permitindo que você personalize suas ações conforme necessário.

Com a prática e o entendimento desses conceitos, você poderá criar objetos JavaScript que executam tarefas complexas e interagem com o seu código de forma poderosa.

Uso do operador this

Em JavaScript, o operador this é usado para se referir ao objeto atual, ou seja, o objeto em que estamos trabalhando no momento.

Ele é bastante útil quando queremos acessar propriedades ou métodos dentro do próprio objeto.

Vamos usar uma analogia para entender melhor. Imagine um objeto chamado pessoa que possui várias propriedades, como nome e idade.

Agora, suponha que queremos criar um método dentro desse objeto chamado apresentar, que imprime uma mensagem na tela com o nome da pessoa.

Dentro do método apresentar, podemos usar o operador this para referenciar o próprio objeto pessoa.

É como se o this fosse um espelho que reflete o objeto atual em que estamos.

Então, a função “apresentar” ficaria assim:

const pessoa = {
  nome: "João",
  idade: 25,
  apresentar: function() {
    console.log("Olá, meu nome é " + this.nome + " e tenho " + this.idade + " anos.");
  }
};

Aqui, estamos usando o operador this para acessar as propriedades nome e idade do objeto pessoa.

Dessa forma, quando chamarmos o método apresentar, ele irá imprimir a mensagem personalizada com o nome e a idade da pessoa atual.

O operador this permite que nosso código seja mais dinâmico, pois ele se adapta ao objeto atual em que estamos trabalhando.

É como se estivéssemos criando um template que pode ser preenchido com os valores específicos de cada objeto.

Portanto, o operador this é usado para referenciar o objeto atual e permite que você acesse suas propriedades e métodos dentro do próprio objeto.

Ele traz uma flexibilidade importante para trabalhar com objetos em JavaScript, pois permite que você crie código reutilizável e adaptável a diferentes instâncias do objeto.

Herança e protótipos

Em JavaScript, herança e protótipos são conceitos que nos permitem criar objetos que herdam propriedades e métodos de outros objetos.

Podemos pensar na herança como um processo em que um objeto mais específico pode adquirir características de um objeto mais genérico, tornando-se uma extensão dele.

Vamos usar uma analogia para entender melhor. Imagine que temos um molde de um carro chamado CarroMolde.

Esse molde contém todas as características comuns a todos os carros, como rodas, volante e motor. Agora, podemos criar vários carros a partir desse molde, como Carro1, Carro2 e assim por diante.

Esses carros criados herdarão as características do molde, mas também podem ter características específicas adicionadas posteriormente.

Em JavaScript, podemos criar objetos usando uma função construtora que age como nosso molde, definindo as propriedades e métodos comuns.

Em seguida, podemos criar novos objetos a partir dessa função construtora usando a palavra-chave new. Esses objetos criados herdarão as propriedades e métodos da função construtora.

Além disso, em JavaScript, cada objeto possui um protótipo, que é uma referência a outro objeto.

Esse protótipo contém propriedades e métodos que podem ser acessados pelo objeto.

Se uma propriedade ou método não for encontrado no objeto em si, JavaScript irá procurar no protótipo e, se não for encontrado lá, continuará procurando nos protótipos superiores até chegar ao objeto Object no topo da cadeia de protótipos.

Essa cadeia de protótipos permite a herança de propriedades e métodos entre objetos.

Quando tentamos acessar uma propriedade ou método em um objeto, JavaScript verifica primeiro se ele existe no próprio objeto e, caso contrário, busca no protótipo e em toda a cadeia de protótipos.

Isso nos dá flexibilidade para criar objetos que compartilham características comuns, enquanto também podemos adicionar propriedades e métodos específicos para cada objeto individualmente.

Agora, vamos criar um exemplo simples para ilustrar o conceito de herança e protótipos em JavaScript.

// Função construtora para o objeto Carro
function Carro(marca, modelo) {
  this.marca = marca;
  this.modelo = modelo;
}

// Adicionando um método ao protótipo do objeto Carro
Carro.prototype.obterDescricao = function() {
  return this.marca + " " + this.modelo;
};

// Criando um objeto a partir da função construtora Carro
var meuCarro = new Carro("Ford", "Mustang");

// Acessando propriedades e métodos do objeto meuCarro
console.log(meuCarro.marca); // Ford
console.log(meuCarro.modelo); // Mustang
console.log(meuCarro.obterDescricao()); // Ford Mustang

Neste exemplo, temos a função construtora Carro que define as propriedades marca e modelo. Em seguida, adicionamos um método obterDescricao ao protótipo do objeto Carro, que retorna a descrição da marca e modelo do carro.

Ao criar um objeto meuCarro usando new Carro(“Ford”, “Mustang”), o objeto meuCarro herda as propriedades e métodos da função construtora Carro.

Podemos acessar as propriedades marca e modelo diretamente no objeto meuCarro e chamar o método obterDescricao() para obter a descrição do carro.

Esse exemplo mostra como podemos criar objetos em JavaScript usando herança e protótipos, permitindo a reutilização de código e a extensão de propriedades e métodos em objetos específicos.

Portanto, herança e protótipos em JavaScript nos permitem criar objetos que herdam propriedades e métodos de outros objetos, fornecendo uma maneira eficiente de reutilizar e estender o código.

É como se estivéssemos construindo uma hierarquia de objetos, onde os objetos filhos podem herdar as características dos objetos pais, resultando em um código mais organizado e modular.

Manipulação de objetos internos

Ao lidar com objetos em JavaScript, é comum encontrarmos propriedades que também são objetos.

Esses objetos internos podem ser acessados e manipulados da mesma forma que qualquer outra propriedade de um objeto.

Vamos usar uma analogia para entender melhor. Imagine que um objeto seja como uma caixa que contém várias outras caixas dentro dela.

Cada uma dessas caixas internas é uma propriedade do objeto e pode conter seu próprio conjunto de informações.

Para acessar uma propriedade interna de um objeto, não é nada diferente do que já vimos, podemos usar a notação de ponto (.) ou colchetes ([]).

Por exemplo, considerando o objeto pessoa com a propriedade interna endereço, podemos acessar essa propriedade da seguinte maneira:

var pessoa = {
  nome: "João",
  idade: 25,
  endereço: {
    rua: "Rua Principal",
    número: 123,
    cidade: "São Paulo"
  }
};

console.log(pessoa.endereço.rua); // "Rua Principal"
console.log(pessoa["endereço"]["cidade"]); // "São Paulo"

Nesse exemplo, o objeto pessoa possui a propriedade endereço, que por sua vez é outro objeto com as propriedades rua, número e cidade.

Para acessar a rua, podemos usar a notação de ponto após a propriedade endereço (pessoa.endereço.rua), ou podemos usar colchetes e passar o nome da propriedade como uma string (pessoa[“endereço”][“rua”]).

Da mesma forma, podemos modificar os valores das propriedades internas. Por exemplo, podemos alterar a cidade da pessoa da seguinte maneira:

pessoa.endereço.cidade = "Rio de Janeiro";
console.log(pessoa.endereço.cidade); // "Rio de Janeiro"

Dessa forma, podemos manipular objetos internos, acessando e modificando suas propriedades da mesma forma que faríamos com qualquer outra propriedade de um objeto.

É importante entender essa manipulação de objetos internos, pois ela permite trabalhar com estruturas de dados mais complexas e aninhadas em JavaScript, possibilitando a criação de objetos que representem de forma mais fiel as entidades do mundo real.

Agora que você dominou os métodos de manipulação de strings, entendeu o conceito de objetos em JavaScript e explorou as propriedades e métodos desses objetos, está na hora de testar suas habilidades com um desafio prático.

Desafio:

  1. Crie um script JavaScript que cria um objeto para representar um livro, com propriedades como título, autor, ano de publicação e número de páginas.
  2. Adicione um método ao objeto que calcula o tempo médio de leitura, considerando 200 páginas por hora.
  3. Utilize o método para calcular o tempo de leitura do livro e exiba o resultado na tela.

Parabéns por ter terminado o módulo! Você agora possui uma base sólida para criar programas mais complexos e interativos, manipulando dados de forma eficiente e organizada.

Quando tive preparado, avance para o próximo módulo. Espero você lá!

No próximo tópico, teremos um exercício do módulo que vai colocar em prática tudo o que você aprendeu até agora. Prepare-se para aplicar os conceitos e técnicas que adquiriu e mostrar todo o seu conhecimento.

Estou certo de que você está pronto para superar esse desafio e consolidar seu aprendizado. Vamos lá, mãos à obra!

Entrar na conversa
Rolar para cima