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

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;
  }
};

Nota: Expressões de classes também padecem da mesma situação de hoisting mencionada para as declarações de classes.

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ções de campo públicos e privados são uma funcionalidade experimental (stage 3)  proposta no TC39, o comité de padrões JavaScript. O suporte nos navegadores é limitado, mas a funcionalidade pode ser usada por meio de uma etapa de build com sistemas como o Babel.

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.

Campos privados só podem ser declarados antecipadamente numa declaração de campo.

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

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Class definitions' in that specification.
Standard Definição inicial.
ECMAScript 2016 (ECMA-262)
The definition of 'Class definitions' in that specification.
Standard  
ECMAScript 2017 (ECMA-262)
The definition of 'Class definitions' in that specification.
Standard  
ECMAScript Latest Draft (ECMA-262)
The definition of 'Class definitions' in that specification.
Draft  

Compatibilidade no Browser 

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
classesChrome Full support 49
Notes
Full support 49
Notes
Notes From Chrome 42 to 48, strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Edge Full support 13Firefox Full support 45IE No support NoOpera Full support 36
Notes
Full support 36
Notes
Notes From Opera 29 to 35, strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Safari Full support 9WebView Android Full support 49
Notes
Full support 49
Notes
Notes From WebView 42 to 48, strict mode is required.
Chrome Android Full support 49
Notes
Full support 49
Notes
Notes From Chrome 42 to 48, strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Firefox Android Full support 45Opera Android Full support 36
Notes
Full support 36
Notes
Notes From Opera 29 to 35, strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Safari iOS Full support 9Samsung Internet Android Full support 5.0
Notes
Full support 5.0
Notes
Notes In Samsung Internet 4.0, strict mode is required.
nodejs Full support 6.0.0
Full support 6.0.0
Full support 4.0.0
Disabled
Disabled From version 4.0.0: this feature is behind the --use_strict runtime flag.
Full support 5.0.0
Disabled
Disabled From version 5.0.0: this feature is behind the --harmony runtime flag.
constructorChrome Full support 49
Notes
Full support 49
Notes
Notes From Chrome 42 to 48 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Edge Full support 13Firefox Full support 45IE No support NoOpera Full support 36Safari Full support 9WebView Android Full support 49
Notes
Full support 49
Notes
Notes From Chrome 42 to 48 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Chrome Android Full support YesFirefox Android Full support 45Opera Android ? Safari iOS Full support 9Samsung Internet Android Full support Yesnodejs Full support 6.0.0
Full support 6.0.0
Full support 4.0.0
Disabled
Disabled From version 4.0.0: this feature is behind the --use_strict runtime flag.
Full support 5.0.0
Disabled
Disabled From version 5.0.0: this feature is behind the --harmony runtime flag.
extendsChrome Full support 49
Notes
Full support 49
Notes
Notes From Chrome 42 to 48 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Edge Full support 13Firefox Full support 45IE No support NoOpera Full support 36Safari Full support 9WebView Android Full support 49
Notes
Full support 49
Notes
Notes From Chrome 42 to 48 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Chrome Android Full support YesFirefox Android Full support 45Opera Android ? Safari iOS Full support 9Samsung Internet Android Full support Yesnodejs Full support 6.0.0
Full support 6.0.0
Full support 4.0.0
Disabled
Disabled From version 4.0.0: this feature is behind the --use_strict runtime flag.
Full support 5.0.0
Disabled
Disabled From version 5.0.0: this feature is behind the --harmony runtime flag.
Private class fieldsChrome Full support 74Edge No support NoFirefox No support NoIE No support NoOpera Full support 62Safari No support NoWebView Android Full support 74Chrome Android Full support 74Firefox Android No support NoOpera Android Full support 53Safari iOS No support NoSamsung Internet Android No support Nonodejs Full support 12.0.0
Public class fieldsChrome Full support 72Edge No support NoFirefox Full support 69IE No support NoOpera Full support 60Safari No support NoWebView Android Full support 72Chrome Android Full support 72Firefox Android No support NoOpera Android Full support 51Safari iOS No support NoSamsung Internet Android No support Nonodejs Full support 12.0.0
staticChrome Full support 49
Notes
Full support 49
Notes
Notes From Chrome 42 to 48 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Edge Full support 13Firefox Full support 45IE No support NoOpera Full support 36Safari Full support 9WebView Android Full support 49
Notes
Full support 49
Notes
Notes From Chrome 42 to 48 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Chrome Android Full support YesFirefox Android Full support 45Opera Android ? Safari iOS Full support 9Samsung Internet Android Full support Yesnodejs Full support 6.0.0
Full support 6.0.0
Full support 4.0.0
Disabled
Disabled From version 4.0.0: this feature is behind the --use_strict runtime flag.
Full support 5.0.0
Disabled
Disabled From version 5.0.0: this feature is behind the --harmony runtime flag.

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

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