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;
}
};
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 (ECMA-262) The definition of 'Class definitions' in that specification. |
Living Standard |
Compatibilidade no Browser
BCD tables only load in the 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.