Classes JavaScript
O ECMAScript 2015, também conhecido como ES6, introduziu as classes JavaScript.
Classes JavaScript são modelos para objetos JavaScript.
Sintaxe da 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 tem 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 usar a classe para criar objetos:
Exemplo
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);
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"
- Ele é executado automaticamente quando um novo objeto é criado
- É usado para inicializar as propriedades do objeto
Se você não definir um método construtor, o 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 constructor()
método.
Em seguida, adicione qualquer número de métodos.
Sintaxe
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Crie um método de classe chamado "age", que retorna a idade do carro:
Exemplo
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
let date = new Date();
return date.getFullYear() - this.year;
}
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
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;
}
}
let date = new Date();
let year = date.getFullYear();
let myCar = new
Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is
" + myCar.age(year) + " years old.";
Suporte ao navegador
A tabela a seguir define a primeira versão do navegador com suporte total para Classes em JavaScript:
Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
Mar, 2016 | Jul, 2015 | Mar, 2016 | Oct, 2015 | Mar, 2016 |
"usar rigoroso"
A sintaxe nas classes deve ser escrita em "modo estrito".
Você receberá um erro se não seguir as regras do "modo estrito".
Exemplo
No "modo estrito" você receberá um erro se usar uma variável sem declará-la:
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
// date = new Date(); // This will not work
let date = new Date(); // This will work
return date.getFullYear() - this.year;
}
}
Saiba mais sobre o "modo estrito" em: JS Strict Mode .