Classes

Classes JavaScript , introduzidas no ECMAScript de 2015, são principalemente syntactical sugar sobre a herança baseada em prototipagem do JavaScript. A sintaxe de classe não introduz no JavaScript nenhum novo modelo de herança do paradigma das linguagens orientado a objetos .

Definição de classes

As classes são na realidade "funções especiais", e, tal como você pode definir o expressões de funções e declarações de funções, a sintaxe de classe tem dois componentes: expressões de classes e a declaração da classe.

Declaração de classes

Uma forma de definir uma classe é usar uma declaração de classe. Para declarar uma classe, utiliza-se a palavra reservada class seguida do nome da classe ("Rectangle" no seguinte exemplo).

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Hoisting

Uma diferença importante entre a declaração de funções e a declaração de classes é que a declaração de funções são hoisted e a declaração de classes não. É preciso primeiro declarar a classe e só depois aceder-lhe, caso contrário, como no código que se segue, será lançada uma ReferenceError:

var p = new Rectangle(); // ReferenceError

class Rectangle {}

Expressão de Classe

A expressão de classe é outra forma de definir uma classe. As expressões de classes podem ter nome o ser anónimas. O nome dado a uma expressão de classe é local ao corpo da classe. (ainda assim pode ser obtido através do propriedade .name da classe (não da instância) )

// unnamed
var Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

// named
var Rectangle = class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

Definição de corpo de classe e de método

O corpo da classe é a parte que está entre as chavetas {}. É aqui que são definidos os membros da classe, tais como, métodos e construtores.

Strict mode - modo estrito

Os corpos da declaração de classes e da expressão de classes são executados em strict mode i.e. construtor, métodos estáticos e de prototipo, funções getter e setter são executadas em modo estrito.

Construtor (constructor)

O método constructor é um método especial para criar e inicializar um objto criado de uma class. Numa classe, apenas pode existir um método especial com o nome "constructor". Se a classe tiver mais do que uma occorrência de um método constructor será lançada uma  SyntaxError.

Um construtor pode utlizar a palavra reservada super para invocar o construtor da classe pai.

Métodos de Prototype 

Ver também definição de métodos.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

Métodos estáticos

A palavra reservada static define um método como estático para uma classe. Os métodos estáticos são chamados sem instanciarem as suas classes e não podem ser chamados a partir de instâncias da classe. Os métodos estáticos são frequentemente utilizados para criar funções utilitárias para uma aplicação.

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

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

    return Math.hypot(dx, dy);
  }
}

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

console.log(Point.distance(p1, p2)); // 7.0710678118654755

Boxing com métodos estáticos e de protótipo 

Quando um método estático é chamado sem um objeto correspondente ao "this", o valor do "this" é então undefined dentro do método chamado. O comportamento será o mesmo, mesmo que a diretiva "use strict" não esteja presente, isto porque o código contido no limite sintático do corpo da class é sempre executado em modo estrito.

class Animal { 
  speak() {
    return this;
  }
  static eat() {
    return this;
  }
}

let obj = new Animal();
obj.speak(); // Animal {}
let speak = obj.speak;
speak(); // undefined

Animal.eat() // class Animal
let eat = Animal.eat;
eat(); // undefined

Se o texto acima for escrito usando a sintaxe tradicional baseada em função, o autooboxing ocorrerá nas chamadas de método no modo não estrito com base no valor inicial do this. Se o valor inicial for undefined, isso será definido para o objeto global.

Autoboxing não acontecerá no modo estrito, o valor do this permanece como passado ao método.

function Animal() { }

Animal.prototype.speak = function() {
  return this;
}

Animal.eat = function() {
  return this;
}

let obj = new Animal();
let speak = obj.speak;
speak(); // global object

let eat = Animal.eat;
eat(); // global object

Propriedades de instância

Propriedades de instância devem ser definidas dentro de métodos da classe:

class Rectangle {
  constructor(height, width) {    
    this.height = height;
    this.width = width;
  }
}

Propriedades estáticas da classe e propriedades de dados do protótipo devem ser definidas fora da declaração do ClassBody:

Rectangle.staticWidth = 20;
Rectangle.prototype.prototypeWidth = 25;

Declaração de campos (Field)

Declaração de campos (field ) públicos

Com a sintaxe de declaração de campo JavaScript, o exemplo acima pode ser escrito como:

class Rectangle {
  height = 0;
  width;
  constructor(height, width) {    
    this.height = height;
    this.width = width;
  }
}

Ao declarar campos antecipadamente, as definições de classe se tornam mais autodocumentadas e os campos estão sempre presentes.

Como visto acima, os campos podem ser declarados com ou sem um valor padrão.

Declaração de campos (field) privados 

Usando campos privados, a definição pode ser refinada como abaixo.

class Rectangle {
  #height = 0;
  #width;
  constructor(height, width) {    
    this.#height = height;
    this.#width = width;
  }
}

É um erro referenciar campos privados de fora da classe. eles só podem ser lidos ou escritos dentro do corpo da classe. Ao definir coisas que não são visíveis fora da classe, você garante que os utilizadores das suas classes não dependeram de estruturas internas, que podem mudar a versão para a versão.

Os campos privados não podem ser criados posteriormente através da sua afetação, como se pode fazer com as propriedades normais.

Derivação de classes com extends

A palavra reservada extends é utilizada na declaração de classes ou na expressão de classes para criar uma classe filha ou derivada de outra .

class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

var d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

Se houver um construtor presente numa classe derivada, este precisa de chamar super() antes de utilizar o "this".

A tradicionais "classes" function-based podem também ser extendidas:

function Animal (name) {
  this.name = name;  
}

Animal.prototype.speak = function () {
  console.log(this.name + ' makes a noise.');
}

class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

var d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

É de notar que uma classe não pode estender um objeto regular (non-constructible). Alternativamente, para se criar herança a partir de um objeto regular, deve ser usado Object.setPrototypeOf():

var Animal = {
  speak() {
    console.log(this.name + ' makes a noise.');
  }
};

class Dog {
  constructor(name) {
    this.name = name;
  }
}

// If you do not do this you will get a TypeError when you invoke speak
Object.setPrototypeOf(Dog.prototype, Animal);

var d = new Dog('Mitzie');
d.speak(); // Mitzie makes a noise.

Espécies

Se quiser devolver um objeto do tipo Array na sua classe derivada MyArray. O padrão espécies permite-lhe redefinir o construtor por omissão.

Por exemplo, na utilização de um método como o map(), o qual devolve o construtor por omissão, querer-se-á que estes métodos devolvam um objeto pai do tipo Array, em vez de um objeto MyArray. O símbolo Symbol.species permite fazer isto:

class MyArray extends Array {
  // Overwrite species to the parent Array constructor
  static get [Symbol.species]() { return Array; }
}

var a = new MyArray(1,2,3);
var mapped = a.map(x => x * x);

console.log(mapped instanceof MyArray); // false
console.log(mapped instanceof Array);   // true

Chamadas à super classe com super

A palavra reservada super é utilizada para chamar funções no objeto pai do objeto.

class Cat { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(this.name + ' roars.');
  }
}

var l = new Lion('Fuzzy');
l.speak(); 
// Fuzzy makes a noise.
// Fuzzy roars.

Mix-ins

A subclasses abstratas ou mix-ins são templates para classes. Uma classe ECMAScript apenas pode ter uma única superclasse, Portanto, múltiplas heranças de classes de ferramentas, por exemplo, não são possíveis. A funcionalidade deve ser fornecida pela superclasse.

Uma função com uma superclasse como entrada e uma subclasse estendendo aquela superclasse como saída pode ser usada para implementar mix-ins no ECMAScript.:

var calculatorMixin = Base => class extends Base {
  calc() { }
};

var randomizerMixin = Base => class extends Base {
  randomize() { }
};

Uma classe que usa esses mix-ins pode ser escrita assim:

class Foo { }
class Bar extends calculatorMixin(randomizerMixin(Foo)) { }

Especificações

Compatibilidade no Browser 

Executar no Scratchpad

Uma classe não pode ser redefinida. Se estiver a escrever código no Scratchpad (Firefox menu Tools > Web Developer > Scratchpad) e se 'executar' a definição de uma classe com o mesmo nome duas vezes, irá receber um obscuro SyntaxError: redeclaration of let <class-name>.

Para voltar a executar uma definição, utilise o menu Scratchpad's Execute > Reload and Run.
Vote, por favor, no bug #1428672.

Veja também

• Functions
• class declaration
• class expression
• super
• Blog post: "ES6 In Depth: Classes"