Objetos JavaScript

Índice

    Mostrar índice

Objetos, propriedades e métodos da vida real

Na vida real, um carro é um objeto.

Um carro tem propriedades como peso e cor, e métodos como iniciar e parar:

Object Properties Methods

car.name = Fiat

car.model = 500

car.weight = 850kg

car.color = white
car.start()

car.drive()

car.brake()

car.stop()

Todos os carros têm as mesmas propriedades, mas os valores das propriedades diferem de carro para carro.

Todos os carros têm os mesmos métodos, mas os métodos são executados em momentos diferentes.

Objetos JavaScript

Você já aprendeu que variáveis JavaScript são contêineres para valores de dados.

Este código atribui um valor simples (Fiat) a uma variável chamada carro:

let car = "Fiat";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p id="demo"></p>

<script>
// Create and display a variable:
let car = "Fiat";
document.getElementById("demo").innerHTML = car;
</script>

</body>
</html>

Objetos também são variáveis. Mas os objetos podem conter muitos valores.

Este código atribui muitos valores (Fiat, 500, branco) a um variável carro nomeado:

const car = {type:"Fiat", model:"500", color:"white"};

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};

// Display some data from the object:
document.getElementById("demo").innerHTML = "The car type is " + car.type;
</script>

</body>
</html>

Os valores são escritos como pares nome:valor (nome e valor separados por um cólon).

É uma prática comum declarar objetos com a palavra-chave const.

Saiba mais sobre como usar const com objetos no capítulo: JS Const.

Definição de Objeto

Você define (e cria) um objeto JavaScript com um objeto literal:

Exemplo

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Espaços e quebras de linha não são importantes. Uma definição de objeto pode abranger várias linhas:

Exemplo

const person = {
    firstName: "John",
    lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Propriedades do objeto

Os pares nome:valores em objetos JavaScript são chamados de propriedades:

firstName

John

lastName

Corça

age

50

eyeColor

azul

Acessando Propriedades do Objeto

Você pode acessar as propriedades do objeto de duas maneiras:

objectName.propertyName

ou

objectName["propertyName"]

Exemplo 1

person.lastName;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>There are two different ways to access an object property.</p>

<p>You can use person.property or person["property"].</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     :  5566
};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>

</body>
</html>

Exemplo2

person["lastName"];

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>There are two different ways to access an object property.</p>

<p>You can use person.property or person["property"].</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     :  5566
};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>

</body>
</html>

Objetos JavaScript são contêineres para valores nomeadoschamados de propriedades.

Métodos de objeto

Os objetos também podem ter métodos.

Métodos são ações que podem ser executadas em objetos.

Os métodos são armazenados em propriedades como função definições.

firstName

John

lastName

Corça

age

50

eyeColor

azul

fullName

function() {return this.firstName + " " + this.lastName;}

Um método é uma função armazenada como uma propriedade.

Exemplo

const person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

No exemplo acima, isto refere-se ao objeto pessoa.

I.E. this.firstName significa a propriedade firstName de this.

I.E. this.firstName significa a propriedade firstName de person.

O que é isto?

Em JavaScript, a palavra-chave this refere-se a um objeto.

Qual objeto depende de como este está sendo invocado (usado ou chamado).

A palavra-chave this refere-se a diferentes objetos dependendo de como é usada:

  • Em um método de objeto, this refere-se ao objeto.

  • Sozinho, isto refere-se ao objeto global.

  • Em uma função, this refere-se ao objeto global.

  • Em uma função, no modo estrito, isso é indefinido.

  • Em um evento, this refere-se ao elemento que recebeu o evento.

  • Métodos como call(), apply() e bind() pode referir isto a qualquer objeto.

Observação

isso não é uma variável. É uma palavra-chave. Você não pode alterar o valor de isto.

Veja também:

O tutorial de JavaScript este

A palavra-chave esta

Em uma definição de função, this refere-se ao "proprietário" da função.

No exemplo acima, este é o objeto pessoa que "possui" o Função nome completo.

Em outras palavras, this.firstName significa a propriedade firstName de este objeto.

Saiba mais sobre isto no JavaScript deste tutorial.

Acessando Métodos de Objeto

Você acessa um método de objeto com a seguinte sintaxe:

objectName.methodName()

Exemplo

name = person.fullName();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>An object method is a function definition, stored as a property value.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

Se você acessar um método sem os parênteses(), ele retornará a definição da função:

Exemplo

name = person.fullName;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>If you access an object method without (), it will return the function definition:</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName;
</script>

</body>
</html>

Não declare strings, números e booleanos como objetos!

Quando uma variável JavaScript é declarada com a palavra-chave "new", a variável é criado como um objeto:

x = new String();        // Declares x as a String object
y = new Number();        // Declares y as a Number object
z = new Boolean();       // Declares z as a Boolean object

Evite objetos String, Número e Booleanos . Eles complicam seu código e tornam seu código mais lento velocidade de execução.

Você aprenderá mais sobre objetos posteriormente neste tutorial.