ECMAScript 2015, também conhecido como ES6, introduziu classes JavaScript.
Classes JavaScript são modelos para objetos JavaScript.
Use a palavra-chave class para criar uma classe.
Sempre adicione um método chamado constructor():
class ClassName {
constructor() { ... }
}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.
Quando você tem uma classe, você pode usá-la para criar objetos:
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 é 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.
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.
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}Crie um método Class chamado "age", que retorna a idade do carro:
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:
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>
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 |
"use strict"
A sintaxe nas classes deve ser escrita em "modo estrito".
Você receberá um erro se você não seguir as regras do "modo estrito".
No "modo estrito" você receberá um erro se usar uma variável sem declarando isso:
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
// date = new Date(); // This will not work
const date = new Date(); // This will work
return date.getFullYear() - this.year;
}
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes uses "strict mode"</h1>
<p>In a JavaScript Class you cannot use variable without declaring it.</p>
<p id="demo"></p>
<script>
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
// date = new Date(); // This will not work
const date = new Date(); // This will work
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>
Saiba mais sobre o "modo estrito" em: Modo Estrito JS.