Aulas JavaScript

Índice

ECMAScript 2015, também conhecido como ES6, introduziu classes JavaScript.

Classes JavaScript são modelos para objetos JavaScript.

Sintaxe de classe JavaScript

Use a palavra-chave class para criar uma classe.

Sempre adicione um método chamado constructor():

Sintaxe

class ClassName {
   constructor() { ... }
}

Exemplo

class Car {
   constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

O exemplo acima cria uma classe chamada “Car”.

A classe possui duas propriedades iniciais: “nome” e “ano”.

Uma classe JavaScript não é um objeto.

É um modelo para objetos JavaScript.

Usando uma classe

Quando você tem uma classe, você pode usá-la para criar objetos:

Exemplo

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes</h1>
<p>Creating two car objects from a car class:</p>

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

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

document.getElementById("demo").innerHTML =
myCar1.name + " " + myCar2.name;
</script>

</body>
</html>

O exemplo acima usa a classe Car para criar dois objetos Car.

O método construtor é chamado automaticamente quando um novo objeto é criado.

O Método Construtor

O método construtor é um método especial:

Tem que ter o nome exato "construtor"
É executado automaticamente quando um novo objeto é criado
É usado para inicializar propriedades do objeto

Se você não definir um método construtor, JavaScript adicionará um método construtor vazio.

Métodos de classe

Os métodos de classe são criados com a mesma sintaxe dos métodos de objeto.

Use a palavra-chave class para criar uma classe.

Sempre adicione um método constructor().

Em seguida, adicione qualquer número de métodos.

Sintaxe

class ClassName {
   constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

Crie um método Class chamado "age", que retorna a idade do carro:

Exemplo

class Car {
   constructor(name, year) {
    this.name = name;
    this.year = year;
   }
  age() {
    const date = new Date();
    return date.getFullYear() - this.year;
   }
}

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Methods</h1>
<p>How to define and use a Class method.</p>

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

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;

  }
  age() {
    const date = new Date();
    return date.getFullYear() - this.year;
  }
}

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
</script>

</body>
</html>

Você pode enviar parâmetros para métodos de classe:

Exemplo

class Car {
  constructor(name, year) {
    
  this.name = name;
    this.year = year;
  }
  
  age(x) {
    return x - this.year;
  }
}

  const date = new Date();
  let year = date.getFullYear();
const myCar = new 
  Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is 
  " + myCar.age(year) + " years old.";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Method</h1>
<p>Pass a parameter into the "age()" method.</p>

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

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}

const date = new Date();
let year = date.getFullYear();

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is " + myCar.age(year) + " years old.";
</script>

</body>
</html>

Suporte ao navegador

A tabela a seguir define a primeira versão do navegador com suporte total para Aulas em JavaScript:


Chrome 49	Edge 12	Firefox 45	Safari 9	Opera 36
Mar, 2016	Jul, 2015	Mar, 2016	Oct, 2015	Mar, 2016

Você aprenderá muito mais sobre classes JavaScript posteriormente neste tutorial.