W3docs

Sintaxe de Classes em JavaScript

Em JavaScript, as classes fornecem uma sintaxe para programação orientada a objetos mais tradicional, com estrutura clara e recursos adicionais de segurança.

Introdução à Sintaxe de Classes em JavaScript

Uma classe é um modelo para criar objetos que compartilham a mesma forma e comportamento. Em vez de escrever manualmente o mesmo padrão de função construtora mais protótipo, você descreve o objeto uma vez e cria quantas instâncias precisar. As classes foram introduzidas no ECMAScript 2015 (ES6) e se tornaram a forma padrão de modelar código orientado a objetos em JavaScript.

Este capítulo aborda os fundamentos: como declarar uma classe, o que o constructor faz, como adicionar métodos, getters/setters e campos públicos, a diferença entre declarações de classe e expressões de classe, além de dois fatos que costumam confundir as pessoas — classes são funções por baixo dos panos e não sofrem hoisting como funções regulares.

Definindo uma Classe

Uma classe é declarada com a palavra-chave class, seguida de um nome e um corpo entre chaves:

class MyClass {
  // class body
}

Por convenção, nomes de classes usam PascalCase (Rectangle, UserAccount). O corpo contém métodos, getters/setters e campos — mas note que, diferentemente de literais de object, os membros não são separados por vírgulas.

O Constructor

O constructor é um método especial que é executado automaticamente quando você cria uma instância com new. Sua função é receber argumentos e inicializar as propriedades do novo objeto por meio de this:

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

Uma classe pode ter no máximo um constructor. Se você omiti-lo, o JavaScript fornece um vazio automaticamente.

Criando uma Instância

Use a palavra-chave new para construir uma instância. new cria um novo object, vincula-o a this, executa o constructor e retorna o object:

javascript— editable

Métodos de Classe

Os métodos declarados no corpo são adicionados ao protótipo da classe, de modo que todas as instâncias compartilham uma única cópia em vez de cada uma ter a sua própria. Dentro de um método, this se refere à instância em que ele foi chamado:

javascript— editable

Os métodos de classe são não enumeráveis, o que significa que não aparecem em um loop for...in ou em Object.keys() — outra diferença entre classes e objetos simples, onde métodos adicionados são enumeráveis.

Getters e Setters

Um getter permite expor um valor calculado como se fosse uma propriedade; um setter permite interceptar uma atribuição. Prefixe um método com get ou set:

javascript— editable

Getters e setters são ideais para validação ou valores derivados. Veja Getters e setters de propriedades para uma análise mais aprofundada.

Campos Públicos de Classe

Você pode declarar e inicializar propriedades de instância diretamente no corpo da classe, sem precisar escrevê-las dentro do constructor. Esses são os campos públicos de classe:

javascript— editable

Os campos são atribuídos a cada instância (não ao protótipo) antes da execução do corpo do constructor. Para campos que devem ser ocultados do código externo, use campos privados (o prefixo #) — abordado em Propriedades e métodos privados e protegidos.

Métodos Estáticos

Um método static pertence à própria classe, não às suas instâncias. Membros estáticos são úteis para utilitários ou funções de fábrica que estão relacionados à classe, mas não precisam de uma instância específica:

javascript— editable

As classes também suportam campos e propriedades static. Para uma visão completa, leia Propriedades e métodos estáticos.

Expressões de Classe

Assim como funções, as classes podem ser definidas como expressões e atribuídas a uma variável. As expressões de classe podem ser anônimas ou nomeadas:

javascript— editable

Isso é útil quando você precisa criar uma classe condicionalmente, passá-la como argumento ou retorná-la de uma função.

Classes São Funções por Baixo dos Panos

Uma classe é, na verdade, um tipo especial de função. A sintaxe class é em grande parte açúcar sintático sobre o padrão mais antigo de função construtora mais protótipo, com algumas proteções adicionais:

javascript— editable

As proteções adicionais incluem: o corpo sempre é executado em modo estrito, os métodos são não enumeráveis e um constructor de classe não pode ser chamado sem new (fazer isso lança um TypeError).

Classes Não Sofrem Hoisting

Declarações de funções sofrem hoisting — você pode chamá-las antes de aparecerem no código. Declarações de classes não são utilizáveis antes de serem definidas. Elas sofrem hoisting apenas em nome, mas permanecem na "zona morta temporal", por isso acessar uma antecipadamente lança um ReferenceError:

javascript— editable

Sempre declare uma classe antes de usá-la.

Resumo

As classes JavaScript conferem ao código orientado a objetos uma estrutura clara e previsível. Neste capítulo você viu como declarar uma classe, escrever um constructor, adicionar métodos de protótipo, getters/setters, campos públicos e métodos static, além de expressões de classe. Lembre-se dos dois fatos principais: uma classe é uma função por baixo dos panos cujo corpo é executado em modo estrito e não pode ser chamada sem new, e declarações de classe não sofrem hoisting.

A partir daqui, os próximos passos naturais são estender classes com Herança de classes, agrupar utilitários compartilhados com Propriedades e métodos estáticos e ocultar o estado interno com Propriedades e métodos privados e protegidos.

Prática

Prática
Quais são as principais características da sintaxe 'class' do JavaScript?
Quais são as principais características da sintaxe 'class' do JavaScript?
Was this page helpful?