Este artigo necessita de uma revisão técnica. Como posso ajudar.

Este artigo necessita de uma revisão editorial. Como posso ajudar.

Esta tradução está incompleta. Ajude atraduzir este artigo.

This is a new technology, part of the ECMAScript 2015 (ES6) standard.
This technology's specification has been finalized, but check the compatibility table for usage and implementation status in various browsers.

Rascunho
Esta página está incompleta.

Classes em JavaScript são introduzidas no ECMAScript 6 e são simplificações da linguagem para as heranças baseadas nos protótipos. A sintaxe para classes não introduz um novo modelo de herança de orientação a objetos em JavaScript. Classes em JavaScript provêm uma maneira mais simples e clara de criar objetos e lidar com herança.

Definindo classes

As Classes são, de fato, "funções especiais", e, assim como você pode definir "function expressions" e "function declarations", a sintáxe de uma classe possui dois componentes: "class expressions" e  "class declarations".

Declarando classes

Uma maneira de definir uma classe é usando uma declaração de classe. Para declarar uma classe, você deve usar a palavra-chave class seguida pelo nome da classe (aqui "Poligono").

class Poligono {
  constructor(altura, largura) {
    this.altura = altura;
    this.largura = largura;
  }
}

Uso antes da declaração (Hoisting - Tradução Literal: Lançamento)

Uma diferença importante entre declarações de funções das declarações de classes, é que  declararações de  funções são hoisted e declarações de classes não são. Primeiramente deve declarar sua classe para só então acessá-la, pois do contrário o código a seguir irá lançar uma exceção: ReferenceError:

var p = new Poligono(); // Erro de referência

class Poligono {} 

Expressões de Classes

Uma Expressão de Classe (class expression) é outra forma para definir classes. Expressões de Classes podem possuir nomes ou não (anônimas). O nome dado para uma expressão de classe é local ao corpo da classe.

// sem nome
var Poligono = class {
  constructor(altura, largura) {
    this.altura = altura; 
    this.largura = largura;
  }
};

// nomeada
var Poligono = class Poligono {
  constructor(altura, largura) { 
    this.altura = altura;
    this.largura = largura;
  }
};

Corpo de uma classe e definições de métodos

O corpo de uma classe é a parte que está entre chaves {}. É aí onde você define os membros da classe, como os métodos, ou os construtores.

Modo Estrito (strict mode)

Os corpos das Declarações de Classes e das Expressões de Classes são executados em modo estrito.

Construtor

O método constructor é um tipo especial de método para criar e iniciar um objeto criado pela classe. Só pode existir um método especial com o nome "constructor" dentro da classe. Um erro de sintáxe SyntaxError será lançado se a classe possui mais do que uma occorência do método constructor.

Um construtor pode usar a palavra-chave super para chamar o construtor de uma classe pai.

Métodos Protótipos

Veja também definições de métodos (method definitions).

class Poligono {
  constructor(altura, largura) {
    this.altura = altura;
    this.largura = largura;
  }
  
  get area() {
    return this.calculaArea()
  }

  calculaArea() {
    return this.altura * this.largura;
  }
}

Métodos estáticos

A palavra-chave static define um método estático de uma classe. Métodos estáticos são chamados sem a instanciação da sua classe e não podem ser chamados quando a classe é instanciada. Métodos estáticos são geralmente usados para criar funções de utilidades por uma aplicação.

class Ponto {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    static distancia(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;

        return Math.sqrt(dx*dx + dy*dy);
    }
}

const p1 = new Ponto(5, 5);
const p2 = new Ponto(10, 10);

console.log(Ponto.distancia(p1, p2));

Sub classes com o extends

A palavra-chave extends é usada em uma declaração de classe, ou em uma expressão de classe para criar uma classe como filha de uma outra classe.

class Animal { 
  constructor(nome) {
    this.nome = nome;
  }
  
  falar() {
    console.log(this.nome + ' emite um barulho.');
  }
}

class Cachorro extends Animal {
  falar() {
    console.log(this.nome + ' latidos.');
  }
}

Chamada de super classe com super

A palavara-chave super é usada para invocar funções no pai de um objeto.

class Gato { 
  constructor(nome) {
    this.nome = nome;
  }
  
  falar() {
    console.log(this.nome + ' emite um barulho.');
  }
}

class Leao extends Gato {
  falar() {
    super.falar();
    console.log(this.nome + ' rugidos.');
  }
}

ES5 sintaxe de herança e ES6 sintaxe de classes comparativo

ES5 sintaxe: 

//Exemplo de classe ES5
var Humano = function(peso, altura) {
   this.peso = peso;
   this.altura = altura;
};
 
Humano.prototype.calcularIMC = function() {
  return this.peso/(this.altura*this.altura);
};

Humano.prototype.getPeso = function() {
  return this.peso;
};

Humano.prototype.getAltura = function() {
  return this.altura;
}; 

//Exemplo herança ES5
var Pessoa = function(nome, peso, altura) {
 Humano.call(this, peso, altura);
 this.nome = nome;
};

Pessoa.prototype = Object.create(Humano.prototype); 
Pessoa.prototype.constructor = Humano;

ES6 sintaxe: 

//Exemplo de classe ES6 
class Humano {
 constructor(peso, altura) {
  this.peso = peso;
  this.altura = altura;
 }
 
 calcularIMC() {
  return this.peso/(this.altura*this.altura);
 }
 
 getPeso() {
  return this.peso;
 }
 
 getAltura() {
  return this.altura;
 }
} 

//Exemplo de herança ES6 
class Pessoa extends Humano {
  constructor(nome, peso, altura) {
   super(peso, altura);
   this.nome = nome;
  }
}

Mix-ins

Subclasses abstratas ou mix-ins são templates para classes. Uma classe do ECMAScript pode apenas ter uma classe pai, assim sendo, não é possível a classe ter herança múltipla.

Para se ter um comportamento similar ao de herança múltipla no ECMAScript usa-se mix-ins, uma forma de implementar mix-ins é usar um template de subclasse que é uma função que instancia uma classe base e retorna uma subclasse extendida desta classe base:

class Humano {
  constructor(nome) { 
    this.nome = nome;
  }
  andar() { 
    return this.nome+' andou um passo'
  }
}

const HumanoFalante = Base => class extends Base {
  falar() { 
    return this.nome+' diz: olá mundo!'
  }
}

const HumanoFalanteMixado = Base => class extends Base {}

const HumanoFinal = HumanoFalanteMixado(HumanoFalante(Humano))

const humano = new HumanoFinal('Bill Gates')

console.log(humano.andar())
console.log(humano.falar())

Especificações

Especificação Status Comentário
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Class definitions' in that specification.
Standard Definição inicial.

Compatibilidade de navegadores

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 42.0 Nightly build ? Não suportado 9.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support Não suportado Nightly build ? ? ? 42.0

 

Veja também

Etiquetas do documento e colaboradores

 Última atualização por: Arashk,