Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

Como declarar Objetos, Criar Propriedades e Métodos em JavaScript

Agora que já aprendemos o que são objetos, chegou a hora de aprendermos como criar um, como inserir propriedades e métodos, bem como acessá-los, em objetos na linguagem JavaScript.

Como declarar e Criar um Objeto em JavaScript


A maneira mais simples, rápida e fácil de criar um objeto, é fazer simplesmente:
var myObj = {};

Prontinho.
Colocamos as propriedades e métodos de um objeto entre chaves. Nesse caso, temos um objeto de nome myObj, que é vazio.

Uma outra maneira de criar um objeto vazio, é instanciando da classe Object, com o comando new:
var myObj = new Object();

Se usarmos o operador typeof, que diz que tipo de dado é aquele objeto:
function obj()
{
 var myObj = new Object();
 alert(typeof myObj);
}

Ele vai retornar:
Como declarar um objeto em JavaScript

Como Adicionar e Acessar propriedades em um Objeto

Ok, vimos como criar ou instanciar nosso objeto, porém não é muito útil um objeto assim vazio, sem informação nenhuma.

Vamos agora criar o objeto meuCarro.
Depois, vamos adicionar a propriedade modelo com uma string. Fazemos isso simplesmente escrevendo um ponto após o nome do objeto seguido do nome da propriedade, então fazemos tudo isso receber um valor, no caso, uma string:


function obj()
{
 var meuCarro = new Object();
 meuCarro.marca="Corolla";

 alert("Marca do carro: "+meuCarro.marca);
}

Para acessar, basta usar: meuCarro.modelo
Tem uma string dentro dessa propriedade, ou seja, é uma variável interna do objeto, que armazena uma string, que exibimos em um alert:

Como adicionar uma propriedade num objeto

Como criar um método num Objeto

Por fim, vamos aprender como criar um método dentro de um objeto.
Lembrando que um método nada mais é que uma função.

Vamos chamar de ligar() o nome do nosso método.
Basta fazer:
var nomeDoMetodo = function(){
   [código do método]
}



Por exemplo, o método ligar exibe um alert:
function obj()
{
 var meuCarro = new Object();
 meuCarro.marca="Corolla";
 meuCarro.ligar = function(){
  alert("Ligando o carro...Vruuuum!");
 }

 meuCarro.ligar();
}

Para acessar um método, basta escrever o nome do objeto, um ponto, nome do método e o par de parêntesis, como se fosse uma função (método são funções!).

Quando rodamos nosso script:
Método de um objeto em linguagem JavaScript

Criando Objetos com chave:valor

Uma maneira bem mais comum e fácil de se trabalhar com objetos, é declarando eles, suas propriedades e métodos com pares chave/valor (key/value).

Funciona mais ou menos assim:
var meuObjeto = {
  chave1 : valor1,
  chave2 : valor2,
  chave3 : valor3
}

Por exemplo, vamos criar o objeto meuCarro com nome do modelo, ano de fabricação e um método que exibe as propriedades anteriores num alert:
function obj()
{
 var meuCarro = {
  modelo : "Corolla",
  ano    :  2018,
  exibeInfo : function(){
   alert("Meu carro é modelo " + this.modelo + " e ano " + this.ano);
  }
 }
 meuCarro.exibeInfo();
}

O resultado ao invocar meuCarro.exibeInfo():
Apostila de JavaScript grátis para download
Note que, para usarmos propriedades internas de um objeto, usamos o comando this. antes do nome da propriedade, isso serve para sinalizar que estamos querendo acessar a variável interna do objeto!

Se já estudou outra linguagem de programação, objetos nesta forma são semelhantes aos:

  • Arrays associativos PHP
  • Dicionários em Python
  • Hash table em C
  • Hash maps em Java
  • Hashes em Ruby e no Perl


Como Deletar Propriedades

Ok, já vimos como é simples criar objetos com propriedades ou ir criando propriedades depois.
Mas, como dissemos, os objetos são mutáveis, podem mudar, seja pra crescer seja pra diminuir.

O comando delete serve para excluir uma propriedade. Para deletar a propriedade modelo, basta fazer:
delete meuCarro.modelo

E prontinho, já era a informação de modelo do seu carro.

Mais fonte de estudo:
https://www.dofactory.com/tutorial/javascript-objects
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Trabalhando_com_Objetos

Nenhum comentário:

Postar um comentário