Criando objetos e o uso do "this" no JavaScript

Por: Angelo Luis Ferreira | 26/11/2019 Acessos: 6.078

Neste tutorial vamos mostrar como criar objetos no JavaScript é muito simples. Nosso objetivo neste artigo é apenas apresentarmos exemplos práticos sobre a criação de objetos e a utilização do "this" sem aprofundarmos nas considerações teóricas deste tema que são bastante extensas e complexas.

Observação: JavaScript por ser uma linguagem baseada em objetos possui quase todos os seu elementos definidos como objetos.

Objetos: Um objeto é uma coleção de dados e/ou funcionalidades relacionadas. Estes dados e/ou funcionalidades consistem geralmente em variáveis e funções que dentro de  um objeto passam a ser denominados de propriedades e métodos respectivamente. - O básico sobre objetos JavaScript.

1. Criando um objeto simples e definindo propriedades em JavaScript

1.1 Vamos criar o nosso primeiro objeto e nele vamos também definir suas propriedades:

1.1.1.  Propriedade nada mais é do que uma variável associada à um objeto.

1.1.2. As propriedades de um objeto definem, portanto, as características de um objeto.

1.1.3. As propriedades podem receber qualquer tipo de dados específicos do JavaScript, como string, number, array, object, etc

1.2. Existem várias formas para criarmos objetos em JavaScript. Vamos apresentar as duas formas mais simples e usuais, sendo elas:

a) Modo literal utilizando o inicializador {} - (recomendado).

b) Modo utilizando a palavra chave "new Object()".

Método literal

No exemplo abaixo vamos criar o objeto cliente com as suas propriedades nome, profissão e idade:

let cliente = {
  nome: 'Carlos',
  profissão: 'professor',
  idade: 52 
}

Obs1: As características do objeto deverão ficar inseridas dentro de chaves {}.

Obs2: As propriedades e métodos deverão ser delimitadas por vírgulas. O último elemento do objeto obrigatoriamente não deve possuir vírgula.

Obs3: O ponto e vírgula no final da chave "};" é opcional.

Obs4: No JavaScript moderno (ECMAScript 6) é permitido a utilização de acentos nos nomes de variáveis, propriedades, métodos, objetos, funções, classes, etc.

Método utilizando a palavra chave "new Object()"

No exemplo abaixo vamos criar o mesmo objeto cliente com as suas propriedades nome, profissão e idade:

let cliente = new Object()
cliente.nome = 'Carlos'
cliente.profissão = 'professor'
cliente.idade = 52

obs1: Observe que os dois exemplos acima fazem exatamente o mesmo. Portanto, não há necessidade de utilizar o método com a new Object().

obs2: Pela facilidade, legibilidade e velocidade de execução, recomendo que utilize sempre o primeiro método (método literal do objeto).

obs3: Observe que utilizamos o ponto (.) para separar o objeto da propriedade. Exemplo: carros.marca

obs4: O ponto e vírgula no final de cada comando é opcional.

2. Acessando as propriedades de um objeto JavaScript

2.1. Vamos agora acessar as propriedades do objeto que criamos no exemplo anterior.

2.2. Observe que podemos acessar uma propriedade de um objeto de 2 formas:

a) Utilizando uma simples notação de ponto (.) para separar o objeto da propriedade. (recomendado)

Exemplo: cliente.nome (Objeto: cliente / Propriedade: nome)

b) Utilizando colchetes [], onde a propriedade fica inserida entre aspas.

Exemplo: cliente['nome'] (Objeto: cliente / Propriedade: nome)

2.3. Veja no exemplo a seguir onde acessamos as propriedades do objeto cliente nas duas formas:

HTML

<h1>Criando Objetos Javascript</h1>
<h2>Clientes:</h2>
<p id="dados"></p>

JAVASCRIPT

let cliente = {
  nome: 'Carlos',
  profissão: 'professor',
  idade: 52 
};

document.getElementById('dados').innerHTML = `
     <ul>
        <li>Nome: ${cliente.nome}</li>
        <li>Profissão: ${cliente.profissão}</li>
        <li>Idade: ${cliente['idade']}</li>
     </ul>
`;

obs1: Observe que utilizamos "templates strings' para concatenarmos as propriedades com a lista não ordenada - leia Manipulando strings com Templates Strings, o pulo do gato do JavaScript moderno

obs2: Observe que acessamos as propriedades do objeto usando ponto (.) em cliente.nome e cliente.profissão, e colchetes [] em cliente['idade'].

Veja o resultado do nosso exemplo acima:

  See the Pen
  Criando objetos javascript by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

3. Criando e acessando objetos dentro de arrays

3.1. Neste item vamos mostrar como criar e acessar objetos dentro de arrays.

3.2. No exemplo abaixo veja que criamos o array "carros" contendo 5 objetos distintos mas com as mesmas propriedades.

HTML

<h1> Objetos dentro de arrays</h1>
<h3>Marcas - ano - fabricante</h3>
<p class='carros'></p>

JavaScript

let carros = [
  {fabricante: 'Fiat', marca: "Uno", ano: 1993},
  {fabricante: 'Fiat', marca: "Palio", ano: 2000},
  {fabricante: 'GM', marca: "Celta", ano: 2005},
  {fabricante: 'Ford', marca: "Corsel", ano: 1973},
  {fabricante: 'Volkswagen', marca: "Passat", ano: 1972}
]

let texto = ""

for (let j in carros) {
  let marca = carros[j].marca;
  let ano = carros[j].ano;
  let fabric = carros[j].fabricante;
  texto = texto + marca + " - " + ano + " - " + fabric + "
"
}

document.querySelector('.carros').innerHTML = texto

obs.1: Observe que criamos 5 objetos dentro do array "carros" com as mesma propriedades: fabricante, marca e ano.

obs2: Para varrermos todo array usamos o loop for com a expressão "in". Isto faz com que o loop acesse cada elemento do array, iniciando pelo índice 0.

obs3: No exemplo acima nosso array tem 5 objetos, portanto, a variável j irá de 0 a 4. Exemplo:  carros[3].marca = "Corsel", ou seja propriedade marca do objeto com índice 3.

Veja o resultado do nosso exemplo acima:

  See the Pen
  Criando objetos - Objetos dentro de arrays by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

4. Definindo métodos em um objeto JavaScript

4.1. Neste tópico vamos demonstrar como criar um método em um objeto JavaScript.

4.1.1.  Método nada mais é do que uma função associada à um objeto, ou seja, são funções armazenadas como propriedades do objeto.

4.1.2. Métodos devem ser definidos como funções normais JavaScript, exceto que devem estar atribuídos como propriedade de um objeto.

4.2. Veja o exemplo abaixo onde definimos os métodos apagar(), mostrar() e mudar().

HTML

<h1>Criando Objetos Javascript</h1>
<h2 class="clientes" onclick="cliente.mudar()">Clientes: (clique aqui para mudar cor)</h2>
<p id="dados"></p>

<button onclick="cliente.apagar()" >Clique para Apagar dados</button>
<button onclick="cliente.mostrar()" >Clique para Mostrar dados</button>

obs: Observe que para acessarmos um método precisamos indicar o objeto pelo qual ele pertence separado por um ponto (.). Exemplo: cliente.mostrar()

JAVASCRIPT

let cliente = {
  // propriedades
  nome: 'Carlos',
  profissão: 'professor',
  idade: 52,
  // métodos
  mostrar: function() {
    document.querySelector('#dados').style.color = "black";
    document.querySelector('#dados').style.display = "block";
  },
  apagar: function() {
    document.querySelector('#dados').style.display = "none";
  },
  mudar: function() {
    document.querySelector('#dados').style.color = "#ff0000";
  }
};

document.getElementById('dados').innerHTML = 
  "<ul>"+
    "<li>Nome: "+ cliente.nome +"</li>"+
    "<li>Profissão: "+ cliente.profissão +"</li>"+
    "<li>Idade: "+ cliente.idade +"</li>"+
  "</ul>";

obs: Observe o método nada mais é do que uma função atribuída como uma propriedade. Exemplo: apagar: function() { ... }

Veja o resultado do nosso exemplo acima:

  See the Pen
  Criando objetos - Métodos by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

5. O uso do "this" para referir ao próprio objeto no JavaScript

5.1. A palavra chave "this" no Javascritp se refere ao objeto ao qual se pertence.

5.2. O "this" possui valores diferentes dependendo de onde é utilizado, sendo:

• Em um método, this se refere ao objeto proprietário;
• Sozinho, this se refere ao objeto global;
• Em uma função, this se refere ao objeto global;
• Em um evento, this se refere ao elemento que recebeu o evento;
• Métodos como call () e apply () podem fazer referência a qualquer objeto.

5.3. Neste tutorial vamos abordar somente o "this" utilizado em um método. Para saber mais sobre o uso do "this" leia This no JavaScript.

5.4. Veja no exemplo abaixo como utilizar o "this" em um método para acessar as propriedades do próprio objeto.

HTML

<h1 id='titulo'>Objetos - Usando o this</h1>

<button onclick="carro.ligar()">Ligar carro</button>
<button onclick="carro.acelerar()">Acelerar</button>
<button onclick="carro.desligar()">Desligar carro</button>

 <h2 id='aqui'></h2>

obs: Observe que para acessarmos um método precisamos indicar o objeto pelo qual ele pertence separado por um ponto (.). Exemplo: carro.ligar()

JAVASCRIPT

let carro = {
    marca: "Fiat",
    modelo: 'Uno',
    ligado: false,
    ligar:function() {
        this.ligado = true;
        document.getElementById('aqui').innerHTML = "O " + this.modelo + " está LIGADO";
    },    
    acelerar:function() {
        if (this.ligado == true) {
            document.getElementById('aqui').innerHTML = "O " + this.modelo +  " está ACELERADO";
        }  else {
            document.getElementById('aqui').innerHTML = "Ligue o carro primeiro";
        }
    },      
    desligar: function() {
        this.ligado = false;
        document.getElementById('aqui').innerHTML = "O " + this.marca +  " está DESLIGADO"
    }           
}

obs1: Observe que para acessarmos uma propriedade dentro de um objeto, precisamos utilizar o "this": Exemplos: this.ligado, this.modelo, this.marca

obs2: O 'this' no exemplo acima se refere ao objeto proprietário, que no caso é carro.

Veja o resultado do nosso exemplo acima:

  See the Pen
  Uso do this em objetos by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

6. Adicionando e alterando propriedades de um objeto

6.1. Neste item vamos exemplificar como alterar e incluir propriedades em um objeto.

6.1.1. Por definição, um método sempre estará atribuído à uma propriedade. Assim, da mesma forma que na propriedade, podemos alterar e/ou adicionar métodos em um objeto.

6.2. Veja o exemplo abaixo onde alteramos a propriedade idade e adicionamos a propriedade escolaridade e o método cliente.mudar() no objeto cliente.

HTML

<h1>Adicionar e alterar propriedades em um objeto</h1>
<h3>Objeto original</h3>
<p id="cliente"></p>
<h3>Objeto Modificado</h3>
<p id="clienteAlterado"></p>
<button onclick="cliente.mudar()">Clique para mudar a cor</button>

obs: Observe que para acessarmos um método precisamos indicar o objeto pelo qual ele pertence separado por um ponto (.). Exemplo: cliente.mudar()

JAVASCRIPT

let cliente = {
  nome: "Oscar",
  sobrenome: "Ferreira",
  idade: 52,
  nacionalidade: "brasileira"
};

// lendo idade e escolaridade no objeto original
document.querySelector("#cliente").innerHTML = "idade do cliente: " + cliente.idade + "
" +
          "escolaridade: " + cliente.escolaridade + "
";

//alterando a propriedade idade
cliente.idade = 55;

//adicionando nova propriedade "escolaridade"
cliente.escolaridade = "superior completo";

// lendo idade e escolaridade no objeto modificado
document.querySelector("#clienteAlterado").innerHTML = "idade do cliente: " + cliente.idade + "
" +
          "escolaridade: " + cliente.escolaridade + "
";

// adicionar novo método cliente.mudar()
cliente.mudar = function() {
    document.querySelector("#clienteAlterado").style.color = '#ff0000';  
}

obs: No exemplo acima, após as modificações teríamos o seguinte objeto:

let cliente = {
  nome: "Oscar",
  sobrenome: "Ferreira",
  idade: 55,
  nacionalidade: "brasileira",
  escolaridade: "superior completo",
  mudar: function() {
      document.querySelector("#clienteAlterado").style.color = '#ff0000';  
  }
};

Veja o resultado do nosso exemplo acima:

  See the Pen
  Adicionando e alterando propriedades by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

7. Removendo propriedades de um objeto

7.1. Vamos neste tópico demonstrar como remover propriedades de um objeto através do operador "delete".

7.2. Veja o exemplo abaixo onde removemos a propriedade escolaridade do objeto cliente:

HTML

<h1>Removendo propriedades de um objeto</h1>
<h3>Objeto original</h3>
<p id="cliente"></p>
<h3>Objeto modificado</h3>
<p id="clienteAlterado"></p>
<button onclick="cliente.mudar()">Clique para mudar a cor</button>

obs: Observe que para acessarmos um método precisamos indicar o objeto pelo qual ele pertence separado por um ponto (.). Exemplo: cliente.mudar()

JAVASCRIPT

let cliente = {
  nome: "Oscar",
  sobrenome: "Ferreira",
  idade: 55,
  nacionalidade: "brasileira",
  escolaridade: "superior completo",
  mudar: function() {
      document.querySelector("#clienteAlterado").style.color = '#ff0000';  
  }
};

// lendo idade e escolaridade no objeto original
document.querySelector("#cliente").innerHTML = "Nome do cliente: " + cliente.nome + "<br/>" +
          "escolaridade: " + cliente.escolaridade + "<br/>";

// deletando a propriedade escolaridade e o método cliente.mudar
delete cliente.escolaridade;

// lendo idade e escolaridade no objeto original
document.querySelector("#clienteAlterado").innerHTML = "Nome do cliente: " + cliente.nome + "<br/>" +
          "escolaridade: " + cliente.escolaridade + "<br/>";

obs: No exemplo acima, após as modificações teríamos o seguinte objeto:

let cliente = {
  nome: "Oscar",
  sobrenome: "Ferreira",
  idade: 55,
  nacionalidade: "brasileira",
  mudar: function() {
      document.querySelector("#clienteAlterado").style.color = '#ff0000';  
  }
};

Veja o resultado do nosso exemplo acima:

  See the Pen
  Deletando propriedades de um objeto by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

8. Usando uma Função Construtora

8.1. Neste item vamos abordar uma forma alternativa para criação de objetos. Trata-se da utilização de Funções Construtoras também conhecidas como classes de objetos.

8.1.1. Em orientação a objetos, uma classe é uma descrição que abstrai um ou mais objetos com características similares. Portanto, uma classe define as características dos objetos.

Obs.: O conhecimento de Funções Construtoras é muito importante para quem quer avançar no Javascript.

8.2. No nosso exemplo abaixo, vamos criar a função construtora ou classe Carro. Observe que por convenção, vamos sempre utilizar uma classe em orientação a objetos com a letra inicial maiúscula:

function Carro(marca, modelo, ano) {
  this.marca = marca;
  this.modelo = modelo;
  this.fabricação = ano;
}

obs1: No objeto a ser instanciado queremos que ele tenha as propriedades marca, modelo, e ano. 

obs2: Note o uso do "this" para atribuir valores às propriedades do objeto com base nos valores passados para a função.

obs3: Você não pode adicionar uma nova propriedade a um construtor de objetos da mesma maneira que adiciona uma nova propriedade a um objeto existente. Para isso você precisará adicionar a nova propriedade diretamente na função construtora.

8.3. Com a classe definida, podemos agora instanciar, ou seja, criar o objeto meucarro, onde definimos os valores para cada propriedade:

meucarro = new Carro("Nissan", "300ZX", 1992);

8.4. Podemos criar quantos objetos forem necessários:

carro001 = new Carro("Fiat", "UNO", 1995);
carro002 = new Carro("Ford", "Corsel", 1973);
carroesposa = new Carro("BMW", "i3", 2020);

 8.5. Para acessarmos os valores, podemos criar um método para fazer este processo como no exemplo a seguir:

function Carro(marca, modelo, ano) {
  this.marca = marca;
  this.modelo = modelo;
  this.fabricação = ano;
  this.mostrarAno = function() {
    return this.fabricação;
  };
}

Obs.: Criamos o método this.mostrarAno() para acessarmos o valor ano para cada objeto.

8.6. Portanto, para obtermos o ano do objeto meucarro basta concatenarmos o objeto com o método: meucarro.mostrarAno()

meucarro = new Carro("Nissan", "300ZX", 1992);

console.log('O ano do meu carro é: ' + meucarro.mostrarAno())

Obs.: Veja abaixo o retorno no console:

8.7. Veja o código completo abaixo:

// função construtora
function Carro(marca, modelo, ano) {
  this.marca = marca;
  this.modelo = modelo;
  this.fabricação = ano;
  this.mostrarAno = function() {
    return this.fabricação;
  };
}

// instanciando objetos
meucarro = new Carro("Nissan", "300ZX", 1992);
carro001 = new Carro("Fiat", "UNO", 1995);
carro002 = new Carro("Ford", "Corsel", 1973);
carroesposa = new Carro("BMW", "i3", 2020);

// acessando valores dos objetos
console.log('O ano do meu carro é: ' + meucarro.mostrarAno())
console.log('O ano do carro da minha esposa: ' + carroesposa.mostrarAno())
console.log('O ano do carro n. 002 é: ' + carro002.mostrarAno())

Obs.: Veja abaixo o retorno no console:

8.7. Veja a seguir um exemplo completo que ajudará a compreender melhor o uso de uma função construtora:

HTML

<body onload="start()">
  
<h2>JavaScript Funçao Construtora</h2>

<p id="father"></p>
<p id="sister"></p>
<p id="aunt"></p>
<p id="buttonText"></p>

<input  id="muda" type="number" name="idade"></input>
<br/><br/>
<button onclick="pegarValor(meuPai)">Mudar a idade do Pai</button>
<button onclick="pegarValor(minhaIrmã)"> Mudar a idade da Irmã</button>
<button onclick="pegarValor(minhaTia)"> Mudar a idade da Tia</button>

JAVASCRIPT

/ Função construtora para a classe Person
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
  this.name = function() {
    return this.firstName + " " + this.lastName
  };
  this.mostrarIdade = function() {
    return this.age;
  };
  this.mudarIdade = function (idade) {
    this.age = idade;
  }
}

// Criando novos objetos a partir da class Person
let meuPai = new Person("John", "Doe", 50, "castanho");
let minhaIrmã = new Person("Lara", "Craft", 22, "azul");
let minhaTia = new Person("Carl", "Doe", 60, "verde");

// Criando função inicial
function start() {
    // Mostrando os nomes completos
  document.getElementById("father").innerHTML =
  "Meu Pai é " + meuPai.name() + ' e tem ' + meuPai.mostrarIdade() + ' anos
'; 
  document.getElementById("sister").innerHTML =
  "Minha irmã é " + minhaIrmã.name() + ' e tem ' + minhaIrmã.mostrarIdade() + ' anos
';
  document.getElementById("aunt").innerHTML =
  "Minha tia é " + minhaTia.name() +  ' e tem ' + minhaTia.mostrarIdade() + ' anos
';
}

// função para pegar valor digitado
function pegarValor(pessoa) {
  let novaIdade = document.querySelector('#muda').value;
  pessoa.mudarIdade(novaIdade); 
  start(); // mostra novos valores
}

Veja o resultado do nosso exemplo acima:

  See the Pen
  Função construtora - Objetos by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

9. Usando o método Object.create

9.1. Finalmente neste item vamos ver como utilizar o método Object.create para criar objetos.

9.2. Esse método é muito útil, pois permite que você escolha um objeto protótipo para o objeto que você quer criar, sem a necessidade de se definir uma função construtora. Veja o exemplo abaixo:

JAVASCRIPT

// Encapsulamento das propriedades e métodos de Animal (protótipo)
var Animal = {
  tipo: "Invertebrados", // Propriedades de valores padrão
  qualTipo : function() {  // Método que ira mostrar o tipo de Animal
    console.log(this.tipo);
  }
}

// Cria um novo tipo de animal chamado invertebrado
var invertebrado = Object.create(Animal);
invertebrado.qualTipo(); // Saída:Invertebrados

// Cria um novo tipo de animal chamado Peixes
var peixe = Object.create(Animal);
peixe.tipo = "Peixes";
peixe.qualTipo(); // Saída: Peixes

// Cria um novo tipo de animal chamado Mamífero
var mamifero = Object.create(Animal);
mamifero.tipo = "Mamífero";
mamifero.qualTipo(); // Saída: Mamífero

Veja o resultado do nosso exemplo acima:

Documentação Oficial

1. [O básico sobre objetos JavaScript] » Informações básicas sobre o uso de objetos em JavaScript.

2. [Trabalhando com objetos] » Sobre o uso de objetos em JavaScript.