Classe JavaScript

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

Classe do JavaScript é um template de objeto do JavaScript.

Classe do JavaScript

sintaxe

Use a palavra-chave class Crie a classe.

Sempre adicione o nome constructor() 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 JavaScriptnão éobjeto.

É apenas um objeto do JavaScripttemplate.

Uso da classe

Se 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 você mesmo

O exemplo acima usa Classe Carcriou dois Objeto Car.

O método constructor é chamado automaticamente ao criar um novo objeto.

Método construtor

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

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

Métodos de classe

Criação de métodos de classe

sintaxe

igual aos métodos de objeto.

Use a palavra-chave class Crie a classe.

Sempre adicione constructor() métodos.

Em seguida, 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 a idade 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 é " + myCar.age() + " anos.";

Experimente você mesmo

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 você mesmo

Suporte ao Navegador

A tabela a seguir indica a primeira versão do navegador que suporta completamente as classes 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

No final deste tutorial, você aprenderá mais sobre classes JavaScript.