Classe do JavaScript

O ECMAScript 2015, também conhecido como ES6, introduziu a classe JavaScript.

A classe JavaScript é um modelo para objetos JavaScript.

Sintaxe da classe JavaScript

Use a palavra-chave class Crie uma classe.

Sempre adicione um nome constructor() com métodos:

Sintaxe

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

Instância

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: "name" e "year".

Classe do JavaScriptNão éobjeto.

É um objeto do JavaScriptTemplate.

Usando a classe

Quando você tiver uma classe, você pode usar essa classe para criar objetos:

Instância

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

Experimente pessoalmente

O exemplo acima usa Classe Carpara criar dois Objeto Car.

O método construtor (constructor method) é chamado automaticamente ao criar um novo objeto.

Método construtor

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

  • Ele deve ter o nome exato "constructor"
  • Executado automaticamente ao criar um novo objeto
  • Usado para inicializar propriedades do objeto
  • Se você não definir um método construtor, o JavaScript adicionará um método construtor vazio.

Métodos de classe

A sintaxe para criar métodos de classe é a mesma que para métodos de objeto.

Use a palavra-chave class para criar uma classe.

Sempre adicione o método constructor().

Então, adicione qualquer quantidade de métodos.

Sintaxe

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

Crie um método da classe chamado "age" que retorna o ano do carro:

Instância

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 =
"Meu carro tem " + myCar.age() + " anos.";

Experimente pessoalmente

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

Instância

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=
"Meu carro tem " + myCar.age(year) + " anos.";

Experimente pessoalmente

Suporte do navegador

A tabela a seguir indica a primeira versão do navegador que suporta completamente a classe JavaScript:

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
Março de 2016 Julho de 2015 Março de 2016 Outubro de 2015 Março de 2016

"use strict"

A sintaxe dentro da classe deve ser escrita no 'modo estrito'.

Se você não seguir as regras do 'modo estrito', receberá uma mensagem de erro.

Instância

No 'modo estrito', se você usar uma variável sem declará-la, você receberá um erro:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // Isso não funcionará
    let date = new Date(); // Isso funcionará
    return date.getFullYear() - this.year;
  }
}

Experimente pessoalmente

Em Modo Estrito JS Aprenda mais sobre o 'modo estrito' aqui.