Objetos JavaScript

Índice

Mostrar índice

Em JavaScript, os objetos são reis. Se você entende de objetos, você entende de JavaScript.

Em JavaScript, quase “tudo” é um objeto.

Booleanos podem ser objetos (se definidos com a palavra-chave new)
Os números podem ser objetos (se definidos com a palavra-chave new)
Strings podem ser objetos (se definidos com a palavra-chave new)
Datas são sempre objetos
Matemática são sempre objetos
Expressões regulares são sempre objetos
Matrizes são sempre objetos
Funções são sempre objetos
Objetos são sempre objetos

Todos os valores JavaScript, exceto os primitivos, são objetos.

Primitivos JavaScript

Um valor primitivo é um valor que não possui propriedades ou métodos.

3.14 é um valor primitivo

Um tipo de dados primitivo são dados que possuem um valor primitivo.

JavaScript define 7 tipos de tipos de dados primitivos:

Exemplos


string
number
boolean
null
undefined
symbol
bigint

Imutável

Os valores primitivos são imutáveis (são codificados e não podem ser alterados).

se x=3,14, você pode alterar o valor de x, mas não pode alterar o valor de 3,14.

Value	Type	Comment
"Hello"	string	"Hello" is always "Hello"
3.14	number	3.14 is always 3.14
true	boolean	true is always true
false	boolean	false is always false
null	null (object)	null is always null
undefined	undefined	undefined is always undefined

Objetos são variáveis

Variáveis JavaScript podem conter valores únicos:

Exemplo

let person = "John Doe";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

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

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

</body>
</html>

Variáveis JavaScript também podem conter muitos valores.

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

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

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating an object:</p>

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

<script>
let person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>

</body>
</html>

Um objeto JavaScript é uma coleção de valores nomeados

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

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating an object:</p>

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

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

document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>

</body>
</html>

Propriedades do objeto

Os valores nomeados, em objetos JavaScript, são chamados de propriedades.

firstName: John
lastName: Corça
age: 50
eyeColor: azul

Objetos escritos como pares nome-valor são semelhantes a:

Matrizes associativas em PHP
Dicionários em Python
Tabelas hash em C
Mapas hash em Java
Hashes em Ruby e Perl

Métodos de objeto

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

As propriedades do objeto podem ser valores primitivos, outros objetos e funções.

Um método de objeto é uma propriedade de objeto que contém uma função definição.

firstName: John
lastName: Corça
age: 50
eyeColor: azul
fullName: function() {return this.firstName + " " + this.lastName;}

Objetos JavaScript são contêineres para valores nomeados, chamados de propriedades e métodos.

Você aprenderá mais sobre métodos nos próximos capítulos.

Criando um objeto JavaScript

Com JavaScript, você pode definir e criar seus próprios objetos.

Existem diferentes maneiras de criar novos objetos:

Crie um único objeto, usando um literal de objeto.
Crie um único objeto, com a palavra-chave new.
Defina um construtor de objeto e crie objetos do tipo construído.
Crie um objeto usando Object.create().

Usando um Literal de Objeto

Esta é a maneira mais fácil de criar um objeto JavaScript.

Usando um objeto literal, você define e cria um objeto em um declaração.

Um literal de objeto é uma lista de pares nome:valor (como idade:50) entre chaves {}.

O exemplo a seguir cria um novo objeto JavaScript com quatro propriedades:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

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

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

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>Creating a JavaScript Object:</p>

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

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

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Este exemplo cria um objeto JavaScript vazio, e então adiciona 4 propriedades:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

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

<script>
const person = {};
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue"; 

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Usando a palavra-chave JavaScript nova

O exemplo a seguir cria um novo objeto JavaScript usando new Object(), e então adiciona 4 propriedades:

Exemplo

const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

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

<script>
const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue"; 

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Os exemplos acima fazem exatamente o mesmo.

Mas não há necessidade de usar new Object().

Para legibilidade, simplicidade e velocidade de execução, use o método literal de objeto.

Objetos JavaScript são mutáveis

Os objetos são mutáveis: são endereçados por referência, não por valor.

Se person for um objeto, a instrução a seguir não criará uma cópia de person:

const x = person;  // Will not create a copy of person.

O objeto x não é uma cópia de pessoa. É é pessoa. Tanto x quanto pessoa são o mesmo objeto.

Quaisquer alterações em x também mudarão a pessoa, porque x e pessoa são o mesmo objeto.

Exemplo

const person = {
  firstName:"John",
  lastName:"Doe",
  age:50, eyeColor:"blue"
}
 
const x = person;
x.age = 10;      // Will change both x.age and person.age

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>JavaScript objects are mutable.</p>
<p>Any changes to a copy of an object will also change the original object:</p>

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

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

const x = person;
x.age = 10;

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>